Tileview Inside TileView

4 posts, 0 answers
  1. Amitkumar
    Amitkumar avatar
    66 posts
    Member since:
    Aug 2009

    Posted 13 Sep 2011 Link to this post

    Hi
    I want to use Tileview Inside Tileview how can i use?
  2. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 14 Sep 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  3. DevCraft banner
  4. Amitkumar
    Amitkumar avatar
    66 posts
    Member since:
    Aug 2009

    Posted 14 Sep 2011 Link to this post

    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: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.


  5. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 17 Sep 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Back to Top