How to for RadTileList binding images?

[Rob A.]

I have List(of objects) and the definition of the Object is Name (string) FileName (string) that I set to the ItemSource of a RadTileList.  Here is the control definition in XML:

        <telerik:RadTileList x:Name="tlColorPresets" Grid.Row="1" Grid.Column="1" Width="600">
            <telerik:RadTileList.ItemTemplate>
                <DataTemplate>
                    <Grid Background="#FF006AC1">
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>
                        <TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding Name}"/>
                        <Image Grid.Row="1" Grid.Column="0" Source="{Binding ImageFileName}" />
                    </Grid>
                </DataTemplate>
            </telerik:RadTileList.ItemTemplate>
        </telerik:RadTileList>

Trying to figure out how to get my images displayed in the RadTileList?  Any hints/suggestions.

Cheers, Rob.

 

[Rob A.]

I was able to solve this using the AutoGeneratingTile event and assigning ImageBrush to e.Tile.Background per object in my List.

    Private Sub tlColorPresets_AutoGeneratingTile(sender As Object, e As AutoGeneratingTileEventArgs) Handles tlColorPresets.AutoGeneratingTile

        Try

            Dim colorPreset As ColorPreset = TryCast(e.Tile.Content, ColorPreset)
            Dim ColorPresetsDir As String = Environment.GetFolderPath(Environment.SpecialFolder.Personal) & "\" & Configuration.SeasonsPath & "\" & Configuration.ColorPresetsImageFolder

            Dim aBrush As New ImageBrush()
            aBrush.ImageSource = New BitmapImage(New Uri(ColorPresetsDir & "\" & colorPreset.ImageFileName, UriKind.Absolute))

            e.Tile.Content = New TextBlock With {.Text = colorPreset.Name}
            e.Tile.Background = aBrush
            e.Tile.TileType = TileType.Single

        Catch ex As Exception

            Log.Write(ex)

        End Try

    End Sub

HOWEVER, I can't seem to get rid of a huge "gap" between the bottom and top of TileList ... tried everything, Top, Center, Margin = 0, Padding = 0, ScrollViewer Horizontal and Vertical ... statice Width/Height, maxWidth/Height ... no matter what I do, I can't remove the top/bottom gaps (see attached image)??

Any suggestions?

Cheers, Rob.

[Martin Ivanov]

Hello Robin,

The gap is caused by the space reserved for the tiles group header and also by the default alignment of the tiles. You can remove the top gap by setting the VerticalTilesAlignment property of RadTileList to Stretch and the GroupHeaderHeight to 0. For example:

 <telerik:RadTileList VerticalTilesAlignment="Stretch" GroupHeaderHeight="0">

At this point the tiles will be stretched along the entire height of the control. However, the bottom gap probably won't be removed because the height of the control is bigger than summary height of the tiles that can be arranged vertically. To remove also the bottom gap you will need to ensure that the height the control matches the summary height of the tiles.

As for the approach with the ItemTemplate and the Image control, this should also work. However, the image source's path may need to be different than the one usually set in XAML.

Regards,
Martin Ivanov
Progress Telerik