Another RadTileView Layout question

[Krisztian]

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="http://schemas.telerik.com/2008/xaml/presentation"
        xmlns:Telerik_Windows_Controls_TileView="clr-namespace:Telerik.Windows.Controls.TileView;assembly=Telerik.Windows.Controls.Navigation"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        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!

[Pavel R. Pavlov]

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

[Krisztian]

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!