Articles in this section
Category / Section

How to customize the overflow button color in ToolBarAdv?

2 mins read

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

Toolbar advance example

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied