Header Justify

6 posts, 0 answers
  1. Kirk
    Kirk avatar
    28 posts
    Member since:
    Jun 2012

    Posted 26 Sep 2011 Link to this post

    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.
  2. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 29 Sep 2011 Link to this post

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

  3. DevCraft banner
  4. L
    L avatar
    11 posts
    Member since:
    Nov 2011

    Posted 23 Dec 2011 Link to this post

    But we cant use <Grid Width="*"> , most of situations the width is flexible, we cant know a exact number.
  5. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 28 Dec 2011 Link to this post

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

  6. L
    L avatar
    11 posts
    Member since:
    Nov 2011

    Posted 02 Jan 2012 Link to this post

    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'."
  7. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 03 Jan 2012 Link to this post

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

Back to Top
DevCraft banner