UXListBox is an advanced selection control with comprehensive selection-related properties such as SelectedItem, SelectedIndex, SelectedValue and SelectedElement. With these properties available, many MVVM pattern scenarios can be elegantly achieved through data binding.

This walkthrough demonstrates the data binding to a collection of data, MVVM binding to SelectedItem, and using ItemTemplate to customize the item appearance.

In this walkthrough, you perform the following tasks:

• Create the Model class that represents the Hotel data entity.
• Create the View page that represents the user interface of the application.
• Create the ViewModel class that describes the View and provides the data detail of UXListBox selected item to be displayed.
• Bind the properties of UI controls in the View, such as ImageSource of the ImageLoader or ItemSource property of the list box to the ViewModel.

Prerequisites

You need the following components to complete this walkthrough:

• Visual Studio 2010
• Silverlight 4 Tools for Visual Studio 2010
• Intersoft ClientUI

Creating a new ClientUI MVVM Project

The first step is to create a new ClientUI MVVM Application using Intersoft ClientUI MVVM Application project template in Visual Studio.

To create the ClientUI MVVM Application project

1. Start Visual Studio 2010.
2. Create a new ClientUI MVVM Application project using Intersoft ClientUI MVVM Application project template. To learn more, see Walkthrough: Create New Intersoft ClientUI MVVM Application Template..
3. In project reference, add System.Xml.Linq.dll. This assembly is required to perform LINQ query to xml data.

To add the data file

1. In your project, create a new folder with name Data.
2. In Data folder, insert the data source from [Intersoft Installation Folder]\Intersoft WebUI Studio 2010 R1\Samples\SL4\ClientUI Samples\Intersoft.ClientUI.Samples.Assets\Data\HotelDataSource.xml.
3. Clic on the HotelDataSource.xml file and press F4 to open the Property Window. Change the BuildAction property to Resources.

To add the resources file

1. In your project, create new folder with name Images.
2. In Images folder, copy the images from [Intersoft Installation Folder]\Intersoft WebUI Studio 2010 R1\Samples\SL4\ClientUI Samples\Intersoft.ClientUI.Samples.Assets\Images\Hotels\

Next, you will create the Hotel model class that represent the data entity used in this walkthrough.

Creating Model Class

This section shows you how to create the Hotel model class that represents the data entity used in this walkthrough. The Hotel model class contains constructors to obtain the URI path of the hotel's image.

To create the Hotel Model Class

1. Create a Model class that inherits ModelBase class under the Models folder. You can name it Hotel.cs.
2. Add Image property to the Hotel model class by defining the backing field with complete getter and setter in the property. In the setter property you will need to call OnPropertyChanged method after the backing field is assigned to the new value.

   Sample Code	Copy Code
   private Uri _image; public Uri Image { get { return this._image; } set { if (this._image != value) { this._image = value; this.OnPropertyChanged("Image"); } } }

