Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

This walkthrough shows you how to use UXOverflowStackPanel to contain an overflow item in the UXItemsControl.

Prerequisites

You need the following components to complete this walkthrough:

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

In addition, you also need the following resources to complete this walkthrough:

  • Intersoft.ClientUI.Samples.Assets assembly
    Available in: [Intersoft Installation Folder]\Intersoft WebUI Studio 2010 R1\Samples\SL4\ClientUI Samples\Intersoft.ClientUI.Samples.Assets\Bin\Debug
Panel

On this page:

Table of Contents
maxLevel2
stylecircle

Modern note

The assembly is required for the XML data source and images

Creating an Intersoft ClientUI MVVM Application Project

The first step is to create a new ClientUI MVVM Application project 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.
  4. Also add reference to Intersoft.ClientUI.Samples.Assets assembly, the assembly is available from the provided ClientUI sample. 

Creating Model Class

This section shows how to create a Model class in Book.cs. The model will map each information in the data entity to a property.

To create the Book model class

  1. Create a new Book.cs under the Models folder and inherit the ModelBase class.
  2. Create a private variable and a public property for Author node with a String data type. In the setter property, OnPropertyChanged method must be called after the property is assigned a new value.

    Code Block
    titleC#
    languagec#
    private string _author;
    public string Author
    {
        get
        {
            return _author;
        }
        set
        {
            if (_author != value)
            {
                _author = value;
                OnPropertyChanged("Author");
            }
        }
    }
  3. Repeat the process for ID, Title, Category, Price, and Image node. String data type is used for ID, Title, and Category. Double is used for Price. Uri is used for Image.
  4. Create a constructor which accept XElement parameter. The constructor maps information in the data entity to each property in the class.

    Code Block
    titleC#
    languagec#
    public Book(XElement x)
        : this()
    {
        this._author = x.Element("Author").Value.Trim();
        this._title = x.Element("Title").Value.Trim();
        this._category = x.Element("Category").Value.Trim();
        this._ID = x.Element("ID").Value.Trim();
        this._price = double.Parse(x.Element("Price").Value.Trim());
        this._image = new Uri("/Intersoft.ClientUI.Samples.Assets;component/Images/Books/" +
    				  x.Element("Image").Value.Trim(), UriKind.RelativeOrAbsolute);
    }

Creating the ViewModel Class

This section shows how to create a ViewModel to hold the collection of Book model object.

To create the BookFlowViewModel ViewModel class

  1. Create a new BookFlowViewModel.cs under the ViewModels folder and inherit the ViewModelBase class.
  2. Create a public property to hold the collection of Book model object.

    Code Block
    titleC#
    languagec#
    public ObservableCollection<Book> FilteredBooks{ get; set; }
  3. Create a LoadBooks method which will be called in the constructor to load the Book object from the XML file to the book collection variable. In this scenario, only books with specific category is loaded.

    Code Block
    titleC#
    languagec#
    private void LoadBooks()
    {
        // loads book data from xml file
        StreamResourceInfo resource = System.Windows.Application.GetResourceStream(
                new Uri("Intersoft.ClientUI.Samples.Assets;component/Data/BookDataSource.xml",
    				     UriKind.Relative));
        XDocument doc = XDocument.Load(resource.Stream);
        var filteredBooks = (from x in doc.Descendants("Book")
                                where x.Element("Category").Value.Trim() == "Science and Nature"
                                select new Book(x)).Take(8);
        FilteredBooks = new ObservableCollection<Book>(filteredBooks);
    }

Creating the View

This section shows how to create the View used in the application interface using the BookFlow.xaml. Binding data to the control and setting the overflow panel using UXOverflowStackPanel also done in this section.

