Change HeaderTemplate based on State

[Tyler]

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>

[Milena]

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