How to change the color of the right bar in the ToolBar?

enter image description here

In the proposed https://msdn.microsoft.com/ru-ru/library/aa970772(v=vs.85).aspx type does not match the ToolBar ( TargetType="{x:Type ToggleButton}"> ).

If you replace it in the proposed ToolBarOverflowButtonStyle https://msdn.microsoft.com/ru-ru/library/aa970772(v=vs.85).aspx with {x: Type ToolBar} "then the program does not start.

If you do this, the angle will not change. But the program works in this case:

 <ToolBar Name="toolbar1" DockPanel.Dock="Top" Style="{DynamicResource AAA}" >

.

 <Style x:Key="AAA" TargetType="{x:Type ToolBar}"> <Setter Property="Foreground" Value="#FFFFFF" /> <Setter Property="Background" Value="#FF0F0F0F" /> </Style>

But if you add:

 <Setter Property="OverridesDefaultStyle" Value="true"

After that, the panel is not displayed. If you add height to it, it will be empty without buttons.

 <Style x:Key="ToolBarOverflowButtonStyle" TargetType="{x:Type ToolBar}"> <Setter Property="OverridesDefaultStyle" Value="true"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type ToolBar}"> <Border Name="Bd" CornerRadius="0,3,3,0" Background="Transparent" SnapsToDevicePixels="true"> <Grid> <Path Name="Arrow" Fill="Black" VerticalAlignment="Bottom" Margin="2,3" Data="M -0.5 3 L 5.5 3 L 2.5 6 Z"/> <ContentPresenter/> </Grid> </Border> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="true"> <Setter TargetName="Bd" Property="Background" Value="{StaticResource DarkBrush}"/> </Trigger> <Trigger Property="IsKeyboardFocused" Value="true"> <Setter TargetName="Bd" Property="Background" Value="{StaticResource DarkBrush}"/> </Trigger> <Trigger Property="IsChecked" Value="true"> <Setter TargetName="Bd" Property="Background" Value="{StaticResource DarkBrush}"/> </Trigger> <Trigger Property="IsEnabled" Value="false"> <Setter TargetName="Arrow" Property="Fill" Value="#AAA"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>
  • And show all your style. - VladD
  • AAA is all style. Or completely <ToolBar Name="toolbar1" DockPanel.Dock="Top" show? - codename0082016
  • one
    Yeah, got it. No, this part will not be easy to stylize. See the solution in the answer (yes, it is quite cumbersome). - VladD

1 answer 1

The easiest way is probably to get Visual Studio to generate a template style for you.

How to do this is described in this answer . Having a template, you find in it a code that displays your visual element. (This is easy to do: when you select an element in the source code, the corresponding visual element is highlighted in the designer.)

On my machine, this is the element:

 <ToggleButton x:Name="OverflowButton" ClickMode="Press" FocusVisualStyle="{x:Null}" IsChecked="{Binding IsOverflowOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" IsEnabled="{TemplateBinding HasOverflowItems}" Style="{StaticResource ToolBarHorizontalOverflowButtonStyle}"/>

(I reformatted a bit for better display).

We see that the ToolBarHorizontalOverflowButtonStyle style is responsible for the visual design. Find it:

 <Style x:Key="ToolBarHorizontalOverflowButtonStyle" TargetType="{x:Type ToggleButton}"> <Setter Property="Background" Value="{StaticResource ToolBarToggleButtonHorizontalBackground}"/>

and immediately above it

 <SolidColorBrush x:Key="ToolBarToggleButtonHorizontalBackground" Color="#FFEEF5FD"/>

Change to

 <SolidColorBrush x:Key="ToolBarToggleButtonHorizontalBackground" Color="Red"/>

and we get:

illustration