)
We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to customize the overflow button color in ToolBarAdv?

Platform: WPF |
Control: ToolBarAdv |
Published Date: June 14, 2018 |
Last Revised Date: June 14, 2018

User can customize the Overflow button color in ToolBarAdv. It can be achieved by editing ToggleButton Style in ToolBarAdv. The following code demonstrates the same.

 

Code Example: [Xaml]

                    

<Style x:Key="NewToolBarAdvStyle" TargetType="{x:Type syncfusion:ToolBarAdv}"

 BasedOn="{StaticResource ToolBarAdvStyle}">        

 

<Setter Property="Background" Value="{StaticResource DefaultToolbarAdvBackgroundBrush}"/>

 

<Setter Property="MinWidth" Value="28"/>

 

<Setter Property="MinHeight" Value="28"/>

 

<Setter Property="Template">

 

<Setter.Value>

 

<ControlTemplate TargetType="{x:Type syncfusion:ToolBarAdv}">

 

<Border x:Name="mainborder" Background="{StaticResource

 

DEfaultToolbarAdvOuterBackground}" CornerRadius="3" BorderThickness="0"

 

BorderBrush="#FFB5BECE">

 

<Grid>

 

<windows:VisualStateManager.VisualStateGroups>

 

<windows:VisualStateGroup x:Name="Orientation">

 

<windows:VisualState x:Name="Horizontal">

 

<Storyboard>

 

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Width"

 

Storyboard.TargetName="col0">

 

<DiscreteObjectKeyFrame KeyTime="0" Value="8"/>

 

</ObjectAnimationUsingKeyFrames>

 

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Width"

 

Storyboard.TargetName="col1">

 

<DiscreteObjectKeyFrame KeyTime="0" Value="*"/>

 

</ObjectAnimationUsingKeyFrames>

 

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Width"

 

Storyboard.TargetName="col2">

 

<DiscreteObjectKeyFrame KeyTime="0" Value="12"/>

 

</ObjectAnimationUsingKeyFrames>

 

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Height"

 

Storyboard.TargetName="row0">

 

<DiscreteObjectKeyFrame KeyTime="0" Value="*"/>

 

</ObjectAnimationUsingKeyFrames>

 

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Height"

 

Storyboard.TargetName="row1">

 

<DiscreteObjectKeyFrame KeyTime="0" Value="Auto"/>

 

</ObjectAnimationUsingKeyFrames>

 

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Height"

 

Storyboard.TargetName="row2">

 

<DiscreteObjectKeyFrame KeyTime="0" Value="Auto"/>

 

</ObjectAnimationUsingKeyFrames>

 

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.Column)"

 

Storyboard.TargetName="PART_ToolBarPanel">

 

<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>

 

</ObjectAnimationUsingKeyFrames>

 

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.Column)"

 

Storyboard.TargetName="PART_OverflowButton">

 

<DiscreteObjectKeyFrame KeyTime="0" Value="2"/>

 

</ObjectAnimationUsingKeyFrames>

 

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.Row)"

 

Storyboard.TargetName="PART_ToolBarPanel">

 

<DiscreteObjectKeyFrame KeyTime="0" Value="0"/>

 

</ObjectAnimationUsingKeyFrames>

 

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.Row)"

 

Storyboard.TargetName="PART_OverflowButton">

 

<DiscreteObjectKeyFrame KeyTime="0" Value="0"/>

 

</ObjectAnimationUsingKeyFrames>

 

</Storyboard>

 

</windows:VisualState>

 

<windows:VisualState x:Name="Vertical">

 

<Storyboard>

 

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Height"

 

Storyboard.TargetName="row0">

 

<DiscreteObjectKeyFrame KeyTime="0" Value="8"/>

 

</ObjectAnimationUsingKeyFrames>

 

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Height"

 

Storyboard.TargetName="row1">

 

<DiscreteObjectKeyFrame KeyTime="0" Value="*"/>

 

</ObjectAnimationUsingKeyFrames>

 

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Height"

 

Storyboard.TargetName="row2">

 

