This is a migrated thread and some comments may be shown as answers.

Tileview Inside TileView

3 Answers 103 Views
TileView
This is a migrated thread and some comments may be shown as answers.
Amitkumar
Top achievements
Rank 1
Amitkumar asked on 13 Sep 2011, 02:38 PM
Hi
I want to use Tileview Inside Tileview how can i use?

3 Answers, 1 is accepted

Sort by
0
Zarko
Telerik team
answered on 14 Sep 2011, 12:22 PM
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 >>

0
Amitkumar
Top achievements
Rank 1
answered on 14 Sep 2011, 12:47 PM
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.


0
Zarko
Telerik team
answered on 17 Sep 2011, 03:48 PM
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 >>

Tags
TileView
Asked by
Amitkumar
Top achievements
Rank 1
Answers by
Zarko
Telerik team
Amitkumar
Top achievements
Rank 1
Share this question
or