Another RadTileView Layout question

3 posts, 0 answers
  1. Krisztian
    Krisztian avatar
    2 posts
    Member since:
    Jan 2013

    Posted 13 Mar 2013 Link to this post

    Hi!

    We are using RadTileView control and would like to achieve the attached layout.
    We removed the headers from the tiles and would like to have the window resizable (not fixed width tiles in restored form).
    The problem is that tile number 3 is either next to tile 2 or in the beginning of the last row.
    The XAML is below:

    <Window x:Class="WpfApplication2.MainWindow"
            xmlns:Telerik_Windows_Controls_TileView="clr-namespace:Telerik.Windows.Controls.TileView;assembly=Telerik.Windows.Controls.Navigation"
            xmlns:System="clr-namespace:System;assembly=mscorlib"
            Title="MainWindow"
            Width="1164"
            Height="900">
        <Window.Resources>
            <Style x:Key="RadTileViewItemStyle" TargetType="{x:Type telerik:RadTileViewItem}">
                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                <Setter Property="VerticalContentAlignment" Value="Stretch" />
                <Setter Property="SnapsToDevicePixels" Value="True" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type telerik:RadTileViewItem}">
                            <Grid>
                                <Border x:Name="outerBorder"
                                        Margin="{TemplateBinding Padding}"
                                        Background="{TemplateBinding Background}"
                                        BorderBrush="{TemplateBinding BorderBrush}"
                                        BorderThickness="{TemplateBinding BorderThickness}"
                                        CornerRadius="7">
                                    <Border x:Name="outerContainer"
                                            Background="Transparent">
                                        <Grid>
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="Auto" />
                                                <RowDefinition Height="*" />
                                            </Grid.RowDefinitions>
                                            <Grid Grid.Row="1" Background="Transparent">
                                                <Border >
                                                    <Grid MinHeight="28">
                                                        <Border x:Name="GripBarElement" Background="Transparent" >
                                                            <ContentPresenter x:Name="ContentElement"
                                                                    
                                                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                                  Content="{TemplateBinding Content}"
                                                                  ContentTemplate="{TemplateBinding ContentTemplate}" />
                                                        </Border>
                                                    </Grid>
                                                </Border>
      
                                            </Grid>
                                            <Rectangle x:Name="DisabledVisual"
                                                       Grid.RowSpan="2"
                                                       Visibility="Collapsed" />
                                        </Grid>
                                    </Border>
                                </Border>
                                <Grid x:Name="SelectedItem"
                                      Margin="-1"
                                      Visibility="Collapsed">
                                    <Border Margin="{TemplateBinding Padding}"/>
                                </Grid>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsSelected" Value="True">
                                    <Setter TargetName="SelectedItem" Property="Visibility" Value="Visible" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Window.Resources>
        <Grid Background="#212121">
              
            <Grid Margin="137 250 137 205">
                <Border BorderThickness="5" Background="#016330" BorderBrush="#016330" CornerRadius="7">
                    <telerik:RadTileView 
                        MaximizeMode="ZeroOrOne" 
                        RowHeight="Auto" 
                        ColumnWidth="Auto" 
                        IsItemsSizeInPercentages="True"
                        PreservePositionWhenMaximized="True" 
                        MinimizedColumnWidth="120"
                        MinimizedItemsPosition="Right"
                        IsItemDraggingEnabled="True"
                        TileStateChangeTrigger="SingleClick"
                        Padding="0"
                        telerik:TileViewPanel.IsColumnsShrinkEnabled="True"
                        telerik:TileViewPanel.IsRowsShrinkEnabled="True"
      
                        >
                        <telerik:RadTileViewItem 
                                         Header="Item 1"
                                         Padding="5"
                                         RestoredWidth="66"
                                         RestoredHeight="66"                        
                                         Style="{DynamicResource RadTileViewItemStyle}" Background="Green">
                        </telerik:RadTileViewItem>
      
      
                        <telerik:RadTileViewItem Header="Item 2"
                                         Background="Red"
                                         Padding="5"
                                         RestoredWidth="33"
                                         RestoredHeight="33"
                                         Style="{DynamicResource RadTileViewItemStyle}" >
                              
                        </telerik:RadTileViewItem>
      
                        <telerik:RadTileViewItem Background="Blue"
                                         Header="Item 3"
                                         Padding="5"
                                         RestoredWidth="33"
                                         RestoredHeight="33"
                                         Style="{DynamicResource RadTileViewItemStyle}" />
                          
                        <telerik:RadTileViewItem Background="Pink"
                                         Header="Item 4"
                                         Padding="5"
                                         RestoredWidth="16"
                                         RestoredHeight="33"
                                         Style="{DynamicResource RadTileViewItemStyle}" />
                            <telerik:RadTileViewItem Background="Orange"
                                         Header="Item 5"
                                         Padding="5"
                                         RestoredWidth="16"
                                         RestoredHeight="33"
                                         Style="{DynamicResource RadTileViewItemStyle}" />
                          
                                <telerik:RadTileViewItem Background="Yellow"
                                         Header="Item 6"
                                         Padding="5"
                                         RestoredWidth="16"
                                         RestoredHeight="33"
                                         Style="{DynamicResource RadTileViewItemStyle}" />
                        <telerik:RadTileViewItem Background="Lime"
                                         Header="Item 7"
                                         Padding="5"
                                         RestoredWidth="33"
                                         RestoredHeight="33"
                                         Style="{DynamicResource RadTileViewItemStyle}" />
                    </telerik:RadTileView>
                </Border>
            </Grid>
        </Grid>
    </Window>
    Thank you!
  2. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 18 Mar 2013 Link to this post

    Hi Krisztian,

    You can achieve your goal with two RadTileView controls. The first one will hold first three items - one maximized and two minimized, and the second control will hold other four items (in restored state) with set RowsCount property to 1. This approach is demonstrated in the attached project.

    In case that this approach doesn't work for you, please take a look at our new RadTileList control and this online demonstration. Keep in mind that you can set the TileType property of a Tile to Quadruple in order to show a tile in two rows. If you need further assistance on the RadTileList control please start a new support thread.

    Regards,
    Pavel R. Pavlov
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. UI for WPF is Visual Studio 2017 Ready
  4. Krisztian
    Krisztian avatar
    2 posts
    Member since:
    Jan 2013

    Posted 05 Apr 2013 Link to this post

    We managed to achieve the desired layout with RadTileView. We had to understand the way it places tiles (in every row there is the same amount of tiles, then it fills from topmost row). So by placing almost invisible tiles the layout can be modified to our needs. But sizing these invisible tiles was important. I copy the result:
    <telerik:RadTileView  x:Name="MyTileView"
        MaximizeMode="ZeroOrOne"
        ColumnsCount="6"
        IsDockingEnabled="True"
        RowHeight="Auto"
        ColumnWidth="Auto"
        IsItemsSizeInPercentages="True"
        PreservePositionWhenMaximized="True"
        MinimizedColumnWidth="130"
                            
        TilesStateChanged="RadTileView_TilesStateChanged"
        MinimizedItemsPosition="Right"
        IsItemDraggingEnabled="false"
        TileStateChangeTrigger="SingleClick"
        Padding="0"
        telerik:TileViewPanel.IsColumnsShrinkEnabled="True"
        telerik:TileViewPanel.IsRowsShrinkEnabled="True"
        TileStateChanged="RadTileView_TileStateChanged"  >
     
        <telerik:RadTileViewItem Header="Rögzítés"                                        
                        MinimizedHeight="120"
                        RestoredWidth="66"
                        RestoredHeight="66"
                        Style="{DynamicResource RadTileViewItemStyle}">
            <telerik:RadFluidContentControl State="Normal" ContentChangeMode="Manual" >                          
            </telerik:RadFluidContentControl>
        </telerik:RadTileViewItem>                   
     
        <telerik:RadTileViewItem Header="Címtár"
                        MinimizedHeight="120"
                        RestoredWidth="34"
                        RestoredHeight="33"
                        Style="{DynamicResource RadTileViewItemStyle}">
            <telerik:RadFluidContentControl State="Normal" ContentChangeMode="Manual">
                 
            </telerik:RadFluidContentControl>                       
        </telerik:RadTileViewItem>
     
        <telerik:RadTileViewItem Header="Hidden item" RestoredHeight="33" RestoredWidth="0.001" MinimizedHeight="0" MinimizedWidth="0" Style="{DynamicResource RadTileViewItemStyleHidden}"/>
        <telerik:RadTileViewItem Header="Hidden item" RestoredHeight="33" RestoredWidth="0.001" MinimizedHeight="0" MinimizedWidth="0" Style="{DynamicResource RadTileViewItemStyleHidden}"/>
        <telerik:RadTileViewItem Header="Hidden item" RestoredHeight="33" RestoredWidth="0.001" MinimizedHeight="0" MinimizedWidth="0" Style="{DynamicResource RadTileViewItemStyleHidden}"/>
        <telerik:RadTileViewItem Header="Hidden item" RestoredHeight="33" RestoredWidth="0.001" MinimizedHeight="0" MinimizedWidth="0" Style="{DynamicResource RadTileViewItemStyleHidden}"/>
     
        <telerik:RadTileViewItem Header="Hidden item" RestoredHeight="0.001" RestoredWidth="66" MinimizedHeight="0" MinimizedWidth="0" Style="{DynamicResource RadTileViewItemStyleHidden}"/>
     
        <telerik:RadTileViewItem Header="Keresés" 
                                 MinimizedHeight="120"
                             RestoredWidth="34"
                             RestoredHeight="33"
                         Style="{DynamicResource RadTileViewItemStyle}" >
            <telerik:RadFluidContentControl State="Normal" ContentChangeMode="Manual">                           
            </telerik:RadFluidContentControl>                       
        </telerik:RadTileViewItem>
     
        <telerik:RadTileViewItem Header="Hidden item" RestoredHeight="33" RestoredWidth="0.001" MinimizedHeight="0" MinimizedWidth="0" Style="{DynamicResource RadTileViewItemStyleHidden}"/>
        <telerik:RadTileViewItem Header="Hidden item" RestoredHeight="33" RestoredWidth="0.001" MinimizedHeight="0" MinimizedWidth="0" Style="{DynamicResource RadTileViewItemStyleHidden}"/>
        <telerik:RadTileViewItem Header="Hidden item" RestoredHeight="33" RestoredWidth="0.001" MinimizedHeight="0" MinimizedWidth="0" Style="{DynamicResource RadTileViewItemStyleHidden}"/>
        <telerik:RadTileViewItem Header="Hidden item" RestoredHeight="33" RestoredWidth="0.001" MinimizedHeight="0" MinimizedWidth="0" Style="{DynamicResource RadTileViewItemStyleHidden}"/>
     
        <telerik:RadTileViewItem Header="statik1" Background="White"
                        RestoredWidth="17"
                        RestoredHeight="33"
                        Style="{DynamicResource RadTileViewItemStyleStatic}" MinimizedHeight="0" MinimizedWidth="0">
            <Image Source="Images/statik1.png" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="15"/>
        </telerik:RadTileViewItem>
     
        <telerik:RadTileViewItem Header="Kapcsolat"
                                 MinimizedHeight="120"
                        RestoredWidth="16.5"
                        RestoredHeight="33"
                        Style="{DynamicResource RadTileViewItemStyle}" >
            <telerik:RadFluidContentControl State="Normal" ContentChangeMode="Manual">                           
            </telerik:RadFluidContentControl>                      
        </telerik:RadTileViewItem>
     
        <telerik:RadTileViewItem Header="Profil"
                                 MinimizedHeight="120"
                        RestoredWidth="16.5"
                        RestoredHeight="33"
                        Style="{DynamicResource RadTileViewItemStyle}">
            <telerik:RadFluidContentControl State="Normal" ContentChangeMode="Manual">                           
            </telerik:RadFluidContentControl>                       
        </telerik:RadTileViewItem>
     
        <telerik:RadTileViewItem Header="Email"
                                 MinimizedHeight="120"
                        RestoredWidth="16.5"
                        RestoredHeight="33"
                        Style="{DynamicResource RadTileViewItemStyle}" x:Name="Email">
            <telerik:RadFluidContentControl ContentChangeMode="Manual" State="Normal">                           
            </telerik:RadFluidContentControl>                       
        </telerik:RadTileViewItem>
     
        <telerik:RadTileViewItem Header="Súgó"
                                 MinimizedHeight="120"
                        RestoredWidth="16.5"
                        RestoredHeight="33"
                        Style="{DynamicResource RadTileViewItemStyle}">
            <telerik:RadFluidContentControl State="Normal" ContentChangeMode="Manual">                           
            </telerik:RadFluidContentControl>                       
        </telerik:RadTileViewItem>
     
        <telerik:RadTileViewItem Header="statik2" Background="White"
                        RestoredWidth="17"
                        RestoredHeight="33"
                        Style="{DynamicResource RadTileViewItemStyleStatic}" MinimizedHeight="0" MinimizedWidth="0">
            <Image Source="Images/statik2.png" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="25"/>
        </telerik:RadTileViewItem>
     
    </telerik:RadTileView>

    I had to modify the styles also, there are some static tiles when you click them nothing happens. The invisible tiles should not appear even as placeholder in the tile list in minimized mode, etc...
    Finally we could achieve what we needed. Thank you!
Back to Top