Tile width do not expand to 100%

[Alex]

Hi,

I wonder why this code fails to produce tiles that occupy the full width of the TileView:

<telerik:RadTileView DockPanel.Dock="Top" ItemsSource="{Binding Phases}" ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                        SelectionMode="Single" ColumnWidth="*" ColumnsCount="1" IsAutoScrollingEnabled="True"
                        IsSynchronizedWithCurrentItem="True" IsSelectionEnabled="True"
                        MaximizeMode="Zero" RowHeight="Auto"
                        telerik:TileViewPanel.IsRowsShrinkEnabled="True"
                        telerik:StyleManager.Theme="Expression_Dark">
    <telerik:RadTileView.ContentTemplate>
        <DataTemplate>
            <Grid Margin="6">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <ContentControl Grid.Column="0" HorizontalAlignment="Stretch" Content="{Binding}" >
                    <ContentControl.Style>
                        <Style TargetType="{x:Type ContentControl}">
                            <Setter Property="ContentTemplate" Value="{StaticResource PhaseTemplate}" />
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding IsChecked, ElementName=EditButton}" Value="True">
                                    <Setter Property="ContentTemplate" Value="{StaticResource PhaseEditTemplate}" />
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </ContentControl.Style>
                </ContentControl>
                <ToggleButton x:Name="EditButton" Margin="6,0,6,0" Grid.Column="1"
                        Style="{StaticResource EditToggleButton}"
                        HorizontalAlignment="Right" VerticalAlignment="Top" />
            </Grid>
        </DataTemplate>
    </telerik:RadTileView.ContentTemplate>
</telerik:RadTileView>

I can see, using Snoop, that the TileView takes the full width where it's shown, but when I create TileViewItems in it, they occupy a fraction of the TileView. When I create a second TileViewItem, it's displayed in the second row, though, even if there's enough space left in the first row. It's like the column width is not what I expect, but the column count is respected.

Any help will be greatly appreciated.

Regards,

Alex

[Miro Miroslavov]

Hi Alexis,

 The *(Star) value of the ColumnWidth means that the width will be evenly split between all the items on that Row. So if you set it to * and have 3 columns - they all will get equal width (equals to the available width devided by 3). Also the ColumnCount = 1 means that you'll always have 1 column no matter the other properties. 
You can read the help reference for further information. 

All the best,
Miro Miroslavov
the Telerik team

[Alex]

Hi,

That is how I understand it, so if I have only 1 column, it means that it should occupy 100% of the available width, shouldn't it? In my code above, the result is that it takes approximately 25%, even if there is only one column.

Thanks,

Alex

[Zarko]

Hi Alexis,
Yes, if you have 1 column and the ColumnWidth is *(Start) then the items in it will occupy 100% of the available width, and that's what we get when we run your code. If you want your items to occupy the available height as well you should set the RowHeight to also be *(Start) (it's Auto in your code).
I've attached a sample project and the only difference with your code is that the RowHeight is "*", so could you please examine it and tell us if this is what you're looking for ?

Kind regards,
Zarko
the Telerik team

[Alex]

Hi Zarko,

Your explanations are all right, but my problem was that the actual width of the Tiles wasn't 100%, although the settings were good.

I've found out that my problem was that RadPanelBar that contains the RadTileView allowed for a horizontal scrollbar, thus making the maxwidth infinite. The * doesn't work in that kind of scenario since it don't knows what is the real maximum width.

Thank you,

Alexis

[Zarko]

Hi Alexis,
We're happy that you were able to fix your problem and if you have further questions please feel free to ask.

Regards,
Zarko
the Telerik team