sskodje / wpfchrometabs-mvvm

A tab control based on WPF chrome tabs, modified to work with the MVVM pattern
MIT License
256 stars 60 forks source link

[Feature] Change TabControl to the latest Chrome design #41

Open akshinmustafayev opened 2 years ago

akshinmustafayev commented 2 years ago

Description

Change TabControl style to the latest Google Chrome design.

To Reproduce

N/a

Expected behavior

N/a

Additional context

I managed to recreate shape for the close button:

<Style TargetType="{x:Type Button}"
           x:Key="CloseButtonStyle">
        <Style.Resources>
            <sys:Double x:Key="CloseButtonWidth">7</sys:Double>
            <sys:Double x:Key="CloseCircleWidth">16</sys:Double>
            <sys:Double x:Key="CloseButtonOffset">4.5</sys:Double>
        </Style.Resources>
        <Setter Property="Height"
                Value="{StaticResource CloseCircleWidth}" />
        <Setter Property="Width"
                Value="{StaticResource CloseCircleWidth}" />
        <Setter Property="VerticalAlignment"
                Value="Center" />
        <Setter Property="HorizontalAlignment"
                Value="Center" />
        <Setter Property="Background"
                Value="Transparent" />
        <Setter Property="Foreground"
                Value="#45494C" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Canvas Background="Transparent"
                            x:Name="CloseButton"
                            Width="{StaticResource CloseCircleWidth}"
                            Height="{StaticResource CloseCircleWidth}">
                        <Ellipse Width="{StaticResource CloseCircleWidth}"
                                 Fill="{TemplateBinding Background}"
                                 Height="{StaticResource CloseCircleWidth}" />
                        <Canvas Canvas.Left="{StaticResource CloseButtonOffset}"
                                Canvas.Top="{StaticResource CloseButtonOffset}"
                                Background="Transparent"
                                Width="{StaticResource CloseButtonWidth}"
                                Height="{StaticResource CloseButtonWidth}">
                            <Line X1="0"
                                  Y1="0"
                                  X2="{StaticResource CloseButtonWidth}"
                                  Y2="{StaticResource CloseButtonWidth}"
                                  Stroke="{TemplateBinding Foreground}"
                                  StrokeThickness="1.5" />
                            <Line X1="0"
                                  Y1="{StaticResource CloseButtonWidth}"
                                  X2="{StaticResource CloseButtonWidth}"
                                  Y2="0"
                                  Stroke="{TemplateBinding Foreground}"
                                  StrokeThickness="1.5" />
                        </Canvas>
                    </Canvas>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsMouseOver"
                     Value="True">
                <Setter Property="Background"
                        Value="#DCDCDD" />
            </Trigger>
        </Style.Triggers>
    </Style>

TabItem shape is calculated via TabShape class. It is hard to make any changes through code. I think that it would be better if style is given via XAML (possibility to be styled via Blend in future).

sskodje commented 2 years ago

Yes, you are right, it's pretty awkward as it is. I made some changes in e1a2555ec9ed582bbe1f2ae42fb9c9bd8e543884 so you can supply a Path shape in xaml, so you can put it in astyle. PR's are always welcome :)