ToolBar Overflow Button background

[WarpSpeed99]

Hello everybody, this is my first feature request so please be kind if I am writing something stupid.

I have noticed that in using the ToolBar, if I change the background the overflow button background does not change because in the style definition, the background property (for both vertical and horiziontal overflow buttons) is defined as

<Setter Property="Background" Value="{DynamicResource MaterialDesign.Brush.ToolBar.Background}" />

A workaround to this is to define this property as

<Setter Property="Background" Value="{Binding Background, RelativeSource={RelativeSource AncestorType=ToolBar}}" />

In this way, any background colo I will set to the toolbar (or if I do not explicitly set one) the overflow button background will be "consistent" with the rest of the toolbar.

I hope that what I am requested is not stupid (and in this case I apologize).

thanks in advance for Your attention
Kind Regards
Fabio

[corvinsz]

@WarpSpeed99 with my limited experience using ToolBars, I'm questioning if this is the right change. Especially because it would be a visual breaking change for everyone else.

If I understand your problem correctly, you can just set the Background of your ToggleButton to Transparent and be done with it.
It would look something like this:

<ToolBar Background="Fuchsia">
  <ToggleButton Margin="10"
                Style="{StaticResource MaterialDesignToolBarVerticalOverflowButtonStyle}"
                Background="Transparent"/>
  <ToggleButton Margin="10" Style="{StaticResource MaterialDesignToolBarHorizontalOverflowButtonStyle}"/>
</ToolBar>

Result:

For mass-applying this change you could consider defining a global style for ToggleButton in your App.xaml which sets the Background="Transparent".

[WarpSpeed99]

Hi @corvin, thanks for your fast replay. What you suggest is clear and a very good advise, but maybe I was unable to explain my issue. In your example you define a custom ToggleButton which is not the one that automatically comes in the ToolBar control (and for which I tried to redefine the background using custom styles but I didn't succeed). I'll try to be more precise but I have to be longer and I apologize for that. In the following pictures You'll see the toolbar in two different configurations; the first one (NOMINAL) is the nominal definition of the ToolBar in material design in xaml 5.1.0, while the second one (MODIFIED) is with my "modification".

NOMINAL

I have tested the ToolBar in both Dark and Light base theme (using a "BlueGrey" primary color and an "Orange" secondary color) with default toolbar background and with a custom toolbar background:

Dark base theme, default background

<ToolBarTray Grid.Row="0">
    <ToolBar ClipToBounds="False" Style="{DynamicResource MaterialDesignToolBar}">
       ...
       some buttons to fill the toolbar
       ...
    </ToolBar>
</ToolBarTray>

in this case everything is ok as you can see from the picture below

Light base theme, default background

<ToolBarTray Grid.Row="0">
    <ToolBar ClipToBounds="False" Style="{DynamicResource MaterialDesignToolBar}">
       ...
       some buttons to fill the toolbar
       ...
    </ToolBar>
</ToolBarTray>

also in this case everything is ok as you can see from the picture below

Dark base theme, custom background

<ToolBarTray Grid.Row="0 Background="{DynamicResource MaterialDesign.Brush.Primary.Dark}">
    <ToolBar ClipToBounds="False" Background="{DynamicResource MaterialDesign.Brush.Primary.Dark}" Style="{DynamicResource MaterialDesignToolBar}">
       ...
       some buttons to fill the toolbar
       ...
    </ToolBar>
</ToolBarTray>

in this case, as You can see from the picture below, all the toolbar is keeping the custom background color except for the Overflow Button

Light base theme, custom background

<ToolBarTray Grid.Row="0 Background="{DynamicResource MaterialDesign.Brush.Primary.Dark}">
    <ToolBar ClipToBounds="False" Background="{DynamicResource MaterialDesign.Brush.Primary.Dark}" Style="{DynamicResource MaterialDesignToolBar}">
       ...
       some buttons to fill the toolbar
       ...
    </ToolBar>
</ToolBarTray>

also in this case, as You can see from the picture below, all the toolbar is keeping the custom background color except for the Overflow Button

MODIFIED

I have replicated the four situations above, using a modified version of the library with the "modification" and here are the results:

Dark base theme, default background

<ToolBarTray Grid.Row="0">
    <ToolBar ClipToBounds="False" Style="{DynamicResource MaterialDesignToolBar}">
       ...
       some buttons to fill the toolbar
       ...
    </ToolBar>
</ToolBarTray>

Light base theme, default background

<ToolBarTray Grid.Row="0">
    <ToolBar ClipToBounds="False" Style="{DynamicResource MaterialDesignToolBar}">
       ...
       some buttons to fill the toolbar
       ...
    </ToolBar>
</ToolBarTray>

Dark base theme, custom background

<ToolBarTray Grid.Row="0 Background="{DynamicResource MaterialDesign.Brush.Primary.Dark}">
    <ToolBar ClipToBounds="False" Background="{DynamicResource MaterialDesign.Brush.Primary.Dark}" Style="{DynamicResource MaterialDesignToolBar}">
       ...
       some buttons to fill the toolbar
       ...
    </ToolBar>
</ToolBarTray>

Light base theme, custom background

<ToolBarTray Grid.Row="0 Background="{DynamicResource MaterialDesign.Brush.Primary.Dark}">
    <ToolBar ClipToBounds="False" Background="{DynamicResource MaterialDesign.Brush.Primary.Dark}" Style="{DynamicResource MaterialDesignToolBar}">
       ...
       some buttons to fill the toolbar
       ...
    </ToolBar>
</ToolBarTray>

I apologie again for the very very long post, but I hope that my issue is now clear. I also apologize if (and due to the fact tha I am not an expert it is highly probable) I didn't understand that what I want Achieve cna be done easily without modify the library (or worst, break it).

Thanks to all for the patioence
Kind Regards
Fabio