Dragablz Trapezoid Tab Background (WPF)

Question

I'm using Dragablz and Mahapps and I want to be able to switch between modern Material Design type tabs and the trapezoid ones. I've created two TabablzControl styles I can switch between and have a CustomHeaderViewModel I can change too to adjust its appearance to fit the changing tab style. My header has a stack panel with a textblock and an icon. I can change the background colour of the SP but in the trapezoid mode I do not know how to change the trapezoid's background to match the colour theme chosen.

Here's my two styles:

        <Style TargetType="{x:Type dragablz:TabablzControl}" x:Key="TabablzControlStyle">
            <Setter Property="NewItemFactory" Value="{x:Static stUi:UINewItem.Factory}" />
            <Setter Property="ItemsSource" Value="{Binding Items}" />
            <Setter Property="ClosingItemCallback" Value="{Binding ClosingTabItemHandler}" />
            <Setter Property="ShowDefaultCloseButton" Value="False" />
            <Setter Property="AdjacentHeaderItemOffset" Value="-10" />
            <Setter Property="ItemContainerStyle" Value="{StaticResource TrapezoidDragableTabItemStyle}" />
            <Setter Property="HeaderMemberPath" Value="Header" />
            <Setter Property="Background" Value="Red"/>
            <Setter Property="InterTabController" Value="{StaticResource InterTabController}" />
            <Setter Property="Margin" Value="0 8 0 0" />
        </Style>

        <Style TargetType="{x:Type dragablz:TabablzControl}" x:Key="ModernControlStyle">
            <Setter Property="NewItemFactory" Value="{x:Static stUi:UINewItem.Factory}" />
            <Setter Property="ItemsSource" Value="{Binding Items}" />
            <Setter Property="ClosingItemCallback" Value="{Binding ClosingTabItemHandler}" />
            <Setter Property="ShowDefaultCloseButton" Value="False" />
            <Setter Property="AdjacentHeaderItemOffset" Value="0" />
            <Setter Property="HeaderMemberPath" Value="Header" />
            <Setter Property="InterTabController" Value="{StaticResource InterTabController}" />
            <Setter Property="Margin" Value="0 8 0 0" />
        </Style>

Example:

You can see the area around the stackpanel is lighter than the SP itself. How do I change the trapezoid colour?

Thanks, Steve

score 1 · Answer 1 · edited Jul 07 '20 at 06:21

1

I think that you can create new style based on TrapezoidDragableTabItemStyle and override the Background property.

After that you must set this new style in ItemContainerStyle property of the TabablzControl.

edited Jul 07 '20 at 06:21

blackgreen

34,072
23
111
129

answered Jul 06 '20 at 11:31

Daniel

68
5

score 0 · Answer 2 · answered Oct 09 '18 at 15:56

Well, I could not find an elegant way to do this so I added code to find the "Trapezoid" type in the Loaded() function of my custom header code:

        var trap = TryFindParent<Trapezoid>(this);

        if (null != trap)
        {
            trap.Background = Application.Current.Resources["AccentColorBrush1"] as SolidColorBrush;
        }

TryFindParent from here : How can I find WPF controls by name or type?

It will do for me. Changing colour will typically only be done once and the setting saved.

Thanks

score 0 · Answer 3 · answered Apr 15 '23 at 12:53

I marked Daniel's answer as correct but wanted to just illustrate an example of the code for that in case someone doesn't know how.

Style oldStyle = TryFindResource("TrapezoidDragableTabItemStyle") as Style;
Style newHeaderStyle = new(typeof(DragablzItem), oldStyle);
Setter backgroundSetter = new Setter() { Property = BackgroundProperty, Value = Brushes.LightBlue };
newHeaderStyle.Setters.Add(backgroundSetter);
MyTabablzControl.ItemContainerStyle = newHeaderStyle;

Dragablz Trapezoid Tab Background (WPF)

3 Answers3