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

Change HeaderTemplate based on State

1 Answer 158 Views
TileView
This is a migrated thread and some comments may be shown as answers.
Tyler
Top achievements
Rank 1
Tyler asked on 07 Dec 2016, 05:07 PM

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> 

1 Answer, 1 is accepted

Sort by
0
Milena
Telerik team
answered on 12 Dec 2016, 08:56 AM
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.
Tags
TileView
Asked by
Tyler
Top achievements
Rank 1
Answers by
Milena
Telerik team
Share this question
or