Here is the code:
<Style TargetType="{x:Type MenuItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type MenuItem}">
<Border Name="Border" >
<Grid>
<ContentPresenter Margin="6,3,10,3" ContentSource="Header" RecognizesAccessKey="True" />
<Popup Width="auto" AllowsTransparency="True" Name="Popup" Placement="Bottom" IsOpen="{TemplateBinding IsSubmenuOpen}" Focusable="False" PopupAnimation="Fade">
<Border Opacity="1" Name="SubmenuBorder" SnapsToDevicePixels="True" >
<Border.Background>
<SolidColorBrush Color="#FF9FD3F3"/>
</Border.Background>
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Cycle" />
<Border.BorderBrush>
<SolidColorBrush Color="Pink"></SolidColorBrush>
</Border.BorderBrush>
<Border.BorderThickness>
<Thickness Bottom="3" Top="3" Left="3" Right="3" ></Thickness>
</Border.BorderThickness>
</Border>
</Popup>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSuspendingPopupAnimation" Value="True">
<Setter TargetName="Popup" Property="PopupAnimation" Value="Fade"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Effect" Value="{StaticResource dropShadow}"/>
<Setter TargetName="Border" Property="Background" Value="#f9cef9"/>
</Trigger>
**<Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="True">
<Setter TargetName="SubmenuBorder" Property="Padding" Value="10,0,0,3"/>
</Trigger>**
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
How can I put the direction on the right side? It's a horizontal menu, when I click the submenus dropdown, that's right, but I have a subitem with submenus and I wanna them open in the right direction not dropdown
The Popup Placement is set to "Bottom", changing that to "Right" in the following code on a WpfToolkit SplitButton:
To include the toolkit, Add the line at top:
xmlns:wpfTools="http://schemas.xceed.com/wpf/xaml/toolkit"
Then..
<wpfTools:SplitButton Command="local:MainWindow.***" ToolTip="Resolutions">
<wpfTools:SplitButton.DropDownContent>
<Menu x:Name="***">
<Menu.Resources>
<Style TargetType="{x:Type MenuItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type MenuItem}">
<Border Name="Border" >
<Grid>
<ContentPresenter Margin="6,3,10,3" ContentSource="Header" RecognizesAccessKey="True" />
<Popup Width="auto" AllowsTransparency="True" Name="Popup" Placement="Right" IsOpen="{TemplateBinding IsSubmenuOpen}" Focusable="False" PopupAnimation="Fade">
<Border Opacity="1" Name="SubmenuBorder" SnapsToDevicePixels="True" >
<Border.Background>
<SolidColorBrush Color="#FF9FD3F3"/>
</Border.Background>
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Cycle" />
<Border.BorderBrush>
<SolidColorBrush Color="Pink"></SolidColorBrush>
</Border.BorderBrush>
<Border.BorderThickness>
<Thickness Bottom="3" Top="3" Left="3" Right="3" ></Thickness>
</Border.BorderThickness>
</Border>
</Popup>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSuspendingPopupAnimation" Value="True">
<Setter TargetName="Popup" Property="PopupAnimation" Value="Fade"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<!--
<Setter Property="Effect" Value="{StaticResource dropShadow}"/>
-->
<Setter TargetName="Border" Property="Background" Value="#f9cef9"/>
</Trigger>
<Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="True">
<Setter TargetName="SubmenuBorder" Property="Padding" Value="10,0,0,3"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Menu.Resources>
<Menu.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</Menu.ItemsPanel>
<MenuItem Header="Test1">
<MenuItem Header="test 1" />
<MenuItem Header="test 2" />
<MenuItem Header="test 3" />
</MenuItem>
<MenuItem Header="Test2">
<MenuItem Header="test 1" />
<MenuItem Header="test 2" />
<MenuItem Header="test 3" />
</MenuItem>
</Menu>
</wpfTools:SplitButton.DropDownContent>
<Image Width="32" Source="***.ico" />
</wpfTools:SplitButton>
The code:
<Menu.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</Menu.ItemsPanel>
Makes the first MenuItem drop vertical and not the default horizontal.