How to for RadTileList binding images?

2 Answers 23 Views
TileList
Rob A.
Top achievements
Rank 2
Iron
Iron
Veteran
Rob A. asked on 27 Jun 2021, 12:54 AM

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.

 

2 Answers, 1 is accepted

Sort by
0
Rob A.
Top achievements
Rank 2
Iron
Iron
Veteran
answered on 27 Jun 2021, 07:30 PM | edited on 27 Jun 2021, 07:31 PM

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.

0
Martin Ivanov
Telerik team
answered on 30 Jun 2021, 10:39 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
TileList
Asked by
Rob A.
Top achievements
Rank 2
Iron
Iron
Veteran
Answers by
Rob A.
Top achievements
Rank 2
Iron
Iron
Veteran
Martin Ivanov
Telerik team
Share this question
or