RadTileView: XAML+VM of tile items vary/change

[SailorChris]

Hello,

I'am using RadTileView as a Dashboard that will show status of 8 different stations. These stations follow a workflow and can be in different states. Each state has a specific Large View. The Small and Normal will all look similar. Also, as a station changes from StateX to StateY, I receive that info through an EventHandler and want to change thus the XAML + its associated ViewModel in its corresponding Large tile.

I think through the DataTemplate (see below) it is doable. However, from the codebehind, how do I :
1- Empty Large Content for the corresponding Tile,
2- Set it with a different XAML (currently existing as UserControl) and set its datacontext to its specific ViewModel.

<DataTemplate x:Key="ContentTemplate" >
                <telerik:RadFluidContentControl ContentChangeMode="Manual" Name="radFluidContentControl"
                        State="{Binding RelativeSource={RelativeSource AncestorType=telerik:RadTileViewItem}, Path=TileState, Converter={StaticResource fluidContentStateConverter}}">
                    <telerik:RadFluidContentControl.SmallContent>
                        <local:SmallContent x:Name="smallContent"/>
                    </telerik:RadFluidContentControl.SmallContent>
                    <telerik:RadFluidContentControl.Content>
                        <local:Content x:Name="normalContent" />
                    </telerik:RadFluidContentControl.Content>
                    <telerik:RadFluidContentControl.LargeContent>
                        <!-- ***************** -->
                        <!-- The XAML + its VM would vary for each items in tile view. How do I set these individually for each Tile????-->
                        <!-- ***************** -->
                        <local:LargeContentConfig x:Name="largeContent" />
                    </telerik:RadFluidContentControl.LargeContent>
                </telerik:RadFluidContentControl>
            </DataTemplate>

Thx
Chris

Thx

[Pavel R. Pavlov]

Hello,

Let me get straight to your requirements. In order to change the ContentTemplate of the RadTileViewItems you need to use a ContentTemplateSelector. By default the FluidContentControl does not expose such selector. This is why you can use a native ContentControl and set it as LargeContent of the FluidContentControl. Furthermore, you will be able to use its ContentTemplateSelector. You need to keep in mind that the ContentTemplateSelector kicks in when the UI element is created based on its DataContext. This means that you will need to create new business object that will be represented whenever you need to change the XAML of an item.

This approach is demonstrated in the attached project. In it I change the XAML of an item based on the LargeContentTemplate property. Please take a look at it and let me know if you need any further assistance.

Regards,
Pavel R. Pavlov
Telerik

 

 

[SailorChris]

Hello,
Thx for responding. It's a start.
From your attached project, how would I set Template1 and Template2 to use existing UserControls in seperate XAML files?

thx

[SailorChris]

Ok I got it. Working as I desired.
Added DataType attribute in DataTemplate.
And added a basic usercontrol reference: <local:ContentTemplate1XAML/> for each.

Thx.

        <local:ContentTemplateSelector x:Key="MyContentTemplateSelector">
                <local:ContentTemplateSelector.Template1>
                    <DataTemplate DataType="{x:Type UserControl}" >
                        <local:ContentTemplate1XAML/>
                    </DataTemplate>
                </local:ContentTemplateSelector.Template1>
                <local:ContentTemplateSelector.Template2>
                    <DataTemplate DataType="{x:Type UserControl}">
                        <local:ContentTemplate2XAML/>
                    </DataTemplate>
                </local:ContentTemplateSelector.Template2>
            </local:ContentTemplateSelector>

[SailorChris]

Pavel,

Here is my next issue.

The UserControl-ContentTemplateXAML have constructors with parameters which are objects.

How do I pass these parameters through a xaml line <local:ContentTemplateXAML param1=... param2=... />?

Or maybe in codebehind instantiate the usercontrol and then assign it to the DataTemplate??? How?

Thx

[Pavel R. Pavlov]

Hello,

Have you tried exposing public properties in your UserControl? You will be able to access and set those properties in XAML like in your snippet. 

Another way would be to build your DataTemplate in code and when you assign your UserControl you will be able to pass parameters in its constructor. In my opinion the approach using public properties is the better one for this scenario. If I were I would use it.

Regards,
Pavel R. Pavlov
Telerik

 

 

[SailorChris]

Hello,

Building the DataTemplate from code behind will be ideal approach for my scenario.
Do you have any example?

Thx

[SailorChris]

Sorry! NOT build the datatemplate, but build the ContentTemplateSelector!!!

This example should have following:

-Create a ContentTemplateSelector
-Add content template selector items having a UserControl-ContentTemplateXAML whose constructors has parameters which are objects/pointers;
Remember: These UserControls already exist in my project.
-Assign this created ContentTemplateSelector to the LargeContent/ContentControl item:

            <DataTemplate x:Key="ContentTemplate">
                <telerik:RadFluidContentControl ContentChangeMode="Manual" State="{Binding ContentState, Converter={StaticResource fluidContentStateConverter}}">

....

                 <telerik:RadFluidContentControl.LargeContent>
                       <ContentControl Content="{Binding}" ContentTemplate="{Binding contentTemplate}"/>
                    </telerik:RadFluidContentControl.LargeContent>
                </telerik:RadFluidContentControl>
            </DataTemplate>

Thx

[Pavel R. Pavlov]

Hi,

You can follow the steps below. I do not insist to use them. They are just one possible way to achieve your requirements:
1.Create an instance of your TemplateSelector
2.Assign its Template properties to the desired DataTemplates
3.Get a reference to the RadFluidContentControl of each of the RadTileViewItems
4.Set the LargeContent of the control to a ContentControl
5.Set your TemplateSelector as ContentTemplateSelector of the ContentControl

Here is a snippet that implements those steps for the first RadTileViewItem.

var selector = new MyContentTemplateSelector();
selector.Template1 = App.Current.Resources["XKeyOfTemplate1"] as DataTemplate;
selector.Template2 = App.Current.Resources["XKeyOfTemplate2"] as DataTemplate;
var fluidControl = this.radTileView.ItemContainerGenerator.ContainerFromItem(radTileView.Items[0] as MyViewModel).ChildrenOfType<RadFluidContentControl>().FirstOrDefault();
fluidControl.LargeContent = new ContentControl() { ContentTemplateSelector = selector };

I hope this will help you.

Regards,
Pavel R. Pavlov
Telerik