Layout creation in tile view

[PIyush]

Hi,

I am creating layout using  tile view, which would be having two rows, first row would contain 5 tiles of equal width and second row would be containing only one tile occupying 100% width of tile view, i want this tile to be non draggable(Position would be fixed).
Could you please help me in creating this layout?

Thanks and Regards
Sanjay Singh

[PIyush]

Hi ,

I tried with following xaml, set the IsItemsSizeInPercentages="True" and specified the restored width of each tile to 20% as there are five tiles in first row and in second row there is only one tile with restored width 100%. "actual layout.png" is generated with following xaml. But i want it to be like "expected layout.png" which is attached with this post.
 

<UserControl x:Class="Tilelook.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:local ="clr-namespace:Tilelook"
    xmlns:tileview="clr-namespace:Telerik.Windows.Controls.TileView;assembly=Telerik.Windows.Controls.Navigation"
    d:DesignHeight="300" d:DesignWidth="400">
    <UserControl.Resources>
        <Style x:Key="TileViewItemHeaderStyle1" TargetType="tileview:TileViewItemHeader">
            <Setter Property="Foreground" Value="Black" />
            <Setter Property="FontSize" Value="14" />
            <Setter Property="FontFamily" Value="Segoe UI" />
            <Setter Property="Background" Value="#ffd520" />
        </Style>
        <Style TargetType="telerik:RadTileViewItem">
            <Setter Property="Padding" Value="3" />
            <Setter Property="BorderBrush" Value="Blue" />
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="HeaderStyle" Value="{StaticResource TileViewItemHeaderStyle1}" />
        </Style>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot"  Background="White">
        <telerik:RadTileView x:Name="ParentTileView"   IsItemsSizeInPercentages="True" PreservePositionWhenMaximized="True" MinimizedRowHeight="Auto"  ColumnWidth="Auto" RowHeight="Auto"   telerik:TileViewPanel.IsSizeBoundToPosition="True"  telerik:TileViewPanel.IsRowsShrinkEnabled="True"    telerik:TileViewPanel.IsColumnsShrinkEnabled="True"   MinimizedColumnWidth="150">
            <telerik:RadTileViewItem  Header="GaugeKPI" RestoredHeight="50" RestoredWidth="20">
                    <local:GaugeControl />
            </telerik:RadTileViewItem>
            <telerik:RadTileViewItem   Header="TrendKPI" RestoredHeight="50" RestoredWidth="20"  >
                <local:GaugeControl />
            </telerik:RadTileViewItem>
            <telerik:RadTileViewItem  Header="GaugeKPI" RestoredHeight="50" RestoredWidth="20" >
                <local:GaugeControl />
            </telerik:RadTileViewItem>
            <telerik:RadTileViewItem   Header="TrendKPI" RestoredHeight="50" RestoredWidth="20"  >
                <local:GaugeControl />
            </telerik:RadTileViewItem>
            <telerik:RadTileViewItem  Header="TrendKPI" RestoredHeight="50" RestoredWidth="20" >
                <local:GaugeControl />
            </telerik:RadTileViewItem>
            <telerik:RadTileViewItem  Header="Grid" RestoredHeight="50" RestoredWidth="100" >
                <local:GaugeControl />
            </telerik:RadTileViewItem>
        </telerik:RadTileView>
    </Grid>
</UserControl>

I need this layout on urgent basis. Any help would be highly appreciated.


Thanks and Regards
Sanjay Singh

[Zarko]

Hello Trilok,
Could you please try to set the ColumnsCount property of the RadTileView to 5? This should fix the layout issue, as for the not pinned item - you should handle the PreviewTilePositionChanged and PreviewTileDragStarted events with something like this:

private void ParentTileView_PreviewTilePositionChanged(object sender, Telerik.Windows.RadRoutedEventArgs e)
{
    if (e.OriginalSource.Equals(this.pinnedItem))
        e.Handled = true;
}

private void ParentTileView_PreviewTileDragStarted(object sender, TileViewDragEventArgs e)
{
    if (e.DraggedItem.Equals(this.pinnedItem))
        e.Handled = true;
}

