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 : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

 

Sample:  ToolBarAdvExample

 

Article ID: Published Date: Last Revised Date: Platform: Control:
8852 06/14/2018 06/14/2018 WPF ToolBarAdv
Did you find this information helpful?
Add Comment
You must log in to leave a comment

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