I want to do something like these buttons instead of the standard TabItem in TabControl .

enter image description here

I override ContentControl for TabItem , but I can’t figure out how to make the rectangle's width be slightly larger than the text and the tabs are next to each other? With this style, TabItem just stretch across the entire window.

enter image description here

xaml:

  <Style TargetType="{x:Type TabControl}"> <Setter Property="ItemContainerStyle"> <Setter.Value> <Style TargetType="{x:Type TabItem}"> <Setter Property="Background" Value="#0099ff"/> <Setter Property="Foreground" Value="#0080d6"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type TabItem}"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="2*" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Rectangle Grid.Column="0" Grid.ColumnSpan="2" Width="{TemplateBinding ActualWidth}" Height="{TemplateBinding ActualHeight, Converter={StaticResource HeightOffsetConverter}}" Fill="{TemplateBinding Foreground}" RadiusX="3" RadiusY="3" VerticalAlignment="Bottom"/> <Rectangle Grid.Column="0" Grid.ColumnSpan="2" Width="{TemplateBinding ActualWidth}" Height="{TemplateBinding ActualHeight, Converter={StaticResource HeightOffsetConverter}}" Fill="{TemplateBinding Background}" RadiusX="3" RadiusY="3" VerticalAlignment="Top"/> <TextBlock Grid.Column="0" Text="{TemplateBinding Header}" Foreground="White"/> <Rectangle Grid.Column="0" Width="{TemplateBinding ActualWidth}" Height="{TemplateBinding ActualHeight, Converter={StaticResource HeightOffsetConverter}}" Fill="White" RadiusX="3" RadiusY="3" Opacity="0.1" VerticalAlignment="Top"/> <Rectangle Grid.Column="1" Width="{TemplateBinding ActualWidth}" Height="{TemplateBinding ActualHeight, Converter={StaticResource HeightOffsetConverter}}" Fill="Black" RadiusX="3" RadiusY="3" Opacity="0.1" VerticalAlignment="Top"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </Setter.Value> </Setter> </Style>

converter:

 public class HeightOffsetConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { return (double)value - 2; } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { throw new NotImplementedException(); } }
  • What does "so that the tabs are next to each other"? And now how are they? - VladD
  • @VladD, I meant that they were next to the line, and not in the column, as in the second picture. - trydex

1 answer 1

Did so:

enter image description here

xaml:

 <Style TargetType="{x:Type TabControl}"> <Setter Property="Padding" Value="0,0,3,0" /> <Setter Property="ItemContainerStyle"> <Setter.Value> <Style TargetType="{x:Type TabItem}"> <Setter Property="Margin" Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=TabControl}, Path=Padding}" /> <Setter Property="Background" Value="#584a97"/> <Setter Property="SnapsToDevicePixels" Value="True"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type TabItem}"> <ControlTemplate.Resources> <SolidColorBrush x:Key="DefaultColor" Color="#584a97" /> <SolidColorBrush x:Key="DarkColor" Color="{Binding Source={StaticResource DefaultColor}, Converter={StaticResource ColorLightConverter}, ConverterParameter=DARK}" /> <SolidColorBrush x:Key="LightColor" Color="{Binding Source={StaticResource DefaultColor}, Converter={StaticResource ColorLightConverter}, ConverterParameter=LIGHT}" /> <SolidColorBrush x:Key="SelectColor" Color="{Binding Source={StaticResource DefaultColor}, Converter={StaticResource ColorLightConverter}, ConverterParameter=SELECT}" /> </ControlTemplate.Resources> <Border x:Name="body" Margin="{TemplateBinding Margin}" Background="{TemplateBinding Background}" CornerRadius="5"> <Grid Height="50" x:Name="grid"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <Border x:Name="textBorder" Grid.Column="0" Padding="25,0" CornerRadius="5,0,0,5" Background="#0FFFFFFF"> <TextBlock Text="{TemplateBinding Header, Converter={StaticResource StringUpperConverter}}" Foreground="White" VerticalAlignment="Center" /> <Border.RenderTransform> <ScaleTransform ScaleY="0.9"/> </Border.RenderTransform> </Border> <Grid Grid.Column="1" x:Name="iconGrid"> <Border Background="Black" Opacity="0.1" CornerRadius="0,5,5,0"> <Border.RenderTransform> <ScaleTransform ScaleY="0.9"/> </Border.RenderTransform> </Border> <Image Source="Resources/setting.png" Height="30" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5,0,5,0" /> </Grid> </Grid> </Border> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter TargetName="body" Property="Background" Value="{Binding Background, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource ColorLightConverter}, ConverterParameter=LIGHT}"/> </Trigger> <Trigger Property="IsSelected" Value="True"> <Setter TargetName="body" Property="Background" Value="{Binding Background, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource ColorLightConverter}, ConverterParameter=SELECT}"/> <Setter TargetName="body" Property="RenderTransform"> <Setter.Value> <ScaleTransform ScaleY="0.93"/> </Setter.Value> </Setter> <Setter TargetName="body" Property="RenderTransform"> <Setter.Value> <TranslateTransform Y="2"/> </Setter.Value> </Setter> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> </Setter.Value> </Setter> </Style>

code-behind:

  public class StringUpperConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { return value.ToString().ToUpper(); } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { throw new NotImplementedException(); } } public class ColorLightConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { SolidColorBrush br = value as SolidColorBrush; float coef = 0; if (parameter != null) { switch (parameter.ToString().ToUpper()) { case "DARK": coef = 0.8F; break; case "LIGHT": coef = 1.4F; break; case "SELECT": coef = 1.6F; break; default: coef = 1.1F; break; } } return Common.ChangeLightness(br.Color, coef); } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { throw new NotImplementedException(); } } class Common { public static Color ChangeLightness(Color color, float coef) { return Color.FromArgb(255, (byte)(color.R * coef), (byte)(color.G * coef), (byte)(color.B * coef)); } }