RadTileView: XAML+VM of tile items vary/change

9 posts, 0 answers
  1. SailorChris
    SailorChris avatar
    11 posts
    Member since:
    Mar 2014

    Posted 05 Nov 2014 Link to this post

    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
  2. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 10 Nov 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for WPF is Visual Studio 2017 Ready
  4. SailorChris
    SailorChris avatar
    11 posts
    Member since:
    Mar 2014

    Posted 10 Nov 2014 Link to this post

    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
  5. SailorChris
    SailorChris avatar
    11 posts
    Member since:
    Mar 2014

    Posted 10 Nov 2014 in reply to SailorChris Link to this post

    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>
  6. SailorChris
    SailorChris avatar
    11 posts
    Member since:
    Mar 2014

    Posted 10 Nov 2014 Link to this post

    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
  7. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 13 Nov 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  8. SailorChris
    SailorChris avatar
    11 posts
    Member since:
    Mar 2014

    Posted 13 Nov 2014 in reply to Pavel R. Pavlov Link to this post

    Hello,

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

    Thx
  9. SailorChris
    SailorChris avatar
    11 posts
    Member since:
    Mar 2014

    Posted 13 Nov 2014 in reply to SailorChris Link to this post

    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
  10. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 17 Nov 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for WPF is Visual Studio 2017 Ready