Tile width do not expand to 100%

6 posts, 0 answers
  1. Alex
    Alex avatar
    27 posts
    Member since:
    Oct 2011

    Posted 15 Apr 2012 Link to this post

    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
  2. Miro Miroslavov
    Admin
    Miro Miroslavov avatar
    588 posts

    Posted 18 Apr 2012 Link to this post

    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 >>

  3. UI for WPF is Visual Studio 2017 Ready
  4. Alex
    Alex avatar
    27 posts
    Member since:
    Oct 2011

    Posted 18 Apr 2012 Link to this post

    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
  5. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 20 Apr 2012 Link to this post

    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 >>

  6. Alex
    Alex avatar
    27 posts
    Member since:
    Oct 2011

    Posted 21 Apr 2012 Link to this post

    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
  7. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 25 Apr 2012 Link to this post

    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 >>

Back to Top
UI for WPF is Visual Studio 2017 Ready