I have WPF ContextMenu with MenuItems that support custom style.
MenuItem is a ToggleButton. When the ToggleButton is checked the popup with textbox and close button appears.
<Style TargetType="MenuItem">
<Setter Property="Foreground" Value="{StaticResource ForegroundColor}"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="MenuItem" >
<Grid>
<Border Name="Border" Height="25"
Background="{StaticResource BackgroundColor}">
<ToggleButton Name="tbtnOpenPopup">
<ToggleButton.Style>
<Style TargetType="ToggleButton">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Border Name="externalBorder" Background="Transparent"
BorderThickness="0">
<ContentPresenter Content="{TemplateBinding Content}"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="externalBorder" Property = "Background" Value="{StaticResource DropDownHighlightedBackgroundColor}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ToggleButton.Style>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="7"/>
</Grid.ColumnDefinitions>
<ContentPresenter ContentSource="Header" VerticalAlignment="Center"
Margin="10,0,0,0"/>
<Path Name="Arrow" Grid.Column="1"
Data="M0,3 L5,0 L0,-3 L0,3 Z"
Fill="{TemplateBinding Foreground}"
VerticalAlignment="Center"/>
</Grid>
</ToggleButton>
</Border>
<Popup Grid.ColumnSpan="2"
Name="Popup"
Placement="Right"
AllowsTransparency="True"
Focusable="False"
StaysOpen="True"
IsOpen="False"
PopupAnimation="None">
<Grid Name="DropDown"
SnapsToDevicePixels="True"
MinWidth="{TemplateBinding ActualWidth}">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="22"/>
</Grid.ColumnDefinitions>
<Border MinHeight="25" Grid.ColumnSpan="2"
x:Name="DropDownBorder"
Background="{StaticResource DropDownBackgroundColor}"
BorderThickness="0"/>
<TextBlock Text="Some text" VerticalAlignment="Top"
HorizontalAlignment="Stretch"/>
<Button Name="closeButton"
Content="X"
Grid.Column="1"
VerticalAlignment="Top"
HorizontalAlignment="Right"/>
</Grid>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger SourceName="tbtnOpenPopup" Property="IsChecked" Value="true">
<Setter TargetName="Popup" Property="IsOpen" Value="true"/>
<Setter TargetName="Arrow" Property="Data" Value="M5,3 L0,0 L5,-3 L5,3 Z"/>
</Trigger>
<Trigger SourceName="closeButton" Property="IsPressed" Value="true">
<Setter TargetName="tbtnOpenPopup" Property="IsChecked" Value="false"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I want the popup textbox to close when the “closeButton” pressed, and the ContextMenu to stays open. But when the “closeButton” pressed the ContextMenu closed.
I couldn’t understand why it’s happining.
Have you any ideas?
Generally speaking, a context menu will close when focus is set elsewhere. Clicking your ToggleButton is within the ContextMenu, so that’s okay – but when you click on the close button, you’re clicking outside the ContextMenu and it closes.
(Remember that a ContextMenu is a popup, and not part of the visual tree of the owner control.)