Intersoft ClientUI Documentation
Walkthrough: Display Data Details of UXListBox’s SelectedItem using MVVM Pattern
Intersoft ClientUI 8 > ClientUI Fundamentals > MVVM Pattern Overview > MVVM Pattern Walkthroughs > Walkthrough: Display Data Details of UXListBox’s SelectedItem using MVVM Pattern

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:

Prerequisites

You need the following components to complete this walkthrough:

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>
    Adding Border
  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>
    Adding 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.Adding Grid

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.UXListBox Walkthrough Final Page
  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

Sample Code
Copy Code 
using System;
using System.Xml.Linq;

namespace UXListBox_Walkthrough.Models
{
    public class Hotel : ViewModels.ModelBase
    {
        #region Contructors

        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();
        }

        #endregion

        #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
    }
}

HotelList.xaml

Sample Code
Copy Code 
<Intersoft:UXPage 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
        xmlns:Intersoft="http://intersoft.clientui.com/schemas"
    xmlns:ViewModels="clr-namespace:UXListBox_Walkthrough.ViewModels"   
        x:Class="UXListBox_Walkthrough.Views.HotelList" 
        Title="HotelList Page"
        d:DesignWidth="640" d:DesignHeight="480">

    <Intersoft:UXPage.Resources>
        <ViewModels:HotelsViewModel x:Key="HotelsData"></ViewModels:HotelsViewModel>
        <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>
        <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>

    <Grid x:Name="LayoutRoot">
        <Grid DataContext="{StaticResource HotelsData}"  MaxHeight="350" MaxWidth="1000">
            <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">
                    <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>
                <Intersoft:ContentTransformer Intersoft:DockPanel.Dock="Right" HorizontalAlignment="Left">
                    <Intersoft:ContentTransformer.Transform>
                        <CompositeTransform Rotation="-90"/>
                    </Intersoft:ContentTransformer.Transform>
                    <Grid Background="Black">
                        <TextBlock TextWrapping="Wrap" Text="HOTELS" Foreground="White" VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="0,0,70,0" FontSize="16"/>
                    </Grid>
                </Intersoft:ContentTransformer>
            </Intersoft:DockPanel>
            <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">
                    <TextBlock Text="{Binding SelectedItem.Hotel.Name}" Foreground="White" FontSize="26.667"/>
                    <TextBlock Text="{Binding SelectedItem.Hotel.Location}" Foreground="White" FontSize="18.667"/>
                </StackPanel>
            </Border>
        </Grid>
    </Grid>
</Intersoft:UXPage>

HotelViewModel.cs

Sample Code
Copy Code 
using UXListBox_Walkthrough.Models;

namespace UXListBox_Walkthrough.ViewModels
{
    public class HotelViewModel : ViewModelBase
    {
        // Fields
        private Hotel _hotel;

        // Constructor
        public HotelViewModel(Hotel hotel)
        {
            _hotel = hotel;
        }

        // Views
        public Hotel Hotel
        {
            get { return this._hotel; }
        }
    }
}

HotelsViewModel.cs

Sample Code
Copy Code 
using System;
using System.Collections.ObjectModel;
using System.Linq;
using System.Windows.Resources;
using System.Xml.Linq;
using UXListBox_Walkthrough.Models;

namespace UXListBox_Walkthrough.ViewModels
{
    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();
        }
    }
}
See Also
UXListBox Class

Concepts

Advanced MVVM
Data Binding Overview

Other Resources

Locating the Samples in Local Installation
MVVM Pattern How-to Topics
MVVM Pattern Walkthroughs
Walkthroughs and How-to Topics