If you have more questions please feel free to ask.

All the best,
Zarko
the Telerik team

[FENWICK]

Hi,

I have the same problem but i need three rows. So the proposed solution isn't good for me.

<tlk:RadTileView x:Name="_tile" DragMode="Swap" tlk:TileViewPanel.IsSizeBoundToPosition="True" RowHeight="Auto"  ColumnWidth="Auto" ColumnsCount="5"
                  PreservePositionWhenMaximized="true"
                  tlk:TileViewPanel.IsColumnsShrinkEnabled="True" tlk:TileViewPanel.IsRowsShrinkEnabled="True"
                  IsItemsSizeInPercentages="True"
                  >
   <!--1 row -->
   <tlk:RadTileViewItem RestoredHeight="20" RestoredWidth="20" />
   <tlk:RadTileViewItem RestoredHeight="20" RestoredWidth="20"/>
   <tlk:RadTileViewItem RestoredHeight="20" RestoredWidth="20"/>
   <tlk:RadTileViewItem RestoredHeight="20" RestoredWidth="20"/>
   <tlk:RadTileViewItem RestoredHeight="20" RestoredWidth="20"/>
   <!-- 2 row -->
   <tlk:RadTileViewItem RestoredHeight="50" RestoredWidth="50"/>
   <tlk:RadTileViewItem RestoredHeight="50" RestoredWidth="50"/>
 <!-- 3 row -->
   <tlk:RadTileViewItem RestoredHeight="30" RestoredWidth="100"/>
 </tlk:RadTileView>

Why the max column when you don't specify columnscount is 3 ?
What is the solution for my issue ?


Thanks,

[Zarko]

Hello,
The problem is that the RadTileView was not designed to allow different number of items on each row. This means that you'll have to place 3 "invisible" (they are too small to be seen) items after the 2 larger items on your second row, so that there are 5 items in it as in the first row.
Could you please try this XAML:

<telerik:RadTileView x:Name="_tile"
               ColumnsCount="5"
               ColumnWidth="Auto"
               DragMode="Swap"
               IsItemsSizeInPercentages="True"
               PreservePositionWhenMaximized="true"
               RowHeight="Auto"
               MinimizedColumnWidth="200"
               telerik:TileViewPanel.IsColumnsShrinkEnabled="True"
               telerik:TileViewPanel.IsRowsShrinkEnabled="True"
               telerik:TileViewPanel.IsSizeBoundToPosition="True">
    <!--  1 row  -->
    <telerik:RadTileViewItem RestoredHeight="20" RestoredWidth="20" />
    <telerik:RadTileViewItem RestoredHeight="20" RestoredWidth="20" />
    <telerik:RadTileViewItem RestoredHeight="20" RestoredWidth="20" />
    <telerik:RadTileViewItem RestoredHeight="20" RestoredWidth="20" />
    <telerik:RadTileViewItem RestoredHeight="20" RestoredWidth="20" />
    <!--  2 row  -->
    <telerik:RadTileViewItem RestoredHeight="50" RestoredWidth="49.8" />
    <telerik:RadTileViewItem RestoredHeight="50" RestoredWidth="49.8" />
    <telerik:RadTileViewItem Header="Hidden item" RestoredHeight="50" RestoredWidth="0.1" MinimizedHeight="1" />
    <telerik:RadTileViewItem Header="Hidden item" RestoredHeight="50" RestoredWidth="0.1" MinimizedHeight="1" />
    <telerik:RadTileViewItem Header="Hidden item" RestoredHeight="50" RestoredWidth="0.1" MinimizedHeight="1" />
    <!--  3 row  -->
    <telerik:RadTileViewItem RestoredHeight="30" RestoredWidth="100" />
</telerik:RadTileView>

If you have further questions please feel free to ask.

Regards,
Zarko
the Telerik team

[FENWICK]

Thanks for your reply.

Your hack works. I put 0.001 to "RestoredWidth " for hidden tiles because 0.1 is visible to the eye.

Thanks