<DiscreteObjectKeyFrame KeyTime="0" Value="12"/>

 

</ObjectAnimationUsingKeyFrames>

 

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Width"

 

Storyboard.TargetName="col0">

 

<DiscreteObjectKeyFrame KeyTime="0" Value="*"/>

 

</ObjectAnimationUsingKeyFrames>

 

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Width"

 

Storyboard.TargetName="col1">

 

<DiscreteObjectKeyFrame KeyTime="0" Value="Auto"/>

 

</ObjectAnimationUsingKeyFrames>

 

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Width"

 

Storyboard.TargetName="col2">

 

<DiscreteObjectKeyFrame KeyTime="0" Value="Auto"/>

 

</ObjectAnimationUsingKeyFrames>

 

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.Row)"

 

Storyboard.TargetName="PART_ToolBarPanel">

 

<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>

 

</ObjectAnimationUsingKeyFrames>

 

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.Row)"

 

Storyboard.TargetName="PART_OverflowButton">

 

<DiscreteObjectKeyFrame KeyTime="0" Value="2"/>

 

</ObjectAnimationUsingKeyFrames>

 

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.Column)"

 

Storyboard.TargetName="PART_ToolBarPanel">

 

<DiscreteObjectKeyFrame KeyTime="0" Value="0"/>

 

</ObjectAnimationUsingKeyFrames>

 

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.Column)"

 

Storyboard.TargetName="PART_OverflowButton">

 

<DiscreteObjectKeyFrame KeyTime="0" Value="0"/>

 

</ObjectAnimationUsingKeyFrames>

 

</Storyboard>

 

</windows:VisualState>

 

</windows:VisualStateGroup>

 

</windows:VisualStateManager.VisualStateGroups>

 

<Grid>

 

<Grid.ColumnDefinitions>

 

<ColumnDefinition x:Name="col0" Width="*"></ColumnDefinition>

 

<ColumnDefinition x:Name="col1" Width="Auto"/>

 

</Grid.ColumnDefinitions>

 

<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding

 

BorderBrush}" CornerRadius="3">

 

<Grid>

 

<Grid.ColumnDefinitions>

 

<ColumnDefinition Width="8" />

 

<ColumnDefinition Width="*"/>

 

</Grid.ColumnDefinitions>

 

<Grid x:Name="PART_DragThumb" Background="Transparent" Margin="4 2 2 0" Cursor="SizeAll" Visibility="{Binding GripperVisibility, RelativeSource={RelativeSource TemplatedParent}}">

<Path x:Name="horizontalGripper" Data="M0.5,12.5 L1.5000002,12.5 L1.5000002,13.5 L0.5,13.5 z M0.50000137,8.5 L1.5000012,8.5 L1.5000012,9.5 L0.50000137,9.5 z M0.50000137,4.5 L1.5000012,4.5 L1.5000012,5.5 L0.50000137,5.5 z M0.50000137,0.5 L1.5000014,0.5 L1.5000014,1.5 L0.50000137,1.5 z" Fill="#FF60728C" HorizontalAlignment="Center" Height="14" Stretch="Fill" Stroke="#FF60728C" VerticalAlignment="Center" Width="2"/>

 

</Grid>

 

<syncfusion:ToolBarPanelAdv Margin="1" x:Name="PART_ToolBarPanel"

 

Grid.Column="1"></syncfusion:ToolBarPanelAdv>

 

</Grid>

 

</Border>

 

<ToggleButton x:Name="PART_OverflowButton" Width="12" Grid.Column="2" >

 

<ToggleButton.Style>

 

<Style TargetType="{x:Type ToggleButton}">

 

<!--Set Overflow Button backcolor -->

 

<Setter Property="Background" Value="Yellow" />

 

<Setter Property="BorderBrush" Value="Transparent"/>

 

<Setter Property="BorderThickness" Value="1"/>

 

<Setter Property="Foreground" Value="{DynamicResource {x:Static

 

SystemColors.ControlTextBrushKey}}"/>

 

<Setter Property="HorizontalContentAlignment" Value="Center"/>

 

