XamTileManager – new control in the XAML Line of Business product shipped with the 11.2 release

Atanas Dyulgerov / Tuesday, November 1, 2011

One of the new controls in the 11.2 release is the XamTileManager. It is the successor to the retired XamTilesControl and it is similar to it, but does everything better and now works both in Silverlight and WPF. The XamTileManager displays content using rectangular tiles, which are arranged sequentially creating multiple rows of tiles. Your end users can maximize one or more tiles, which automatically minimizes the remaining tiles. However, the minimized tiles will remain in view along an edge of the control, so your end users can quickly maximize and shift their attention to new content.

The XamTileManager is data bindable. The sample shown on the screenshots above uses meetings data. Each XamTile is bound to a user. In the normal state a short form of the schedule for that user is shown, in the maximized view more data is shown for the same user.

The XamTileManager supports Drag-and-Drop out of the box. You can swap the places of users, reorder them or implement custom logic based on your drag actions (like dragging to trash of a tile).

Another nice feature of the XamTileManager is the support of animations. State transitions are animated by default for you. You can control them of course and modify their behavior, remove them all together or you can supply your own custom animations to customize this experience.

One difference with the old XamTilesPanel is the way you save and load layouts. Before you had to set a few properties, give names to things you want to save and then invoke the SaveLayout or LoadLayout methods. Now this process is simplified by allowing the XamTileManager to take advantage of our Persistence Framework.

Last but not least the XamTileManager support State-based item templates. You can define item templates based on the state of the tiles – Maximized, Normal and Minimized. The XamTileManager will automatically apply the proper item template as your end users change the state of a tile. You can restrict the size of tiles based on their state too and your end users can resize tiles using resizing indicators.

Here are some code snippets that show how to use the new XamTileManager.

First we are going to create the classes that will be our data source. The class user has properties Name, Schedule and Details. The constructor populates the properties accordingly. The class Users is basically an ObservableCollection with 100 randomly generated users.

    public class User

        private static Random r = new Random();

        string[] appointments =

            "Out of office",

            "Busy",

            "Free",

            "Meeting",

"?"

};

        string[] descriptions =

            "This is important when dealing...",

            "Important... take into account!...",

            "Perhaps the best insurance..."

};

        public User(string name)

            Name = name;

            Schedule = new ObservableCollection<string>();

            Details = new ObservableCollection<string>();

            for (int i = 0; i < 8; i++)

                Schedule.Add(string.Format(

                    "{0:00}:00 - {1}",

                    8 + i,

                    appointments[r.Next(0, appointments.Length)]

));

                Details.Add(string.Format(

                    "{0} \r\n {1}",

                    Schedule[i],

                    descriptions[r.Next(0, descriptions.Length)]

));

        public string Name { get; set; }

        public ObservableCollection<string> Schedule { get; set; }

        public ObservableCollection<string> Details { get; set; }

    public class Users : ObservableCollection<User>

        public Users()

            for (int i = 0; i < 100; i++)

                this.Add(new User("User " + (this.Count + 1).ToString()));

Now that we have data we can create the XamTileManager itself. We need to add the appropriate namespaces:

    xmlns:ig="http://schemas.infragistics.com/xaml"

    xmlns:local="clr-namespace:TileManagerDemo"

Note that here the local namespace is where the User and Users classes are defined.

Then we should add the resources to our UserControl that is holding the XamTileManager.

    <UserControl.Resources>
        <DataTemplate x:Key="UserTemplate">
            <ScrollViewer VerticalScrollBarVisibility="Auto">
                <ListBox x:Name="lbSchedule"

                         ItemsSource="{Binding Schedule}"

                         HorizontalAlignment="Stretch"

                         Background="Transparent"

                         BorderThickness="0"

                         Padding="0"

                         Margin="0"

                         Width="200" />
            </ScrollViewer>
        </DataTemplate>
 
        <DataTemplate x:Key="UserTemplateMaximized">
            <ListBox ItemsSource="{Binding Details}"

                      Background="Transparent"

                       BorderThickness="0"

                       Foreground="DarkBlue"/>
        </DataTemplate>
 
        <DataTemplate x:Key="UserTemplateMinimized">
            <TextBlock Text="Expand item to see more" />
        </DataTemplate>
 
        <DataTemplate x:Key="UserHeaderTemplate">
            <TextBlock Text="{Binding Name}" />
        </DataTemplate>
 
        <local:Users x:Key="Users"/>
    </UserControl.Resources>

We have three data templates for each state of the User Tile, one for the header of each tile and we also create an instance of the data source that we’ll use.

Finally we add in the LayoutRoot the XamTileManager itself

    <Grid x:Name="LayoutRoot">
        <ig:XamTileManager ItemsSource="{Binding Source={StaticResource Users}}"

                           ItemTemplateMaximized="{StaticResource UserTemplateMaximized}"

                           ItemTemplateMinimized="{StaticResource UserTemplateMinimized}"

                           ItemTemplate="{StaticResource UserTemplate}"

                           ItemHeaderTemplate="{StaticResource UserHeaderTemplate}"             >
            <ig:XamTileManager.NormalModeSettings>
                <ig:NormalModeSettings MaxColumns="3" MaxRows="3" />
            </ig:XamTileManager.NormalModeSettings>
            <ig:XamTileManager.MaximizedModeSettings>
                <ig:MaximizedModeSettings ShowAllMinimizedTiles="False"

                                          ShowTileAreaSplitter="True" />
            </ig:XamTileManager.MaximizedModeSettings>
        </ig:XamTileManager>
    </Grid>

After this step we are ready with a simple application that uses the XamTileManager to display user schedule for various users.

I hope this has been interesting and useful. Have a great day.