To create the BookFlow view

  1. Add a new UXPage to the Views folder in your Silverlight project and name it BookFlow.xaml

    Modern note

    For more information on how to add a new item in Visual Studio, see Walkthrough: Add New Item such as Page, Dialog Box and Window in VS 2010

  2. Declare the namespace that maps to the BookFlowViewModel class.

    Code Block
    titleXAML
    languagexml
    <Intersoft:UXPage 
            ...
        xmlns:ViewModels="clr-namespace:ClientUIMVVMAutoFitPanel.ViewModels"
            ...
        >
        ...
    </Intersoft:UXPage>
  3. Reference the BookFlowViewModel as the page DataContext.

    Code Block
    titleXAML
    languagexml
    <Intersoft:UXPage.DataContext>
        <ViewModels:BookFlowViewModel />
    </Intersoft:UXPage.DataContext>
  4. Add a new UXWindow with a predefined size to ensure item will be overflow. Set the following properties:

    PropertyValue
    VerticalAlignmentCenter
    HorizontalAlignmentLeft
    Width350
    Height450
    MinWidth400
    MinHeight300
    MaxWidth600
    CanMinimizeFalse
    CanMaximizeFalse
    CanCloseFalse
    IsClientVisibleTrue
    IsActiveTrue
    HeaderBook Library
  5. Add a new DockPanel under UXWindow which contains UXItemsControl docked to the Bottom and StackPanel docked to the Right.  

    Code Block
    titleXAML
    languagexml
    <Intersoft:DockPanel FillChildMode="Custom">
        <Intersoft:UXItemsControl VerticalAlignment="Bottom" Intersoft:DockPanel.Dock="Bottom" Height="83" >
    	</Intersoft:UXItemsControl>
        <StackPanel x:Name="VerticalPanel" VerticalAlignment="Bottom" Intersoft:DockPanel.Dock="Right"/>
    </Intersoft:DockPanel>
  6. Bind the BookFlowViewModel to the UXItemsControl and use Horizontal as the UXItemsControl Orientation.
  7. Modify the UXItemsControl ItemTemplate, use Image control and bind the Source property to Image property in the ViewModel.

    Code Block
    titleXAML
    languagexml
    <Intersoft:UXItemsControl ... >
        <Intersoft:UXItemsControl.ItemTemplate>
            <DataTemplate>
                <Image Source="{Binding Image}" Width="60" MaxHeight="70" VerticalAlignment="Bottom"
    				   Margin="1,1,1,1"/>
            </DataTemplate>
        </Intersoft:UXItemsControl.ItemTemplate>
    </Intersoft:UXItemsControl>       

To create the overflow panel

  1. Modify the UXItemsControl ItemPanelTemplate to use UXOverflowStackPanel and bind StackPanel element to the OverflowPanel property.

    Code Block
    titleXAML
    languagexml
    <Intersoft:UXItemsControl ... >
        <Intersoft:UXItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Intersoft:UXOverflowStackPanel OverflowContainer="{Binding ElementName=VerticalPanel}" />
            </ItemsPanelTemplate>
        </Intersoft:UXItemsControl.ItemsPanel>
    </Intersoft:UXItemsControl>
  2. Set Background to Gray in order to differentiate between the panel and overflow panel.
  3. Modify the StackPanelOrientation to Vertical

Viewing the Result

In order to view the result, you will need to build the Silverlight project and run the test page in browser.

To test the result

  1. Resizing the UXWindow will move the overflow item to the StackPanel.

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 UXItemsControl to a collection of data and how to use UXOverflowStackPanel to hold the overflow item.

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.

BookFlow.xaml

Code Block
titleXAML
languagexml
<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"
        xmlns:Intersoft="http://intersoft.clientui.com/schemas"
       xmlns:ViewModels="clr-namespace:ClientUIMVVMAutoFitPanel.ViewModels"
        mc:Ignorable="d"
        x:Class="ClientUIMVVMAutoFitPanel.Views.BookFlow" 
        Title="BookFlow Page"
        d:DesignWidth="640" d:DesignHeight="480">
    <Intersoft:UXPage.DataContext>
        <ViewModels:BookFlowViewModel />
    </Intersoft:UXPage.DataContext>
    <Grid x:Name="LayoutRoot">
        <Intersoft:UXWindow VerticalAlignment="Center" HorizontalAlignment="Left" Width="450"
				   			Height="350" MinWidth="400" MinHeight="300" CanMinimize="False"
				   			CanMaximize="False" CanClose="False" IsClientVisible="True"
				   			IsActive="True" Header="Book Library" MaxWidth="600">
            <Intersoft:DockPanel FillChildMode="Custom">
                <Intersoft:UXItemsControl ItemsSource="{Binding FilteredBooks}" VerticalAlignment="Bottom" 
                    Intersoft:DockPanel.Dock="Bottom" Height="83" Orientation="Horizontal">
                    <Intersoft:UXItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Image Source="{Binding Image}" Width="60" MaxHeight="70"
				   					VerticalAlignment="Bottom" Margin="1,1,1,1"/>
                        </DataTemplate>
                    </Intersoft:UXItemsControl.ItemTemplate>
                    <Intersoft:UXItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <Intersoft:UXOverflowStackPanel Background="Gray"
				   					   OverflowContainer="{Binding ElementName=VerticalPanel}" />
                        </ItemsPanelTemplate>
                    </Intersoft:UXItemsControl.ItemsPanel>
                </Intersoft:UXItemsControl>
                <StackPanel x:Name="VerticalPanel" Orientation="Vertical" VerticalAlignment="Bottom"
                    		Intersoft:DockPanel.Dock="Right"/>
            </Intersoft:DockPanel>
        </Intersoft:UXWindow>
    </Grid>
