Menu Custom Style can't normal work
Posted: 02 Apr 2018, 06:36
Hi,
I use custom style and template to create a menu,
When I mouse click menuitem of menu, and drag the mouse to outer of menu's pupup panel,
the clicked menuitem can't change from ispressed to normal, besides the popup can't close.
Detail to see gif pictures.
Code: Select all
<UserControl x:Class="TestXaml.TestMenu"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:TestXaml"
mc:Ignorable="d"
d:DesignHeight="720" d:DesignWidth="1080">
<UserControl.Resources>
<Style TargetType="{x:Type MenuItem}">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Background" Value="Red"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type MenuItem}">
<!--Item-->
<Border x:Name="Border" Background="Transparent">
<Grid VerticalAlignment="Center" Margin="{TemplateBinding Margin}">
<!--Header-->
<Border x:Name="imgHeader" Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}" VerticalAlignment="Center"
Background="{TemplateBinding Background}"/>
<!--Sub Menu-->
<Popup x:Name="SubMenuPopup" AllowsTransparency="true"
IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}"
Placement="Bottom" PlacementTarget="{Binding ElementName=imgHeader}"
Focusable="True"
VerticalOffset="-15" HorizontalOffset="-40">
<Border Background="SkyBlue">
<Grid x:Name="SubMenu" Grid.IsSharedSizeScope="True">
<StackPanel Margin="4,15,4,2" IsItemsHost="True"
KeyboardNavigation.DirectionalNavigation="Cycle"/>
</Grid>
</Border>
</Popup>
</Grid>
</Border>
<!-- Trigger -->
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Background" TargetName="imgHeader" Value="Green"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type Menu}">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Background" Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Menu}">
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
<ItemsPresenter Margin="0" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid>
<Menu Width="80" Height="80" Background="Black">
<MenuItem Width="80" Height="80" Background="Red">
<MenuItem Width="150" Height="40"/>
<MenuItem Width="150" Height="40"/>
</MenuItem>
</Menu>
</Grid>
</UserControl>
When I mouse click menuitem of menu, and drag the mouse to outer of menu's pupup panel,
the clicked menuitem can't change from ispressed to normal, besides the popup can't close.
Detail to see gif pictures.