RadTileViewItem Minimum Height

[Rob]

Hi,


My RadTileView is working really well and looks great on a larger monitor. On small laptop screens however, the RadTileViewItems are too small.


Ideally, I would like to be able to set a minimum height for RadTileViewItems and have a vertical scrollbar appear to the right if there are more tiles than can fit on the screen. So if there are 20 photos (RadTileViewItems) but only 12 can show at once (3 rows of 4) the user can scroll down to see the other 8 photos.


Currently, the RadTileView seems to "squish/stretch" to fill the area of the screen (which is normally fine) but only if it obeys a minimum height for the RadTileViewItems.


Hopefully I have explained this well enough. I couldn't add pictures of what I am trying to do.

<telerik:RadTileView
            x:Name="tvPhotos"
            Grid.Row="1"
            IsAutoScrollingEnabled="True"
            IsSelectionEnabled="True"
            SelectionMode="Single"
            TileStateChangeTrigger="SingleClick"
            MaxColumns="5"
            PreservePositionWhenMaximized="True"
            PreviewTilePositionChanged="tvPhotos_PreviewTilePositionChanged"

            TileDragEnded="tvPhotos_TileDragEnded"
            >
            <telerik:RadTileView.ItemContainerStyle>
                <Style TargetType="telerik:RadTileViewItem">
                    <Setter Property="MinimizedHeight" Value="100" />
                </Style>
            </telerik:RadTileView.ItemContainerStyle>
            <telerik:RadTileView.ItemTemplate>
                <DataTemplate telerik:ContainerBinding.ContainerBindings="{StaticResource myBindings}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" MinWidth="50" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="{Binding Filename}" Grid.Column="0" />
                        <TextBlock Text="{Binding DisplayOrder}" Grid.Column="1" />
                    </Grid>

                </DataTemplate>
            </telerik:RadTileView.ItemTemplate>
            <telerik:RadTileView.ContentTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Image Source="{Binding UrlLarge}" Grid.Row="0" />
                        <TextBox Text="{Binding Caption, Mode=TwoWay}" Grid.Row="1" Margin="10"/>
                    </Grid>
                </DataTemplate>
            </telerik:RadTileView.ContentTemplate>
        </telerik:RadTileView>

Any support or help with this problem that I am stuck on would be greatly appreciated,

Rob Francis

P.S. I did search for similar issues but didn't find one that answered my problem. Apologies if I missed it.

[Rob]

Additionally, I should add that I can almost get the scenario I want if I change the Grid's RowDefinition height from * to a fixed height like 800. Put the RadTileView in a ScrollViewer. And then set a fixed height for the RadTileViewItem ContentTemplate to something like 200 instead of * for RowDefinition 0.

It works but can easily go off the screen to the right or sits too small on large monitors. So I feel like I'm on the wrong path here and am asking the experts to get me back on track.

[Rob]

OK. I guess I was on the right track after all.

For anyone having a similar hiccup getting the RadTileView to behave the way they want, I fixed the height stretching issue by giving my surrounding Grid a MinHeight value.

<Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" MinHeight="800" />
</Grid.RowDefinitions>

I didn't want the RadTileViewItems to minimize and maximize so I set MaximizeMode as follows: 

<telerik:RadTileView
            x:Name="tvPhotos"
            MaximizeMode="Zero"
            IsAutoScrollingEnabled="True"

A standard ScrollViewer took care of vertical scrollbar requirement.

<ScrollViewer x:Name="scrollViewerPhotos" Grid.Row="1" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible">

I then modified the templates to have a fixed width or a minimum width.

<telerik:RadTileView.ItemTemplate>
    <DataTemplate telerik:ContainerBinding.ContainerBindings="{StaticResource myBindings}">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" MinWidth="150" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <TextBlock Text="{Binding Filename}" Grid.Column="0" />
            <TextBlock Text="{Binding DisplayOrder}" Grid.Column="1" />
        </Grid>

    </DataTemplate>
</telerik:RadTileView.ItemTemplate>
<telerik:RadTileView.ContentTemplate>
    <DataTemplate>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="200" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Image Source="{Binding UrlLarge}" Grid.Row="0" />
            <TextBox Text="{Binding Caption, Mode=TwoWay}" Grid.Row="1" Margin="10"/>
        </Grid>
    </DataTemplate>
</telerik:RadTileView.ContentTemplate>

Finally, I had an issue with not being able to get to all of the photos on the right hand side. I modified my RadToolbar by adding a Slider control and using its ValueChanged event to set the MaxColumns and ColumnCount for my RadTileView control.

    <telerik:RadToolBarSeparator />
    <TextBlock Text="Columns" />
    <Slider x:Name="sliderColumns" Minimum="2" Maximum="5" Value="5" ValueChanged="sliderColumns_ValueChanged" Width="100" />
</telerik:RadToolBar>

private void sliderColumns_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
    if (sliderColumns != null)
    {
        tvPhotos.MaxColumns = Convert.ToInt32(sliderColumns.Value);
        tvPhotos.ColumnsCount = tvPhotos.MaxColumns;
    }
}

This is a very acceptable solution for me. Hopefully it helps some others too.

[Lancelot]

Hi Rob,

Thank you sharing this in the forum. I too, could not find another post with the same issue. This thread will help anyone in the future.

Thanks,
Lancelot

[Rob]

Thanks, Lancelot.

I suspect people should experiment with removing the Grid's MinHeight and changing fixed values to suit their own needs but largely this is doing the job and RadTileView has made this aspect of the project very cool for the end user.