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 not find the solution
Contact Support
AR
Artur
The solution provided above works for the header text, but can we also turn off content bolding?