[Solved] Tileview Inside TileView

[Amitkumar]

Hi
I want to use Tileview Inside Tileview how can i use?

[Zarko]

Hi Amit Prajapati,
You can put anything inside the content of a RadTileViewItem so you can put another TileView like this:

<telerik:RadTileView>
    <telerik:RadTileViewItem Header="One">
        <telerik:RadTileView>
            <telerik:RadTileViewItem Header="1.1" />
            <telerik:RadTileViewItem Header="1.2" />
            <telerik:RadTileViewItem Header="1.3" />
            <telerik:RadTileViewItem Header="1.4" />
        </telerik:RadTileView>
    </telerik:RadTileViewItem>
    <telerik:RadTileViewItem Header="Two" />
    <telerik:RadTileViewItem Header="Three" />
    <telerik:RadTileViewItem Header="Four" />
</telerik:RadTileView>

If you have more questions feel free to ask.

Kind regards,
Zarko
the Telerik team

[Amitkumar]

Hi
Thank you for your reply.
 But I want to use Dynamic Nested tile view.

here is my code.

<UserControl x:Class="TestView"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
             xmlns:tileview="clr-namespace:Telerik.Windows.Controls.TileView;assembly=Telerik.Windows.Controls.Navigation"
             xmlns:telerikQuickStart="clr-namespace:Telerik.Windows.Controls.QuickStart;assembly=Telerik.Windows.Controls"
             xmlns:ReportControl="clr-namespace:ViewBase">
    <UserControl.Resources>

        <DataTemplate x:Key="CountryHeaderTemplate">
            <TextBlock Text="{Binding Name}" />
        </DataTemplate>

        <tileview:TileToFluideStateConverter x:Key="tileConverter" />

        <Style TargetType="TextBlock" x:Key="TextStyle">
            <Setter Property="FontSize" Value="12" />
            <Setter Property="FontFamily" Value="Verdana" />
        </Style>

        <Style TargetType="TextBlock" x:Key="TitleTextStyle" BasedOn="{StaticResource TextStyle}">
            <Setter Property="FontWeight" Value="Bold" />
        </Style>

        <DataTemplate x:Key="CountryTemplate">
            <telerik:RadFluidContentControl ContentChangeMode="Manual" TransitionDuration="0:0:.5"
                    State="{Binding State, Converter={StaticResource tileConverter}}">

                <telerik:RadFluidContentControl.LargeContent>


                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <ReportControl:ReportControl/>



                    </Grid>


                </telerik:RadFluidContentControl.LargeContent>


                <telerik:RadFluidContentControl.SmallContent>
                    <ReportControl:TileContent/>
                </telerik:RadFluidContentControl.SmallContent>
                <telerik:RadFluidContentControl.Content>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <ReportControl:ReportControl Grid.Column="1" Grid.Row="1"/>
                        <ReportControl:TileContent Grid.Column="2" Grid.Row="1">
                        </ReportControl:TileContent>
                    </Grid>
                </telerik:RadFluidContentControl.Content>
            </telerik:RadFluidContentControl>
        </DataTemplate>

        <Style TargetType="telerik:RadTileView">
            <Setter Property="PreservePositionWhenMaximized" Value="True" />
            <Setter Property="telerik:TileViewPanel.IsVirtualized" Value="True" />
            <Setter Property="IsAutoScrollingEnabled" Value="True" />
            <Setter Property="TileStateChangeTrigger" Value="SingleClick" />
            <Setter Property="MinimizedColumnWidth" Value="180" />
            <Setter Property="MinimizedRowHeight" Value="155" />
            <Setter Property="RowHeight" Value="400" />
            <Setter Property="ColumnWidth" Value="700" />
            <Setter Property="ColumnsCount" Value="2" />
            <Setter Property="ContentTemplate" Value="{StaticResource CountryTemplate}" />
            <Setter Property="ItemTemplate" Value="{StaticResource CountryHeaderTemplate}" />
        </Style>

    </UserControl.Resources>

    <telerik:RadTileView ItemsSource="{Binding}" TileStateChanged="tileView_TileStateChanged" MinimizedItemsPosition="Bottom"
                TileStateChangeTrigger="{Binding ElementName=StateChangeOption, Path=SelectedItem}"
                MaximizeMode="{Binding ElementName=MaximizeModeOption, Path=SelectedItem}"
                IsItemDraggingEnabled="{Binding ElementName=IsItemDraggingEnabledOption, Path=IsChecked}"
                PreservePositionWhenMaximized="{Binding ElementName=PreservePositionWhenMaximizedOption, Path=IsChecked}">
    </telerik:RadTileView>

    <telerikQuickStart:QuickStart.ConfigurationPanel>
        <StackPanel Margin="3">
            <TextBlock Text="TileStateChangeTrigger" />
            <telerik:RadComboBox x:Name="StateChangeOption" SelectedIndex="2" Margin="0 2">
                <telerik:TileStateChangeTrigger>None</telerik:TileStateChangeTrigger>
                <telerik:TileStateChangeTrigger>SingleClick</telerik:TileStateChangeTrigger>
                <telerik:TileStateChangeTrigger>DoubleClick</telerik:TileStateChangeTrigger>
            </telerik:RadComboBox>
            <TextBlock Text="MaximizeMode" Margin="0 5 0 0"/>
            <telerik:RadComboBox x:Name="MaximizeModeOption" SelectedIndex="1" Margin="0 2">
                <telerik:TileViewMaximizeMode>Zero</telerik:TileViewMaximizeMode>
                <telerik:TileViewMaximizeMode>ZeroOrOne</telerik:TileViewMaximizeMode>
                <telerik:TileViewMaximizeMode>One</telerik:TileViewMaximizeMode>
            </telerik:RadComboBox>
            <CheckBox Content="IsItemDraggingEnabled" x:Name="IsItemDraggingEnabledOption" IsChecked="True" Margin="0 2"/>
            <CheckBox Content="PreservePositionWhenMaximized" x:Name="PreservePositionWhenMaximizedOption"
                    IsChecked="True" Margin="0 2"/>
        </StackPanel>
    </telerikQuickStart:QuickStart.ConfigurationPanel>
</UserControl>

Issue is I am not able to display nested Tileview and .cs file is below.

public TestView(ViewModel vm)
       {
           InitializeComponent();
           this.Loaded += (e, a) =>
               {
                   this.DataContext = vm;
               };
       }

private void tileView_TileStateChanged(object sender, Telerik.Windows.RadRoutedEventArgs e)
       {
           e.Handled = true;
           RadTileViewItem item = e.OriginalSource as RadTileViewItem;
           if (item != null)
           {
               var fluidControls = item.ChildrenOfType<RadFluidContentControl>();
               Country country = item.DataContext as Country;
               if (country != null)
               {
                   country.State = item.TileState;
                   //country.BackColor = item.Background;

               }

               if (fluidControls.Count != 0)
               {
                   RadFluidContentControl fluidControl = fluidControls[0];

                   switch (item.TileState)
                   {
                       case TileViewItemState.Maximized:
                           fluidControl.State = FluidContentControlState.Large;
                           break;
                       case TileViewItemState.Minimized:
                           fluidControl.State = FluidContentControlState.Small;
                           break;
                       case TileViewItemState.Restored:
                           fluidControl.State = FluidContentControlState.Normal;
                           break;
                   }
               }
           }
       }

Please help.

[Zarko]

Hello Amit Prajapati,
Could you please examine the attached project and see if this is what you're looking for?
If you have more questions please feel free to ask.

Best wishes,
Zarko
the Telerik team