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

Tile width do not expand to 100%

5 Answers 72 Views
TileView
This is a migrated thread and some comments may be shown as answers.
Alex
Top achievements
Rank 2
Alex asked on 16 Apr 2012, 03:45 AM
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

5 Answers, 1 is accepted

Sort by
0
Miro Miroslavov
Telerik team
answered on 18 Apr 2012, 09:53 AM
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

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
Alex
Top achievements
Rank 2
answered on 18 Apr 2012, 11:45 AM
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
0
Zarko
Telerik team
answered on 20 Apr 2012, 02:47 PM
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

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
Alex
Top achievements
Rank 2
answered on 22 Apr 2012, 02:15 AM
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
0
Zarko
Telerik team
answered on 25 Apr 2012, 01:02 PM
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

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Tags
TileView
Asked by
Alex
Top achievements
Rank 2
Answers by
Miro Miroslavov
Telerik team
Alex
Top achievements
Rank 2
Zarko
Telerik team
Share this question
or