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

Tile position

10 Answers 363 Views
TileList
This is a migrated thread and some comments may be shown as answers.
Ed
Top achievements
Rank 1
Ed asked on 28 Feb 2013, 05:51 PM
How do I control the tile position (row,column)?

Max number of rows, columns?

Thanks,

Ed

10 Answers, 1 is accepted

Sort by
0
Pavel Pavlov
Telerik team
answered on 05 Mar 2013, 02:55 PM
Hello,

The DisplayIndex property of a Tile is to be used to control its position among all tiles.

Regards,
Pavel Pavlov
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
mike okon
Top achievements
Rank 1
answered on 01 May 2013, 10:23 AM
Hi

Can I expand this further and ask how can I center the tiles on the screen. If  I only have 4-6 tiles how can I have them arrange in the centre and not always from the left. Would this go against metro convention?

mike
0
David
Top achievements
Rank 1
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:x="http://schemas.microsoft.com/winfx/2006/xaml"
             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" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <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>
0
Yoan
Telerik team
answered on 15 Aug 2013, 04:06 PM
Hello David,

I am afraid that using a Grid in RadTileList could lead to some undesirable behavior.

The recommended approach would be to set a fixed height of RadTileList. Then you can use Tile's DisplayIndex property to set its position.

I hope this helps.


Regards,
Yoan
Telerik
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
0
Przemysław
Top achievements
Rank 1
answered on 18 Jun 2014, 05:28 AM
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?
0
Yoan
Telerik team
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.
 
0
Maya
Telerik team
answered on 27 Oct 2014, 03:35 PM
Hi Przemyslaw,

I am writing just to let you know that with the release of Q3 2014 we introduced some changes for RadTileList mainly on the way groups are created and arranged. We added the functionality of modifying the vertical position of the tiles, the visibility of group header, their height, etc. 
Check out this article for more information. 

I do hope this change will make the experience of working with RadTileList better.

Regards,
Maya
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Przemysław
Top achievements
Rank 1
answered on 26 Nov 2014, 09:46 AM
Hi,
I have problem with last update Q3 2014. I have replaced all the libraries in the project, and now I have a problem with opening application, before everything was ok. I have error : ,,value can't be null " when I'm starting application, and this is everything what I have. In error detail I don't have information in which class is error and what is wrong.I would like to know if your update (Q3 2014) is compatible with previous version.

0
Przemysław
Top achievements
Rank 1
answered on 26 Nov 2014, 09:49 AM
Missing attachment:
0
Maya
Telerik team
answered on 26 Nov 2014, 09:54 AM
Hello Ed,

Would you run through this article to verify that the upgrade path is followed on your side ? 

Regards,
Maya
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
TileList
Asked by
Ed
Top achievements
Rank 1
Answers by
Pavel Pavlov
Telerik team
mike okon
Top achievements
Rank 1
David
Top achievements
Rank 1
Yoan
Telerik team
Przemysław
Top achievements
Rank 1
Maya
Telerik team
Share this question
or