Header Justify

[Kirk]

I have created a header template for my RadTileViewItems but it is not acting as I had hoped. I am trying to get the header to stretch across the top so that I can place things on the far right. It seems to just give me as much space as needed to fit my controls and no more. Here is the code I am trying to use.

<DataTemplate x:Key="headerTemplate">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <TextBlock Text="Test Left" />
        <TextBlock Text="Test Right" Grid.Column="2"  />
    </Grid>
</DataTemplate>

When this template is used it just smashes Test Left and Test Right together on the left side of the header ignoring the * width for the middle column.

[Petar Mladenov]

Hello Kirk,

 The behaviour you have come up with is expected since the Grid from the DataTemplate is applied in other Container from the Template of the RadTileViewItem. You either have to set explicit width of the Grid:

<DataTemplate x:Key="headerTemplate">
           <Grid Width="200">
               <Grid.ColumnDefinitions>
                   <ColumnDefinition Width="Auto" />
                   <ColumnDefinition Width="*" />
                   <ColumnDefinition Width="Auto" />
               </Grid.ColumnDefinitions>
               <TextBlock Text="Test Left" />
               <TextBlock Text="Test Right" Grid.Column="2" />
           </Grid>
       </DataTemplate>

or change the default template of the RadTileViewItem. Please let us know if this helps you.Best wishes,
Petar Mladenov
the Telerik team

[L]

But we cant use <Grid Width="*"> , most of situations the width is flexible, we cant know a exact number.

[Petar Mladenov]

Hello L,

 Then you have to edit the default template of the RadTileViewItem, for example like so:

<Setter Property="Template">
               <Setter.Value>
                   <ControlTemplate TargetType="Telerik_Windows_Controls_TileView:TileViewItemHeader">
                       <Grid>
                           <VisualStateManager.VisualStateGroups>
                               <VisualStateGroup x:Name="TileStates">
                                   <VisualState x:Name="Maximized">
                                       <Storyboard>
                                           <ObjectAnimationUsingKeyFrames Duration="0"
                                                                          Storyboard.TargetName="MaximizeToggleButton"
                                                                          Storyboard.TargetProperty="IsChecked">
                                               <DiscreteObjectKeyFrame KeyTime="0">
                                                   <DiscreteObjectKeyFrame.Value>
                                                       <sys:Boolean>True</sys:Boolean>
                                                   </DiscreteObjectKeyFrame.Value>
                                               </DiscreteObjectKeyFrame>
                                           </ObjectAnimationUsingKeyFrames>
                                       </Storyboard>
                                   </VisualState>
                                   <VisualState x:Name="Restored">
                                       <Storyboard>
                                           <ObjectAnimationUsingKeyFrames Duration="0"
                                                                          Storyboard.TargetName="MaximizeToggleButton"
                                                                          Storyboard.TargetProperty="IsChecked">
                                               <DiscreteObjectKeyFrame KeyTime="0">
                                                   <DiscreteObjectKeyFrame.Value>
                                                       <sys:Boolean>False</sys:Boolean>
                                                   </DiscreteObjectKeyFrame.Value>
                                               </DiscreteObjectKeyFrame>
                                           </ObjectAnimationUsingKeyFrames>
                                       </Storyboard>
                                   </VisualState>
                               </VisualStateGroup>
                           </VisualStateManager.VisualStateGroups>
                           <StackPanel>
                               <Border Background="{TemplateBinding Background}"
                                       BorderBrush="{StaticResource TileView_HeaderBorder}"
                                       BorderThickness="{StaticResource TileView_HeaderBorder_Thickness}"
                                       CornerRadius="{StaticResource TileView_HeaderBorder_CornerRadius}"
                                       Padding="10 0 7 0">
                                   <Grid MinHeight="28">
                                       <Grid.ColumnDefinitions>
                                           <ColumnDefinition Width="*"/>
                                           <ColumnDefinition Width="Auto"/>
                                       </Grid.ColumnDefinitions>
                                       <Border x:Name="GripBarElement" Background="Transparent">
                                           <ContentPresenter x:Name="HeaderElement"
                                                             HorizontalAlignment="Stretch"
                                                             VerticalAlignment="Center"
                                                             ContentTemplate="{TemplateBinding HeaderTemplate}" />
                                       </Border>
                                       <telerik:RadToggleButton x:Name="MaximizeToggleButton"
                                                                Grid.Column="1"
                                                                Command="Telerik_Windows_Controls_TileView:TileViewCommands.ToggleTileState"
                                                                Style="{StaticResource maximizeToggleStyle}" />
                                   </Grid>
                               </Border>

You can find this realized in the attached solution. Please let us know if it satisfies you.

Kind regards,
Petar Mladenov
the Telerik team

[L]

Thanks, but it looks a little bit complex, and the system always tells me "The property 'HeaderStyle' does not exist on the type 'RadTileView' in the XML namespace 'http://schemas.telerik.com/2008/xaml/presentation'."

[Petar Mladenov]

Hello L,

 This property is public from the official Q2 2011 SP (0920) version of RadControls. Please make sure that you use Q2 2011 or Q3 version of RadControls.
We agree that this area in RadTileView needs improvement and you can vote for this related feature request, this way increasing its development priority.

Kind regards,
Petar Mladenov
the Telerik team