Articles in this section
Category / Section

How to turn off the Header Text bolding when a TileViewItem gets the focus?

1 min read

To set the TileViewItem’s Header Text in normal style, remove the FontWeight in the TileViewItemTemplate. Refer to the following code example.

XAML

<Window x:Class="TileViewSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:syncfusion="http://schemas.syncfusion.com/wpf" syncfusion:SkinStorage.VisualStyle="Metro"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <ResourceDictionary>
            <LinearGradientBrush x:Key="BorderFillBrushKey" EndPoint="0.443,0.511" StartPoint="0.443,0.022">
                <GradientStop Color="#FFF4F9FF" Offset="0.136"/>
                <GradientStop Color="#FFE6F0FA" Offset="0.491"/>
                <GradientStop Color="#FFE4EFFB" Offset="0.982"/>
                <GradientStop Color="#FFCDDAEA" Offset="0.991"/>
            </LinearGradientBrush>
        </ResourceDictionary>
    </Window.Resources>
    <Grid Margin="10">
         <syncfusion:TileViewControl  x:Name="tile">
            <syncfusion:TileViewControl.ItemContainerStyle>
                <Style BasedOn="{StaticResource {x:Type syncfusion:TileViewItem}}" TargetType="{x:Type syncfusion:TileViewItem}">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="syncfusion:TileViewItem">
                                <Grid x:Name="itemGrid">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition ></ColumnDefinition>
                                        <ColumnDefinition ></ColumnDefinition>
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition />
                                        <RowDefinition />
                                    </Grid.RowDefinitions>
                                    <Popup Name="Splitpopup"></Popup>
                                    <Border CornerRadius="{TemplateBinding CornerRadius}" 
                            BorderThickness="{TemplateBinding BorderThickness}" 
                            BorderBrush="{TemplateBinding BorderBrush}" 
                            Background="{TemplateBinding Background}" Grid.Row="{TemplateBinding BorderRow}" Grid.Column="{TemplateBinding BorderColumn}">
                                        <DockPanel LastChildFill="True">
                                            <Border CornerRadius="{TemplateBinding HeaderCornerRadius}" 
                                    BorderThickness="{TemplateBinding HeaderBorderThickness}" 
                                    BorderBrush="{TemplateBinding HeaderBorderBrush}" DockPanel.Dock="Top"
                                    Background="{TemplateBinding HeaderBackground}"
                                    Height="{TemplateBinding HeaderHeight}" Visibility="{TemplateBinding HeaderVisibility}"
                                    TextElement.Foreground="{TemplateBinding HeaderForeground}"
                                    x:Name="FloatPanelArea" Cursor="{TemplateBinding HeaderCursor}">
                                                <Grid>
                                                    <Grid.ColumnDefinitions>
                                                        <ColumnDefinition Width="*"/>
                                                        <ColumnDefinition Width="Auto"/>
                                                        <ColumnDefinition Width="Auto"/>
                                                    </Grid.ColumnDefinitions>
                                                    <Grid Grid.Column="0" 
                                       IsHitTestVisible="True">
                                                        <ContentPresenter  Margin="{TemplateBinding Padding}" x:Name="HeaderContent" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}"  
                                                              VerticalAlignment="Center" HorizontalAlignment="Stretch">
                                                        </ContentPresenter>
                                                    </Grid>
                                                    <Grid Grid.Column="1">
                                                        <ToggleButton x:Name="MinMaxButton"  IsThreeState="True"
                                                      Visibility="{TemplateBinding MinMaxButtonVisibility}"
                                                      VerticalAlignment="Top" HorizontalAlignment="Right"
                                                      Style="{TemplateBinding MinMaxButtonStyle}"
                                                      Margin="{TemplateBinding MinMaxButtonMargin}" Cursor="Hand"
                                                      ToolTipService.ToolTip="{TemplateBinding MinMaxButtonToolTip}">
                                                        </ToggleButton>
                                                    </Grid>
                                                    <Grid Grid.Column="2">
                                                        <syncfusion:TileViewItemCloseButton x:Name="CloseButton" Height="18"
                                                    HorizontalAlignment="Right"
                                                    Style="{TemplateBinding CloseButtonStyle}" 
                                                    Visibility="{TemplateBinding CloseButtonVisibility}"
                                                    Margin="{TemplateBinding CloseButtonMargin}"
                                                    VerticalAlignment="Top" HorizontalContentAlignment="Left" 
                                                    VerticalContentAlignment="Top">
                                                            <Grid HorizontalAlignment="Center" Margin="0,5,0,5" VerticalAlignment="Top" Width="11">
                                                                <Path Stretch="Fill" Fill="{StaticResource BorderFillBrushKey}"  HorizontalAlignment="Right" Width="11" Data="M1.7378059,0.5 L2.6141474,0.5 C3.1662261,0.50000006 3.8039908,0.75809938 4.4048114,1.5 4.5550169,1.685475 4.9485269,2.160322 5.4658298,2.7821105 L5.4860015,2.8063081 5.5061731,2.7821105 C6.0234754,2.1603227 6.4169869,1.6854752 6.5671916,1.5 7.1680121,0.75809938 7.805777,0.50000006 8.3578553,0.5 L9.2341971,0.5 C9.7862759,0.50000006 10.979304,0.58072393 10.233824,1.5 9.8610825,1.9596381 8.6079334,3.4697623 7.345519,4.9849148 L7.3238601,5.0108548 9.0990157,7.1366935 C9.6334218,7.7765244 10.052589,8.2784384 10.237003,8.5 10.974663,9.3862554 9.7894541,9.5 9.2373757,9.5 L8.3610196,9.5 C7.8089409,9.5 7.3899587,9.4595025 6.5703706,8.5 6.4679222,8.3800621 6.3116059,8.195097 6.1150331,7.9614411 L5.4860015,7.2116037 4.8569698,7.9614411 C4.6603975,8.195097 4.5040812,8.3800621 4.4016328,8.5 3.5820441,9.4595032 3.1630621,9.5 2.6109833,9.5 L1.7346272,9.5 C1.1825502,9.5 -0.0026579946,9.3862555 0.73499992,8.5 0.91941352,8.2784385 1.338581,7.7765249 1.8729872,7.1366935 L3.6481428,5.0108552 3.6264839,4.9849148 C2.36407,3.4697629 1.1109188,1.9596384 0.73817882,1.5 -0.0073020967,0.58072303 1.1857272,0.50000006 1.7378059,0.5 z"/>
                                                            </Grid>
                                                        </syncfusion:TileViewItemCloseButton>
                                                    </Grid>
                                                </Grid>
                                            </Border>
                                            <Grid x:Name="PART_Content" Background="Transparent">
                                                <ContentPresenter x:Name="tileviewcontent" Content="{TemplateBinding Content}" Margin="{TemplateBinding Margin}" ContentTemplate="{TemplateBinding ContentTemplate}"                                                                                                    ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}">
                                                </ContentPresenter>
                                            </Grid>
                                        </DockPanel>
                                    </Border>
                                    <Border x:Name="SplitBorder" Grid.Row="{TemplateBinding SplitRow}" Grid.Column="{TemplateBinding SplitColumn}"
                     Background="{Binding SplitterColor, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type syncfusion:TileViewControl}}}"
                    BorderBrush="{Binding SplitterColor, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type syncfusion:TileViewControl}}}"
                    CornerRadius="{TemplateBinding CornerRadius}"></Border>
                                </Grid>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsSelected" Value="True">
                                        <!--<Setter Property="TextBlock.FontWeight"  Value="ExtraBold" TargetName="HeaderContent" />-->
                                    </Trigger>
                                    <Trigger Property="syncfusion:SkinStorage.EnableTouch" Value="True">
                                        <Setter Property="HeaderHeight" Value="45"/>
                                        <Setter Property="Height" TargetName="CloseButton" Value="30"/>
                                        <Setter Property="FontSize" Value="18"/>
                                        <Setter Property="TextBlock.FontSize" Value="18"/>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </syncfusion:TileViewControl.ItemContainerStyle>
            <syncfusion:TileViewItem  Header="Item1"/>
            <syncfusion:TileViewItem  Header="Item2"/>
            <syncfusion:TileViewItem  Header="Item3"/>
            <syncfusion:TileViewItem  Header="Item4"/>
        </syncfusion:TileViewControl> 
    </Grid>
</Window>

The following screenshot displays the TileViewItem’s Header in Bold before removing the Font Weight in the TileViewItem Template.

Figure 1: TileViewItem’s Header in Bold

 

The following screenshot displays the TileViewItem’s Header Text in the normal style after removing the FontWeight in the TileViewItem Template.

Figure 2: TileViewItem’s Header Text in the normal style

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments
Please sign in to leave a comment
Access denied
Access denied