<Setter Property="VerticalContentAlignment" Value="Stretch" />

 

<Setter Property="Padding" Value="1"/>

 

<Setter Property="Template">

 

<Setter.Value>

 

<ControlTemplate TargetType="{x:Type ToggleButton}">

 

<Border x:Name="Chrome" Background="{TemplateBinding Background}"

 

BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" CornerRadius="0,3,3,0">

 

<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

 

Margin="{TemplateBinding Padding}" RecognizesAccessKey="True"

 

SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"

 

VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

 

</Border>

 

<ControlTemplate.Triggers>

 

<Trigger Property="IsEnabled" Value="false">

 

 

<Setter Property="Opacity" Value="0.3"/>

 

</Trigger>

 

</ControlTemplate.Triggers>

 

</ControlTemplate>

 

</Setter.Value>

 

</Setter>

 

</Style>

 

</ToggleButton.Style>

 

<Grid x:Name="horizontalPath" >

 

<Grid.RowDefinitions>

 

<RowDefinition Height="*"></RowDefinition>

 

<RowDefinition Height="Auto"></RowDefinition>

 

<RowDefinition Height="Auto"></RowDefinition>

 

</Grid.RowDefinitions>

 

<Path x:Name="horizontalDownPath1" Data="M0,-2 L6,-2" Stroke="Black"

 

VerticalAlignment="Bottom" Margin="0,0,0,2" Grid.Row="1" Stretch="Uniform" Height="1"

 

StrokeThickness="1" Width="6"/>

 

<Path x:Name="horizontalDownPath" Data="M0.5,3 L5.5,3 L3,6 z" Fill="Black" Stretch="Fill"

 

Grid.Row="2" VerticalAlignment="Top" Margin="0,0,0,4" Stroke="Black" Width="6" Height="4" />

 

<Path x:Name="horizontalLeftOverflowPath" Data="M88.583328,131.16667 L88.583328,111

 

L101.74972,121.1665 z" Fill="Black" Margin="0,3,1,3" HorizontalAlignment="Left" Height="3"

 

Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="2.5"/>

 

<Path x:Name="horizontalRightOverflowPath" Data="M88.583328,131.16667 L88.583328,111

 

L101.74972,121.1665 z" Fill="Black" Margin="0,3,0,3" Height="3" HorizontalAlignment="Right"

 

Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="2.5"/>

 

</Grid>

 

</ToggleButton>

 

<Popup x:Name="PART_OverflowPopup" IsOpen="{Binding ElementName=PART_OverflowButton,

 

Path=IsChecked}" PlacementTarget="{Binding ElementName=PART_OverflowButton}"

 

StaysOpen="False">

 

<Border BorderBrush="Gray" BorderThickness="1" Background="White" MaxWidth="150"

 

x:Name="PopupBorder">

 

<Border.Effect>

 

<DropShadowEffect ShadowDepth="3" BlurRadius="7" Opacity="0.5"/>

 

</Border.Effect>

 

<StackPanel>

 

<syncfusion:ToolBarOverflowPanel Margin="2"

 

x:Name="PART_ToolBarOverflowPanel"></syncfusion:ToolBarOverflowPanel>

 

<syncfusion:DropDownButtonAdv x:Name="PART_AddRemoveButtons" Label="Add or remove buttons"

 

DropDirection="Right" Margin="2,0,2,2" Style="{StaticResource DropDownButtonAdvStyle}"

 

Visibility="{Binding Path=EnableAddRemoveButton, RelativeSource={RelativeSource

 

AncestorType=syncfusion:ToolBarAdv}, Converter={StaticResource

 

BooleanToVisibilityConverter}}">

 

<syncfusion:DropDownMenuGroup x:Name="PART_AddRemoveItems" ItemsSource="{TemplateBinding

 

ToolBarItemInfoCollection}" IconBarEnabled="True" Style="{StaticResource

 

DropDownMenuGroupStyle1}">

 

<syncfusion:DropDownMenuGroup.ItemTemplate>

 

<DataTemplate>

 

