How to customize the overflow button color in ToolBarAdv?
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