Change HeaderTemplate based on State

2 posts, 0 answers
  1. Tyler
    Tyler avatar
    16 posts
    Member since:
    Jun 2016

    Posted 07 Dec 2016 Link to this post

    Hello!

    I am trying to find a way to be able to change the HeaderTemplate based on the tile state.  Example, when switch from normal content to large content in the RadFluidContainer, I want the header to look different (several controls are added and removed).

    Right now I have the following:

    <Style x:Key="RadTileViewItemStyle" TargetType="{x:Type telerik:RadTileViewItem}">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="telerik:TileViewPanel.IsRowsShrinkEnabled" Value="True" />
            <Setter Property="telerik:TileViewPanel.IsColumnsShrinkEnabled" Value="True" />
            <Setter Property="VerticalContentAlignment" Value="Stretch" />
            <Setter Property="Background" Value="{StaticResource PingLiteGrayBackground}" />
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="BorderBrush" Value="{x:Null}" />
            <Setter Property="Padding" Value="10" />
            <Setter Property="Foreground" Value="Black" />
            <Setter Property="TileState" Value="Restored" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type telerik:RadTileViewItem}">
                        <Grid SnapsToDevicePixels="True">
                            <Border Style="{DynamicResource PingDarkBrushBorder2Shaddow2}"
                                    Margin="{TemplateBinding Padding}">
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto" />
                                        <RowDefinition Height="*" />
                                    </Grid.RowDefinitions>
                                    <ContentPresenter x:Name="ContentElement"
                                                      ContentTemplate="{DynamicResource MyTileViewContentFluid}"
                                                      Content="{TemplateBinding Content}"
                                                      Grid.Row="1" />
                                    <Border Grid.Row="0" BorderThickness="0,0,0,1.5"
                                            BorderBrush="{StaticResource PingBlueBrush}"
                                            Background="{TemplateBinding Background}"
                                            Padding="10,0,7,0">
                                        <Grid MinHeight="28">
                                            <Border x:Name="GripBarElement" Background="Transparent">
                                                <ContentPresenter x:Name="HeaderElement"
                                                                  ContentTemplate="{DynamicResource MyHeaderTemplate}"
                                                                  Content="{TemplateBinding Content}"
                                                                  HorizontalAlignment="Stretch"
                                                                  Margin="0,0,10,0"
                                                                  VerticalAlignment="Center" />
                                            </Border>
                                        </Grid>
                                    </Border>
                                    <Rectangle x:Name="DisabledVisual" Fill="{StaticResource PingBlueBrush}"
                                               RadiusY="4" RadiusX="4"
                                               Grid.Row="0" Grid.RowSpan="2" Visibility="Collapsed" />
                                </Grid>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="UseLayoutRounding" Value="True" />
        </Style>
     
        <DataTemplate x:Key="MyHeaderTemplate">
            <Border BorderBrush="{x:Null}">
                <Grid HorizontalAlignment="Stretch">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <StackPanel Orientation="Horizontal">
                        <Image Width="50"
                               Height="40"
                               VerticalAlignment="Center"
                               HorizontalAlignment="Center"
                               Margin="2"
                               Source="{Binding PhotoPathUri}" />
                        <TextBlock Text="{Binding EmployeeName}"
                                   Style="{StaticResource MyTeamMemberTileHeaderStyle}" />
                    </StackPanel>
                    <CheckBox x:Name="CompareCheckbox"
                                  Grid.Column="1" HorizontalAlignment="Right"
                                  VerticalAlignment="Center"
                                  Margin="2,0,2,2"
                                  ToolTip="Add to Compare List"                            
                                  Command="{Binding RelativeSource={
                                                    RelativeSource FindAncestor,
                                                    AncestorType={x:Type dialog:UserControlBase}},
                                                    Path=DataContext.AddSelectedTeamMemberToCompareListCommand}"
                                  CommandParameter="{Binding EmployeeName}" IsThreeState="False">
                         
                        <CheckBox.IsChecked>
                            <MultiBinding Converter="{StaticResource CompareBoolConverter}" Mode="OneWay">
                                <Binding Path="EmployeeName" FallbackValue=""/>
                                <Binding Path="DataContext.MyTeamCompareList"
                                         RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type dialog:UserControlBase}}"
                                         FallbackValue=""/>
                            </MultiBinding>
                        </CheckBox.IsChecked>
     
                        <CheckBox.LayoutTransform>
                            <ScaleTransform ScaleX="1.5" ScaleY="1.5" />
                        </CheckBox.LayoutTransform>
                    </CheckBox>
                </Grid>
            </Border>
        </DataTemplate>
     
        <DataTemplate x:Key="MyTileViewContentFluid">
            <telerik:RadFluidContentControl ContentChangeMode="Manual"
                                            TransitionDuration="0:0:0.01"
                                            State="{Binding TileState, Converter={StaticResource FluidContentStateConverter}, RelativeSource={RelativeSource AncestorType={x:Type telerik:RadTileViewItem}}}">
     
                <!-- Region Small Content -->
                <telerik:RadFluidContentControl.SmallContent>
                    <Grid Background="{StaticResource PingBackgroundLiteBrush}">
                        <TextBlock Style="{StaticResource SmallCardBriefInfoContentStyle}"
                                       Text="{Binding Position}" />
                    </Grid>
                </telerik:RadFluidContentControl.SmallContent>
                <!-- EndRegion Small Content -->
                 
                <!-- Region Normal Content -->
                <telerik:RadFluidContentControl.Content>
                    <Grid Background="{StaticResource PingBackgroundLiteBrush}">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
     
                        <TextBlock Text="{Binding Position}"
                                   Grid.Row="0"
                                   Style="{StaticResource NormalCardBriefInfoContentStyle}"/>
     
                        <ItemsControl Grid.Row="1" ItemsSource="{Binding BusinessRoleList}">
                            <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <WrapPanel Orientation="Vertical" ScrollViewer.VerticalScrollBarVisibility="Visible" />
                                </ItemsPanelTemplate>
                            </ItemsControl.ItemsPanel>
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <TextBlock Margin="30,4,4,2" Text="{Binding RoleName}" FontSize="16" />
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>
                    </Grid>
                </telerik:RadFluidContentControl.Content>
                <!-- EndRegion Normal Content -->
                 
                <!-- Region Large Content -->
                <telerik:RadFluidContentControl.LargeContent>
                    <Grid Background="{StaticResource PingBackgroundLiteBrush}">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
     
                        <TextBlock Text="{Binding Position}"
                                   Grid.Row="0"
                                   Style="{StaticResource NormalCardBriefInfoContentStyle}"/>
     
     
                        <ItemsControl Grid.Row="1" ItemsSource="{Binding BusinessRoleList}">
                            <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <WrapPanel Orientation="Vertical" ScrollViewer.VerticalScrollBarVisibility="Auto" />
                                </ItemsPanelTemplate>
                            </ItemsControl.ItemsPanel>
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <StackPanel>
                                        <TextBlock Margin="30,4,4,2" Text="{Binding RoleName}" FontSize="16" />
                                        <TextBlock Margin="30,4,4,2" Text="{Binding     BusinessRoleDescription}" FontSize="14" />
                                    </StackPanel>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>
                    </Grid>
                </telerik:RadFluidContentControl.LargeContent>
                <!-- EndRegion Large Content -->
                 
            </telerik:RadFluidContentControl>
        </DataTemplate> 
  2. Milena
    Admin
    Milena avatar
    216 posts

    Posted 12 Dec 2016 Link to this post

    Hello Tyler, 

    You can change the HeaderTemplate using style triggers according to the current TileState, e.g.: 
    <Style.Triggers>
              <Trigger Property="TileState" Value="Maximized">
                     <Setter Property="HeaderTemplate" >
                           ....
                     </Setter>
               </Trigger>
               <Trigger Property="TileState" Value="Restored">
                     <Setter Property="HeaderTemplate" >
                           ....
                     </Setter>
               </Trigger>
               <Trigger Property="TileState" Value="Minimized">
                     <Setter Property="HeaderTemplate" >
                           ....
                     </Setter>
               </Trigger>
     </Style.Triggers>

    Please let me know if this works for you or if you have any other questions.

    Regards,
    Milena
    Telerik by Progress
    Telerik UI for WPF is ready for Visual Studio 2017 RC! Learn more.
Back to Top