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

Header Justify

5 Answers 73 Views
TileView
This is a migrated thread and some comments may be shown as answers.
Kirk
Top achievements
Rank 1
Kirk asked on 26 Sep 2011, 09:41 PM
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.

5 Answers, 1 is accepted

Sort by
0
Petar Mladenov
Telerik team
answered on 29 Sep 2011, 05:03 PM
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

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

0
L
Top achievements
Rank 1
answered on 23 Dec 2011, 05:10 PM
But we cant use <Grid Width="*"> , most of situations the width is flexible, we cant know a exact number.
0
Petar Mladenov
Telerik team
answered on 28 Dec 2011, 04:29 PM
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

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

0
L
Top achievements
Rank 1
answered on 02 Jan 2012, 03:47 PM
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'."
0
Petar Mladenov
Telerik team
answered on 03 Jan 2012, 02:26 PM
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

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

Tags
TileView
Asked by
Kirk
Top achievements
Rank 1
Answers by
Petar Mladenov
Telerik team
L
Top achievements
Rank 1
Share this question
or