</Intersoft:UXPage>

BookFlowViewModel.cs

Code Block
titleC#
languagec#
using System.Collections.ObjectModel;
using System.Linq;
using ClientUIMVVMAutoFitPanel.Models;
using Intersoft.Client.Framework.Input;
using Intersoft.Client.Framework;
using System.Windows.Resources;
using System;
using System.Xml.Linq;
namespace ClientUIMVVMAutoFitPanel.ViewModels
{
    public class BookFlowViewModel : ViewModelBase
    {
        public ObservableCollection<Book> FilteredBooks { get; set; }
        public BookFlowViewModel()
        {
            this.LoadBooks();
        }
        private void LoadBooks()
        {
            // loads book data from xml file
            StreamResourceInfo resource = System.Windows.Application.GetResourceStream(
                  new Uri("Intersoft.ClientUI.Samples.Assets;component/Data/BookDataSource.xml", UriKind.Relative));
            XDocument doc = XDocument.Load(resource.Stream);
            var filteredBooks = (from x in doc.Descendants("Book")
                                 where x.Element("Category").Value.Trim() == "Science and Nature"
                                 select new Book(x)).Take(8);
            FilteredBooks = new ObservableCollection<Book>(filteredBooks);
        }
    }
}

Book.cs

Code Block
titleC#
languagec#
using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using ClientUIMVVMAutoFitPanel.ViewModels;
using System.Xml.Linq;
namespace ClientUIMVVMAutoFitPanel.Models
{
    public class Book : ModelBase
    {
        public Book()
        {
        }
        public Book(XElement x)
            : this()
        {
            this._author = x.Element("Author").Value.Trim();
            this._title = x.Element("Title").Value.Trim();
            this._category = x.Element("Category").Value.Trim();
            this._ID = x.Element("ID").Value.Trim();
            this._price = double.Parse(x.Element("Price").Value.Trim());
            this._image = new Uri("/Intersoft.ClientUI.Samples.Assets;component/Images/Books/" +
				          x.Element("Image").Value.Trim(), UriKind.RelativeOrAbsolute);
        }
        private Uri _image = null;
        private string _author;
        private string _title;
        private string _category;
        private string _ID;
        private double _price;
        public string Author
        {
            get
            {
                return _author;
            }
            set
            {
                if (_author != value)
                {
                    _author = value;
                    OnPropertyChanged("Author");
                }
            }
        }
        public string Title
        {
            get
            {
                return _title;
            }
            set
            {
                if (_title != value)
                {
                    _title = value;
                    OnPropertyChanged("Title");
                }
            }
        }
        public string Category
        {
            get
            {
                return _category;
            }
            set
            {
                if (_category != value)
                {
                    _category = value;
                    OnPropertyChanged("Category");
                }
            }
        }
        public string ID
        {
            get
            {
                return _ID;
            }
            set
            {
                if (_ID != value)
                {
                    _ID = value;
                    OnPropertyChanged("ID");
                }
            }
        }
        public double Price
        {
            get
            {
                return _price;
            }
            set
            {
                if (_price != value)
                {
                    _price = value;
                    OnPropertyChanged("Price");
                }
            }
        }
        public Uri Image
        {
            get
            {
                return _image;
            }
            set
            {
                if (_image != value)
                {
                    _image = value;
                    OnPropertyChanged("Image");
                }
            }
        }
    }
}

 

Related Topics

Content by Label
spaces@self
reversetrue
showLabelsfalse
max5
sortmodified
labelskb-how-to-article -create-autofit-layout-supporting-overflow-with-uxoverflowpanel
showSpacefalse
typepage