Our application is WPF. One page includes tab control which include three tabs (TabItems).
Our industry designer wants to the three tabs evenly use the whole page width.
So we define the style " TabItemControlStyle2" which targets on TabItem.
<TabItem Header="tab1" Style="{StaticResource TabItemControlStyle2}"><Style x:Key="TabItemControlStyle2" TargetType="{x:Type TabItem}"><Setter Property="FontSize" Value="20"/><Setter Property="Height" Value="45"/><Setter Property="Width" Value="298"/><Setter Property="BorderBrush" Value="{x:Null}"/><Setter Property="Background" Value="Pink"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type TabItem}"><Grid x:Name="gridTabItem"><Border x:Name="Border" Margin="0,0,0,0" BorderBrush="{x:Null}" CornerRadius="7,7,0,0" BorderThickness="0" ><ContentPresenter x:Name="ContentSite" VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Header" Margin="10,2,10,2" RecognizesAccessKey="True"></ContentPresenter></Border><Rectangle x:Name="rectangle" HorizontalAlignment="Left" Height="4" Margin="0,41, 0,0" Stroke="{x:Null}" VerticalAlignment="Top" Width="{Binding ActualWidth, ElementName=gridTabItem}" StrokeThickness="0" d:CopyToken="64b87611-7ebf-482c-b9f1-e10935bd6b33" Fill="{x:Null}"/><Rectangle x:Name="rectangle1" HorizontalAlignment="Left" Height="1" Margin="0,43,0,0" Stroke="{x:Null}" StrokeThickness="0" VerticalAlignment="Top" Width="{Binding ActualWidth, ElementName=gridTabItem}" Fill="#FFEEEEEE"/><Rectangle x:Name="glow" HorizontalAlignment="Left" Height="41" Margin="0" Stroke="{x:Null}" StrokeThickness="0" VerticalAlignment="Top" Width="{Binding ActualWidth, ElementName=gridTabItem}" Fill="{x:Null}"/></Grid><ControlTemplate.Triggers><Trigger Property="IsSelected" Value="True"><Setter Property="Panel.ZIndex" Value="100" /><Setter TargetName="Border" Property="Background" Value="{StaticResource ButtonSelecteddBackgroundFill}"/><Setter TargetName="Border" Property="BorderThickness" Value="0" /><Setter Property="Foreground" Value="White" /><Setter Property="Fill" TargetName="rectangle"><Setter.Value><LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"><GradientStop Color="White" Offset="0.112"/><GradientStop Color="#FFE0E0E0" Offset="0.155"/><GradientStop Color="Gainsboro" Offset="0.866"/><GradientStop Color="#FF767676" Offset="0.957"/></LinearGradientBrush></Setter.Value></Setter><Setter Property="Fill" TargetName="rectangle1" Value="{x:Null}"/><Setter Property="Fill" TargetName="glow"><Setter.Value><RadialGradientBrush Center="0.5,1.001" GradientOrigin="0.5,1.001" RadiusY="0.618" RadiusX="0.618"><GradientStop Color="Transparent" Offset="1"/><GradientStop Color="#4CFFFFFF" Offset="0"/></RadialGradientBrush></Setter.Value></Setter></Trigger><Trigger Property="IsEnabled" Value="False"><Setter TargetName="Border" Property="Background" Value="DarkRed" /><Setter TargetName="Border" Property="BorderBrush" Value="Black" /><Setter Property="Foreground" Value="DarkGray" /></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter><Setter Property="BorderBrush" Value="{x:Null}"/><Setter Property="Background" Value="{x:Null}"/></Style>
So three Tab Headers are pretty wide. We notice that the button click targets on the tabs were only on the actual text of the buttons. Clickong on other area except header text nothing happens.
if we add Width and Height in ContentPresenter section, the whole tab header control works like button.
However, the header text is not center of tab header anymore. Header text is on the top left corner
Even though we set the HorizontalAlignment and VerticalAlignment "Center".
<ContentPresenter x:Name="ContentSite" VerticalAlignment="Center" Width="298" Height="45" HorizontalAlignment="Center" ContentSource="Header" Margin="10,2,10,2" RecognizesAccessKey="True"></ContentPresenter>How can we ensure whole Tab header is like button and still keep the tab Header text in center of the Header area? Thx!
JaneC