<syncfusion:DropDownMenuItem Header="{Binding Label}" IsChecked="{Binding IsChecked,

 

Mode=TwoWay}"

 

Style="{StaticResource MenuItemStyle}">

 

<syncfusion:DropDownMenuItem.Icon>

 

<Image Source="{Binding Icon}"/>

 

</syncfusion:DropDownMenuItem.Icon>

 

</syncfusion:DropDownMenuItem>

 

</DataTemplate>

 

</syncfusion:DropDownMenuGroup.ItemTemplate>

 

</syncfusion:DropDownMenuGroup>

 

</syncfusion:DropDownButtonAdv>

 

</StackPanel>

 

</Border>

</Popup>

</Grid>

</Grid>

</Border>

 

<ControlTemplate.Triggers>

 

<MultiTrigger>

 

<MultiTrigger.Conditions>

 

<Condition Property="windows:SkinStorage.EnableTouch" Value="False"/>

 

<Condition Property="IsMouseOver" Value="True" SourceName="PART_OverflowButton"/>

 

</MultiTrigger.Conditions>

 

<Setter Property="Background" TargetName="mainborder" Value="{StaticResource

 

MouseOverBackground}"/>

 

</MultiTrigger>

 

<Trigger Property="windows:SkinStorage.EnableTouch" Value="True">

 

<Setter Property="MinHeight" Value="45"/>

 

<Setter Property="FontSize" Value="18"/>

 

<Setter TargetName="PopupBorder" Property="MaxWidth" Value="215"/>

 

<Setter Property="Width" Value="25" TargetName="PART_OverflowButton"/>

 

</Trigger>

 

<Trigger Property="IsPressed" Value="True" SourceName="PART_OverflowButton">

 

<Setter Property="Background" TargetName="mainborder" Value="{StaticResource

 

PressedBackground}"/>

 

</Trigger>

 

<Trigger Property="IsChecked" Value="True" SourceName="PART_OverflowButton">

 

<Setter Property="Background" TargetName="mainborder" Value="{StaticResource

 

CheckedBackground}"/>

 

</Trigger>

 

</ControlTemplate.Triggers>

 

</ControlTemplate>

 

</Setter.Value>

 

</Setter>

 

<Style.Triggers>

 

<Trigger Property="Orientation" Value="Vertical">

 

<Setter Property="Template" Value="{StaticResource VerticalTemplate}"/>

 

</Trigger>

 

</Style.Triggers>

 

</Style>

 

 

<syncfusion:ToolBarManager>

 

<syncfusion:ToolBarAdv ToolBarName="Standard" EnableAddRemoveButton="True" Width="300"

 

Height="40" Style="{StaticResource NewToolBarAdvStyle}" >

 

<Button syncfusion:ToolBarAdv.Label="New Document" Height="22" Width="22"

 

syncfusion:ToolBarAdv.Icon="Images\NewDocumentHS.png">

 

<Image Source="Images\NewDocumentHS.png" Width="16" Height="16"/>

 

</Button>

 

<Button syncfusion:ToolBarAdv.Label="Open Document" Height="22" Width="22"

 

syncfusion:ToolBarAdv.Icon="Images\openHS.png">

 

<Image Source="Images\openHS.png" Width="16" Height="16"/>

 

</Button>

 

<Button syncfusion:ToolBarAdv.Label="Save Document" Height="22" Width="22"

 

syncfusion:ToolBarAdv.Icon="Images\saveHS.png">

 

<Image Source="Images\saveHS.png" Width="16" Height="16"/>

 

</Button>

 

<Button syncfusion:ToolBarAdv.Label="Save Document" Height="22" Width="22"

 

syncfusion:ToolBarAdv.Icon="Images\SaveAllHS.png">

 

<Image Source="Images\SaveAllHS.png" Width="16" Height="16"/>

 

</Button>

 

</syncfusion:ToolBarAdv>

 

</syncfusion:ToolBarManager>

 

Screenshot

 

Sample:  ToolBarAdvExample

 

2X faster development

The ultimate WPF UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon