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

Tile position

10 Answers 424 Views

TileList

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

10 Answers, 1 is accepted

answered on 15 Aug 2013, 12:11 PM

I am trying to put all of the tiles on one row. This is the code that I have produced:

This results in really strange behavior of 2 1/4 tiles being displayed. If I click on the RadTileList, the outline shows that it is extended the length of the grid, the grid is also displayed the length, I am not sure why the rest of the items are not displayed.

<UserControl x:Class="OfficeDashboard.Controls.Navigation"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

mc:Ignorable="d" d:DesignHeight="200" d:DesignWidth="1024">

<UserControl.Resources>

<Style TargetType="TextBlock" x:Key="TileLabelStyle">

<Setter Property="FontSize" Value="14" />

<Setter Property="FontFamily" Value="Segoe UI" />

<Setter Property="Margin" Value="10" />

<Setter Property="Foreground" Value="White" />

<Setter Property="VerticalAlignment" Value="Bottom"/>

</Style>

</UserControl.Resources>

<Grid>

<Grid.RowDefinitions>

<RowDefinition />

</Grid.RowDefinitions>

<telerik:RadTileList x:Name="RadTileList" TileReorderMode="None" TilePlaceHolderSide="130"

HorizontalContentAlignment="Stretch" ScrollViewer.HorizontalScrollBarVisibility="Auto"

ScrollViewer.VerticalScrollBarVisibility="Auto" VerticalContentAlignment="Stretch">

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto" />

</Grid.ColumnDefinitions>

<telerik:Tile Grid.Column="0" Background="#FFD68A3A" TileType="Single" MouseDown="Tile_MouseDown" Tag="Customers">

<Grid>

<Image IsHitTestVisible="True" Source="/OfficeDashboard;component/images/Customers.png"/>

<TextBlock Text="Customers" Style="{StaticResource TileLabelStyle}"/>

</Grid>

</telerik:Tile>

<telerik:Tile Grid.Column="1" Background="#FF009600" TileType="Single" MouseDown="Tile_MouseDown" Tag="Orders">

<Grid>

<Image Source="/OfficeDashboard;component/images/Orders.png" />

<TextBlock Text="Orders" Style="{StaticResource TileLabelStyle}"/>

</Grid>

</telerik:Tile>

<telerik:Tile Grid.Column="2" Background="#FF008BD3" TileType="Single" MouseDown="Tile_MouseDown" Tag="Shipping">

<Grid>

<Image IsHitTestVisible="True" Source="/OfficeDashboard;component/images/Shipping.png"/>

<TextBlock Text="Shipping" Style="{StaticResource TileLabelStyle}"/>

</Grid>

</telerik:Tile>

<telerik:Tile Grid.Column="3" Background="#FFE4C100" TileType="Single" MouseDown="Tile_MouseDown" Tag="Tasks">

<Grid>

<Image Source="/OfficeDashboard;component/images/Tasks.png" />

<TextBlock Text="Tasks" Style="{StaticResource TileLabelStyle}"/>

</Grid>

</telerik:Tile>

<telerik:Tile Grid.Column="4" Background="#FF4477A4" TileType="Single" MouseDown="Tile_MouseDown" Tag="Reports">

<Grid>

<Image Source="/OfficeDashboard;component/images/Reports.png" />

<TextBlock Text="Reports" Style="{StaticResource TileLabelStyle}"/>

</Grid>

</telerik:Tile>

<telerik:Tile Grid.Column="5" Background="#FF00A8EC" TileType="Single" MouseDown="Tile_MouseDown" Tag="Charts">

<Grid>

<Image Source="/OfficeDashboard;component/images/Chart.png" />

<TextBlock Text="Charts" Style="{StaticResource TileLabelStyle}"/>

</Grid>

</telerik:Tile>

<telerik:Tile Grid.Column="6" Background="#FF009F3C" TileType="Single" MouseDown="Tile_MouseDown" Tag="Search">

<Grid>

<Image Source="/OfficeDashboard;component/images/Search.png" />

<TextBlock Text="Search" Style="{StaticResource TileLabelStyle}"/>

</Grid>

</telerik:Tile>

<telerik:Tile Grid.Column="7" Background="#FF6E6E6E" TileType="Single" MouseDown="Tile_MouseDown" Tag="Options">

<Grid>

<Image Source="/OfficeDashboard;component/images/Options.png" />

<TextBlock Text="Options" Style="{StaticResource TileLabelStyle}"/>

</Grid>

</telerik:Tile>

<telerik:Tile Grid.Column="8" Background="#FFDF0024" TileType="Single" MouseDown="Tile_MouseDown" Tag="Close">

<Grid>

<Image Source="/OfficeDashboard;component/images/Close.png" />

<TextBlock Text="Close" Style="{StaticResource TileLabelStyle}"/>

</Grid>

</telerik:Tile>

</Grid>

</telerik:RadTileList>

</Grid>

</UserControl>

answered on 18 Jun 2014, 05:28 AM

radtilelist.png

Hi,
I have problem with RadTileList. I would like to change Tile position. I tried to change style and I set all VerticalAlignment to Top but still Tile are center display. Do you have any idea?

answered on 19 Jun 2014, 03:35 PM

Hello Przemysław,

I am afraid that this can not be achieved with the current version of RadTileList. We are aware of this limitation and we are working on some improvements of the RadTileList control. Please note that this is a complicated matter and we cannot commit to a certain time frame for the availability of these improvements.

We apologize for the inconvenience caused.

Regards,
Yoan
Telerik

Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.