search

benruehl / adonis-ui

Lightweight UI toolkit for WPF applications offering classic but enhanced windows visuals
https://benruehl.github.io/adonis-ui/
MIT License
1.71k stars 143 forks source link

Support TabStripPlacement property for TabControl #65

Open leMicin opened 4 years ago

leMicin commented 4 years ago

Problem

Currently, when we try to put TabStripPlacement="Left", the result is very off.

Solution

It would be awesome if Adonis could handle other TabStripPlacement than "Top".

Alternative

We currently have put a patch in place in our project to detect the TabStripPlacement. Here is the bit of code that we have put in place:

    <Style
        x:Key="{x:Type TabControl}"
        BasedOn="{StaticResource {x:Type TabControl}}"
        TargetType="TabControl">
        <Style.Triggers>
            <Trigger Property="TabStripPlacement" Value="Left">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type TabControl}">
                            <Grid KeyboardNavigation.TabNavigation="Local">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="150" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>

                                <TabPanel
                                    x:Name="HeaderPanel"
                                    Grid.Column="0"
                                    Panel.ZIndex="1"
                                    Background="Transparent"
                                    IsItemsHost="True"
                                    KeyboardNavigation.TabIndex="1" />

                                <Border
                                    x:Name="Border"
                                    Grid.Column="1"
                                    Background="{TemplateBinding Background}"
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    KeyboardNavigation.DirectionalNavigation="Contained"
                                    KeyboardNavigation.TabIndex="2"
                                    KeyboardNavigation.TabNavigation="Local">
                                    <Border.CornerRadius>
                                        <MultiBinding Converter="{x:Static adonisConverters:ValuesToCornerRadiusConverter.Instance}">
                                            <Binding Source="0" />
                                            <Binding Path="(adonisExtensions:CornerRadiusExtension.CornerRadius).TopRight" RelativeSource="{RelativeSource TemplatedParent}" />
                                            <Binding Path="(adonisExtensions:CornerRadiusExtension.CornerRadius).BottomRight" RelativeSource="{RelativeSource TemplatedParent}" />
                                            <Binding Path="(adonisExtensions:CornerRadiusExtension.CornerRadius).BottomLeft" RelativeSource="{RelativeSource TemplatedParent}" />
                                        </MultiBinding>
                                    </Border.CornerRadius>

                                    <ContentPresenter
                                        x:Name="PART_SelectedContentHost"
                                        Margin="{adonisUi:Space 1,
                                                                1,
                                                                1,
                                                                1}"
                                        ContentSource="SelectedContent" />
                                </Border>

                                <Border
                                    x:Name="SelectedItemHighlight"
                                    Grid.Column="1"
                                    Width="4"
                                    Margin="{TemplateBinding BorderThickness}"
                                    HorizontalAlignment="Left"
                                    VerticalAlignment="Top"
                                    Background="{DynamicResource {x:Static adonisUi:Brushes.Layer1HighlightBrush}}">
                                    <Border.CornerRadius>
                                        <MultiBinding Converter="{x:Static adonisConverters:ValuesToCornerRadiusConverter.Instance}">
                                            <Binding Source="0" />
                                            <Binding Path="(adonisExtensions:CornerRadiusExtension.CornerRadius).TopRight" RelativeSource="{RelativeSource TemplatedParent}" />
                                            <Binding Source="0" />
                                            <Binding Source="0" />
                                        </MultiBinding>
                                    </Border.CornerRadius>
                                </Border>
                            </Grid>

                            <ControlTemplate.Triggers>
                                <DataTrigger Binding="{Binding Path=(adonisExtensions:LayerExtension.ComputedLayer), RelativeSource={RelativeSource Self}}" Value="2">
                                    <Setter TargetName="SelectedItemHighlight" Property="Background" Value="{DynamicResource {x:Static adonisUi:Brushes.Layer2HighlightBrush}}" />
                                </DataTrigger>

                                <DataTrigger Binding="{Binding Path=(adonisExtensions:LayerExtension.ComputedLayer), RelativeSource={RelativeSource Self}}" Value="3">
                                    <Setter TargetName="SelectedItemHighlight" Property="Background" Value="{DynamicResource {x:Static adonisUi:Brushes.Layer3HighlightBrush}}" />
                                </DataTrigger>

                                <DataTrigger Binding="{Binding Path=(adonisExtensions:LayerExtension.ComputedLayer), RelativeSource={RelativeSource Self}}" Value="4">
                                    <Setter TargetName="SelectedItemHighlight" Property="Background" Value="{DynamicResource {x:Static adonisUi:Brushes.Layer4HighlightBrush}}" />
                                </DataTrigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>

    <Style
        x:Key="{x:Type TabItem}"
        BasedOn="{StaticResource {x:Type TabItem}}"
        TargetType="TabItem">
        <Setter Property="Padding" Value="8" />
        <Style.Triggers>
            <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type TabControl}}, Path=TabStripPlacement}" Value="Left">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="TabItem">
                            <Grid x:Name="OuterGrid" Height="30">
                                <Border
                                    x:Name="Border"
                                    Padding="4"
                                    Background="{TemplateBinding Background}"
                                    BorderBrush="{TemplateBinding BorderBrush}">
                                    <Border.BorderThickness>
                                        <MultiBinding Converter="{x:Static adonisConverters:ValuesToThicknessConverter.Instance}">
                                            <Binding Path="BorderThickness.Left" RelativeSource="{RelativeSource TemplatedParent}" />
                                            <Binding Path="BorderThickness.Top" RelativeSource="{RelativeSource TemplatedParent}" />
                                            <Binding Source="0" />
                                            <Binding Path="BorderThickness.Bottom" RelativeSource="{RelativeSource TemplatedParent}" />
                                        </MultiBinding>
                                    </Border.BorderThickness>
                                    <Border.CornerRadius>
                                        <MultiBinding Converter="{x:Static adonisConverters:ValuesToCornerRadiusConverter.Instance}">
                                            <Binding Path="(adonisExtensions:CornerRadiusExtension.CornerRadius).TopLeft" RelativeSource="{RelativeSource TemplatedParent}" />
                                            <Binding Source="0" />
                                            <Binding Path="(adonisExtensions:CornerRadiusExtension.CornerRadius).BottomLeft" RelativeSource="{RelativeSource TemplatedParent}" />
                                            <Binding Source="0" />
                                        </MultiBinding>
                                    </Border.CornerRadius>
                                </Border>

                                <Border
                                    x:Name="SpotlightLayer"
                                    adonisExtensions:CursorSpotlightExtension.MouseEventSource="{Binding RelativeSource={RelativeSource TemplatedParent}}"
                                    Background="{TemplateBinding adonisExtensions:CursorSpotlightExtension.BackgroundBrush}"
                                    BorderBrush="{TemplateBinding adonisExtensions:CursorSpotlightExtension.BorderBrush}">
                                    <Border.BorderThickness>
                                        <MultiBinding Converter="{x:Static adonisConverters:ValuesToThicknessConverter.Instance}">
                                            <Binding Path="BorderThickness.Left" RelativeSource="{RelativeSource TemplatedParent}" />
                                            <Binding Path="BorderThickness.Top" RelativeSource="{RelativeSource TemplatedParent}" />
                                            <Binding Source="0" />
                                            <Binding Path="BorderThickness.Bottom" RelativeSource="{RelativeSource TemplatedParent}" />
                                        </MultiBinding>
                                    </Border.BorderThickness>
                                    <Border.CornerRadius>
                                        <MultiBinding Converter="{x:Static adonisConverters:ValuesToCornerRadiusConverter.Instance}">
                                            <Binding Path="(adonisExtensions:CornerRadiusExtension.CornerRadius).TopLeft" RelativeSource="{RelativeSource TemplatedParent}" />
                                            <Binding Source="0" />
                                            <Binding Path="(adonisExtensions:CornerRadiusExtension.CornerRadius).BottomLeft" RelativeSource="{RelativeSource TemplatedParent}" />
                                            <Binding Source="0" />
                                        </MultiBinding>
                                    </Border.CornerRadius>
                                </Border>

                                <Grid Name="TabPanel" Background="Transparent">
                                    <ContentPresenter
                                        x:Name="ContentSite"
                                        Margin="8,4"
                                        HorizontalAlignment="Center"
                                        VerticalAlignment="Center"
                                        ContentSource="Header"
                                        RecognizesAccessKey="True" />
                                </Grid>
                            </Grid>

                            <ControlTemplate.Triggers>
                                <Trigger Property="IsSelected" Value="True">
                                    <Setter TargetName="OuterGrid" Property="Margin" Value="0,0,-1,0" />
                                </Trigger>

                                <Trigger Property="IsSelected" Value="False">
                                    <Setter TargetName="OuterGrid" Property="Margin" Value="4,0,0,0" />
                                </Trigger>

                                <Trigger SourceName="TabPanel" Property="IsMouseOver" Value="True">
                                    <Setter Property="Background" Value="{DynamicResource {x:Static adonisUi:Brushes.Layer1HighlightBrush}}" />
                                    <Setter Property="BorderBrush" Value="{DynamicResource {x:Static adonisUi:Brushes.Layer1HighlightBorderBrush}}" />
                                    <Setter Property="adonisExtensions:CursorSpotlightExtension.BackgroundBrush" Value="{DynamicResource {x:Static adonisUi:Brushes.Layer1IntenseHighlightBrush}}" />
                                    <Setter Property="adonisExtensions:CursorSpotlightExtension.BorderBrush" Value="{DynamicResource {x:Static adonisUi:Brushes.Layer1IntenseHighlightBorderBrush}}" />
                                </Trigger>

                                <MultiDataTrigger>
                                    <MultiDataTrigger.Conditions>
                                        <Condition Binding="{Binding Path=(adonisExtensions:LayerExtension.ComputedLayer), RelativeSource={RelativeSource Self}}" Value="2" />
                                        <Condition Binding="{Binding IsMouseOver, ElementName=TabPanel}" Value="True" />
                                    </MultiDataTrigger.Conditions>
                                    <MultiDataTrigger.Setters>
                                        <Setter Property="Background" Value="{DynamicResource {x:Static adonisUi:Brushes.Layer2HighlightBrush}}" />
                                        <Setter Property="BorderBrush" Value="{DynamicResource {x:Static adonisUi:Brushes.Layer2HighlightBorderBrush}}" />
                                        <Setter Property="adonisExtensions:CursorSpotlightExtension.BackgroundBrush" Value="{DynamicResource {x:Static adonisUi:Brushes.Layer2IntenseHighlightBrush}}" />
                                        <Setter Property="adonisExtensions:CursorSpotlightExtension.BorderBrush" Value="{DynamicResource {x:Static adonisUi:Brushes.Layer2IntenseHighlightBorderBrush}}" />
                                    </MultiDataTrigger.Setters>
                                </MultiDataTrigger>

                                <MultiDataTrigger>
                                    <MultiDataTrigger.Conditions>
                                        <Condition Binding="{Binding Path=(adonisExtensions:LayerExtension.ComputedLayer), RelativeSource={RelativeSource Self}}" Value="3" />
                                        <Condition Binding="{Binding IsMouseOver, ElementName=TabPanel}" Value="True" />
                                    </MultiDataTrigger.Conditions>
                                    <MultiDataTrigger.Setters>
                                        <Setter Property="Background" Value="{DynamicResource {x:Static adonisUi:Brushes.Layer3HighlightBrush}}" />
                                        <Setter Property="BorderBrush" Value="{DynamicResource {x:Static adonisUi:Brushes.Layer3HighlightBorderBrush}}" />
                                        <Setter Property="adonisExtensions:CursorSpotlightExtension.BackgroundBrush" Value="{DynamicResource {x:Static adonisUi:Brushes.Layer3IntenseHighlightBrush}}" />
                                        <Setter Property="adonisExtensions:CursorSpotlightExtension.BorderBrush" Value="{DynamicResource {x:Static adonisUi:Brushes.Layer3IntenseHighlightBorderBrush}}" />
                                    </MultiDataTrigger.Setters>
                                </MultiDataTrigger>

                                <MultiDataTrigger>
                                    <MultiDataTrigger.Conditions>
                                        <Condition Binding="{Binding Path=(adonisExtensions:LayerExtension.ComputedLayer), RelativeSource={RelativeSource Self}}" Value="4" />
                                        <Condition Binding="{Binding IsMouseOver, ElementName=TabPanel}" Value="True" />
                                    </MultiDataTrigger.Conditions>
                                    <MultiDataTrigger.Setters>
                                        <Setter Property="Background" Value="{DynamicResource {x:Static adonisUi:Brushes.Layer4HighlightBrush}}" />
                                        <Setter Property="BorderBrush" Value="{DynamicResource {x:Static adonisUi:Brushes.Layer4HighlightBorderBrush}}" />
                                        <Setter Property="adonisExtensions:CursorSpotlightExtension.BackgroundBrush" Value="{DynamicResource {x:Static adonisUi:Brushes.Layer4IntenseHighlightBrush}}" />
                                        <Setter Property="adonisExtensions:CursorSpotlightExtension.BorderBrush" Value="{DynamicResource {x:Static adonisUi:Brushes.Layer4IntenseHighlightBorderBrush}}" />
                                    </MultiDataTrigger.Setters>
                                </MultiDataTrigger>

                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </DataTrigger>
        </Style.Triggers>
    </Style>
benruehl commented 4 years ago

You're right, this should be supported. Putting it on the to do list.