3. Also add Location and Name property to the Hotel model class by repeating step number 2.

   Sample Code

   Copy Code

   public class Hotel : ViewModels.ModelBase { #region Fields private Uri _image; private string _location; private string _name; #endregion #region Properties public Uri Image { get { return this._image; } set { if (this._image != value) { this._image = value; this.OnPropertyChanged("Image"); } } } public string Location { get { return this._location; } set { if (this._location != value) { this._location = value; this.OnPropertyChanged("Location"); } } } public string Name { get { return this._name; } set { if (this._name != value) { this._name = value; this.OnPropertyChanged("Name"); } } } #endregion }

4. Add constructor of the Hotel class.

   Sample Code	Copy Code
   public Hotel() { } public Hotel(XElement h) : this() { string image = h.Element("Image").Value.Trim(); this._image = new Uri("/UXListBox-Walkthrough;component/Images/" + image, UriKind.RelativeOrAbsolute); this._location = h.Element("Location").Value.Trim(); this._name = h.Element("Name").Value.Trim(); }

Next, you will create the view for your hotel list form application.

Creating the View

This section steps you through the process of creating a page that uses a variety of ClientUI controls such as UXListBox, ImageLoader, and ContentTransformer. The UXListBox is used to display a collection of Hotel data.

To create the View

1. In your project, locate Views folder.
2. In Views folder, add new Intersoft UXPage with name HotelList.xaml.
3. Open HotelList.xaml.
4. Add a Grid and set the MaxHeight property to 350px and the MaxWidth property to 1000px.

   Sample Code	Copy Code
   <Grid x:Name="LayoutRoot"> <Grid MaxHeight="350" MaxWidth="1000"> </Grid> </Grid>

5. Add a DockPanel and set the FillChildMode property to Custom.

   Sample Code	Copy Code
   <Grid MaxHeight="350" MaxWidth="1000"> <Intersoft:DockPanel FillChildMode="Custom"> </Intersoft:DockPanel> </Grid>

6. Add a Border and set the DockPanel.IsFillElement property to True and CornerRadius property to 16,0,0,16. This border is used as borderfor the hotel image, that will be explained in the next step.

   Sample Code	Copy Code
   <Intersoft:DockPanel FillChildMode="Custom"> <Border Intersoft:DockPanel.IsFillElement="True" CornerRadius="16,0,0,16"> </Border> </Intersoft:DockPanel>

7. Add ImageBrush to the Border.Background and set the Stretch property to UniformToFill.

   Sample Code	Copy Code
   <Border Intersoft:DockPanel.IsFillElement="True" CornerRadius="16,0,0,16"> <Border.Background> <ImageBrush Stretch="UniformToFill"/> </Border.Background> </Border>

8. Add another Border to DockPanel and set the Background property to Black, Width property to 290px, and DockPanel.Dock to Right.

   Sample Code	Copy Code
   <Intersoft:DockPanel FillChildMode="Custom"> <Border Intersoft:DockPanel.IsFillElement="True" CornerRadius="16,0,0,16"> <Border.Background> <ImageBrush Stretch="UniformToFill" ImageSource="{Binding SelectedItem.Hotel.Image}"/> </Border.Background> </Border> <Border Background="Black" Width="290" Intersoft:DockPanel.Dock="Right"> </Border> </Intersoft:DockPanel>

   
9. Add UXListBox control to the Border. In the Properties window, set the following properties.

   Property	Value
   Name	SampleControl1
   Background	{x:Null}
   BorderBrush	{x:Null}
   VerticalScrollBarVisibility	Hidden
   HorizontalScrollBarVisibility	Hidden
   VerticalAlignment	Stretch
   HorizontalAlignment	Stretch

   Sample Code	Copy Code
   <Border Background="Black" Width="290" Intersoft:DockPanel.Dock="Right"> <Intersoft:UXListBox x:Name="SampleControl1" Background="{x:Null}" BorderBrush="{x:Null}" VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Hidden" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/> </Border>

10. Add ContentTransformer control to the DockPanel and attach Dock property to Right and HorizontalAlignment to Left.

    Sample Code	Copy Code
    <Intersoft:DockPanel FillChildMode="Custom"> <Border Intersoft:DockPanel.IsFillElement="True" CornerRadius="16,0,0,16"> ... </Border> <Border ...> <Intersoft:UXListBox x:Name="SampleControl1" .../> </Border> <Intersoft:ContentTransformer Intersoft:DockPanel.Dock="Right" HorizontalAlignment="Left"> </Intersoft:ContentTransformer> </Intersoft:DockPanel>

11. In the CompositeTransform, set the Rotation property to -90

    Sample Code	Copy Code
    <Intersoft:ContentTransformer Intersoft:DockPanel.Dock="Right" HorizontalAlignment="Left"> <Intersoft:ContentTransformer.Transform> <CompositeTransform Rotation="-90"/> </Intersoft:ContentTransformer.Transform> </Intersoft:ContentTransformer>

12. Add a Grid to the ContentTransformer and set the Background property to Black.

    Sample Code	Copy Code
    <Intersoft:ContentTransformer Intersoft:DockPanel.Dock="Right" HorizontalAlignment="Left"> <Intersoft:ContentTransformer.Transform> <CompositeTransform Rotation="-90"/> </Intersoft:ContentTransformer.Transform> <Grid Background="Black"> </Grid> </Intersoft:ContentTransformer>

13. Add a TextBlock to the Grid. In the Properties window, set the following properties

    Property	Value
    TextWrapping	Wrap
    Text	HOTELS
    Foreground	White
    VerticalAlignment	Bottom
    HorizontalAlignment	Right
    Margin	0,0,70,0
    FontSize	16

    Sample Code	Copy Code
    <Grid Background="Black"> <TextBlock TextWrapping="Wrap" Text="HOTELS" Foreground="White" VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="0,0,70,0" FontSize="16"/> </Grid>

    
14. Add a Border. In the Properties window, set the following properties.

    Property	Value
    Background	#7F212121
    Height	77
    VerticalAlignment	Bottom
    CornerRadius	0,0,0,16
    IsHitTestVisible	False
    Margin	0,0,313,0

    Sample Code	Copy Code
    <Grid MaxHeight="350" MaxWidth="1000"> <Intersoft:DockPanel FillChildMode="Custom"> ... </Intersoft:DockPanel> <Border Background="#7F212121" Height="77" VerticalAlignment="Bottom" CornerRadius="0,0,0,16" IsHitTestVisible="False" Margin="0,0,313,0"> </Border> </Grid>

15. Add a StackPanel to the Border and set the VerticalAlignment property to Center and Margin property to 40,0,0,0.

    Sample Code	Copy Code
    <Border Background="#7F212121" Height="77" VerticalAlignment="Bottom" CornerRadius="0,0,0,16" IsHitTestVisible="False" Margin="0,0,313,0"> <StackPanel VerticalAlignment="Center" Margin="40,0,0,0"> </StackPanel> </Border>

16. Add a TextBlock to the StackPanel and set the Foreground property to White and FontSize property to 26.667.

    Sample Code	Copy Code
    <StackPanel VerticalAlignment="Center" Margin="40,0,0,0"> <TextBlock Foreground="White" FontSize="26.667"/> </StackPanel>

17. Add another TextBlock to the StackPanel and set the Foreground property to White and FontSize property to 18.667.

    Sample Code	Copy Code
    <StackPanel VerticalAlignment="Center" Margin="40,0,0,0"> <TextBlock Foreground="White" FontSize="26.667"/> <TextBlock Foreground="White" FontSize="18.667"/> </StackPanel>

18. To have a better appearance of the UXListBox, please add following Style.

    Sample Code

    Copy Code

    <Intersoft:UXPage.Resources> <Style x:Key="UXListBoxItemStyle1" TargetType="Intersoft:UXListBoxItem"> <Setter Property="Background" Value="Transparent"/> <Setter Property="BorderThickness" Value="0"/> <Setter Property="CornerRadius" Value="0"/> <Setter Property="IsTabStop" Value="False"/> <Setter Property="Padding" Value="0"/> <Setter Property="HorizontalContentAlignment" Value="Stretch"/> <Setter Property="VerticalContentAlignment" Value="Stretch"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Intersoft:UXListBoxItem"> <Grid x:Name="RootElement"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"/> <VisualState x:Name="MouseOver"> <Storyboard> <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FillColor"/> </Storyboard> </VisualState> <VisualState x:Name="Disabled"> <Storyboard> <DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentPresenter"/> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="SelectionStates"> <VisualState x:Name="Unselected"/> <VisualState x:Name="Selected"> <Storyboard> <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FillColor2"/> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="FocusStates"> <VisualState x:Name="Focused"/> <VisualState x:Name="Unfocused"/> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Border x:Name="FillColor" CornerRadius="1" IsHitTestVisible="False" Opacity="0"> <Border.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FFBFBFBF" Offset="0.004"/> <GradientStop Color="White" Offset="1"/> </LinearGradientBrush> </Border.Background> </Border> <Border x:Name="FillColor2" CornerRadius="1" IsHitTestVisible="False" Opacity="0"> <Border.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FFBFBFBF" Offset="0"/> <GradientStop Color="White" Offset="1"/> </LinearGradientBrush> </Border.Background> </Border> <Intersoft:StylishLabel x:Name="ContentPresenter" Foreground="White" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" ContentType="{TemplateBinding ContentType}" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentEffect="{x:Null}" CornerRadius="{TemplateBinding CornerRadius}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsTabStop="False" ImageMargin="{TemplateBinding ImageMargin}" ImageWidth="{TemplateBinding ImageWidth}" ImageStretch="{TemplateBinding ImageStretch}" ImageSource="{TemplateBinding Icon}" ImageHeight="{TemplateBinding ImageHeight}" Padding="{TemplateBinding Padding}" TextImageRelation="{TemplateBinding TextImageRelation}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/> <Border x:Name="FocusVisualElement"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </Intersoft:UXPage.Resources>

    Then bind it to ItemContainerStyle property of UXListBox.

    Sample Code

    Copy Code

    <Border Background="Black" Width="290" Intersoft:DockPanel.Dock="Right"> <Intersoft:UXListBox x:Name="SampleControl1" SelectedItem="{Binding SelectedItem, Mode=TwoWay}" Background="{x:Null}" BorderBrush="{x:Null}" ItemsSource="{Binding Hotels}" ItemTemplate="{StaticResource DataTemplate1}" ItemContainerStyle="{StaticResource UXListBoxItemStyle1}" VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Hidden" SelectedIndex="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/> </Border>

19. Here is the final screen shot of the View.

To create UXListBox ItemTemplate

1. Add DataTemplate to UXPage.Resources such as shown in the following code listing.

   Sample Code

   Copy Code

   <Intersoft:UXPage.Resources> ... <DataTemplate x:Key="DataTemplate1"> <Border BorderBrush="#FF131313" BorderThickness="1,1,1,0"> <Intersoft:DockPanel> <Intersoft:ImageLoader Height="50" Margin="4" VerticalAlignment="Center"/> <StackPanel Intersoft:DockPanel.Dock="Top" Margin="8,4,0,0"> <TextBlock FontSize="13.333"/> <TextBlock Foreground="#FF5F5F5F" FontSize="9.333"/> </StackPanel> </Intersoft:DockPanel> </Border> </DataTemplate> ... </Intersoft:UXPage.Resources>

Next, you will create the ViewModel that describe the View you just created.

Creating the ViewModel

This section steps you through the process of creating a ViewModel class that contains the properties to describe the View that you created in the previous section. The ViewModel defines the Hotels collection to represent an observable collection of HotelViewModel and a LoadData method to load hotel data from xml file.

To create the HotelViewModel class

1. Add a new class to the ViewModels folder in your Silverlight project and name it HotelViewModel.
2. Open HotelViewModel.cs and inherits the class from ViewModelBase class.
3. Create a constructor and add the Hotel property such as shown in following example.

   Sample Code	Copy Code
   public class HotelViewModel : ViewModelBase { // Fields private Hotel _hotel; // Constructor public HotelViewModel(Hotel hotel) { _hotel = hotel; } // Views public Hotel Hotel { get { return this._hotel; } } }

To create the HotelsViewModel class

1. Add a new class to the ViewModels folder in your Silverlight project and name it HotelsViewModel.cs.
2. Open HotelsViewModel.cs and inherit the class from ViewModelBase class.

   Sample Code	Copy Code
   public class HotelsViewModel : ViewModelBase

3. In this view mode, you add the Hotels properties which represent a collection of HotelViewModel. You also add SelectedItem with type HotelViewModel that will be bound to the SelectedItem property of UXListBox in the view, such as shown in the following code listing.

   Sample Code

   Copy Code

   public class HotelsViewModel : ViewModelBase { // Fields private HotelViewModel _selectedItem = null; // Views public ObservableCollection<HotelViewModel> Hotels { get; set; } // Selection, View States public HotelViewModel SelectedItem { get { return _selectedItem; } set { if (_selectedItem != value) { _selectedItem = value; OnPropertyChanged("SelectedItem"); } } } // Constructor public HotelsViewModel() { this.LoadData(); } private void LoadData() { // loads hotel data from xml file StreamResourceInfo resource = System.Windows.Application.GetResourceStream( new Uri("UXListBox-Walkthrough;component/Data/HotelDataSource.xml", UriKind.Relative)); XDocument doc = XDocument.Load(resource.Stream); var hotels = from x in doc.Descendants("Hotel") select new Hotel(x); this.Hotels = new ObservableCollection<HotelViewModel>(); foreach (Hotel hotel in hotels) { this.Hotels.Add(new HotelViewModel(hotel)); } resource.Stream.Close(); } }

Next, you will bind the the HotelsViewModel to your HotelList.xaml.

Binding the View to the ViewModel

This section shows how to bind the ViewModel that was created in the previous section to the View, for example you will bind the ItemsSource of UXListBox to Hotels property of the HotelsViewModel.

In the previous sections, you have learned how to create the Model and ViewModel classes, as well as the View that contains the user interface and controls used in this walkthrough. This section shows how to instantiate the ViewModel in the XAML page and bind the UI elements to the properties in the ViewModel such as the data context, selected item and items source.

To bind the HotelList page to the HotelsViewModel class

1. Declare the namespace that maps to the HotelsViewModel class in the HotelList page.

   Sample Code	Copy Code
   <Intersoft:UXPage ... xmlns:ViewModels="clr-namespace:UXListBox_Walkthrough.ViewModels" ...> </Intersoft:UXPage>

2. Instantiate a new instance of the HotelsViewModel class in the UXPage resources and name it HotelsData.

   Sample Code	Copy Code
   <Intersoft:UXPage...> <Intersoft:UXPage.Resources> <ViewModels:HotelsViewModel x:Key="HotelsData"></ViewModels:HotelsViewModel> ... </Intersoft:UXPage.Resources> </Intersoft:UXPage>

3. Bind the DataContext property of the Grid to the HotelsViewModel through the static resource extension markup.

   Sample Code	Copy Code
   <Grid DataContext="{StaticResource HotelsData}" MaxHeight="350" MaxWidth="1000"> </Grid>

4. Bind the ImageSource property of ImageBrush to SelectedItem.Hotel.Image property of the HotelsViewModel.

   Sample Code	Copy Code
   <Border.Background> <ImageBrush Stretch="UniformToFill" ImageSource="{Binding SelectedItem.Hotel.Image}"/> </Border.Background>

5. Bind the SelectedItem property of UXListBox to SelectedItem property of HotelsViewModel and set the binding Mode property to TwoWay. Also bind the ItemsSource property to Hotels property of HotelsViewModel.

   Sample Code

   Copy Code

   <Intersoft:UXListBox x:Name="SampleControl1" SelectedItem="{Binding SelectedItem, Mode=TwoWay}" Background="{x:Null}" BorderBrush="{x:Null}" ItemsSource="{Binding Hotels}" ItemTemplate="{StaticResource DataTemplate1}" ItemContainerStyle="{StaticResource UXListBoxItemStyle1}" VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Hidden" SelectedIndex="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>

6. Bind the Text property of the TextBlock to SelectedItem.Hotel.Name property of the HotelsViewModel.

   Sample Code	Copy Code
   <StackPanel VerticalAlignment="Center" Margin="40,0,0,0"> <TextBlock Text="{Binding SelectedItem.Hotel.Name}" Foreground="White" FontSize="26.667"/> ... </StackPanel>

7. Bind the Text property of the TextBlock to SelectedItem.Hotel.Location property of the HotelsViewModel.

   Sample Code	Copy Code
   <StackPanel VerticalAlignment="Center" Margin="40,0,0,0"> <TextBlock Text="{Binding SelectedItem.Hotel.Name}" Foreground="White" FontSize="26.667"/> <TextBlock Text="{Binding SelectedItem.Hotel.Location}" Foreground="White" FontSize="18.667"/> </StackPanel>

8. Bind the controls inside DataTemplate such as ImageLoader and TextBlock to specific properties from ContactViewModel such as shown in the following example.

   Sample Code

   Copy Code

   <Intersoft:UXPage.Resources> ... <DataTemplate x:Key="DataTemplate1"> <Border BorderBrush="#FF131313" BorderThickness="1,1,1,0"> <Intersoft:DockPanel> <Intersoft:ImageLoader Height="50" Margin="4" VerticalAlignment="Center" ImageSource="{Binding Hotel.Image}"/> <StackPanel Intersoft:DockPanel.Dock="Top" Margin="8,4,0,0"> <TextBlock Text="{Binding Hotel.Name}" FontSize="13.333"/> <TextBlock Text="{Binding Hotel.Location}" Foreground="#FF5F5F5F" FontSize="9.333"/> </StackPanel> </Intersoft:DockPanel> </Border> </DataTemplate> ... </Intersoft:UXPage.Resources>

9. Save, build and run the project.
10. After the application is running in the browser, you can try to click on one of the ites shown in UXListBox and the detail data, the hotel image; hotel name, and the hotel location, of the selected item is displayed

Conclusion

In this walkthrough, you have learned how to create ClientUI MVVM Application project using Intersoft ClientUI MVVM Application project template, and create classes and page based on the MVVM pattern. You also learned how to bind UXListBox to a collection of data and how to use ItemTemplate to display the hotel detail.

For more information about application development using MVVM pattern, see MVVM Pattern Overview.

Complete Code Listing

This section lists the complete code used in this walkthrough.

Hotel.cs

HotelList.xaml

HotelViewModel.cs

HotelsViewModel.cs

See Also