Checkable MenuItem appearing like ToggleButton in C# WPF

Checkable MenuItem appearing like ToggleButton in C# WPF - c#

I am trying to create menu with MenuItem that is checkable, but looks like toggle button. Currently, it looks like this:
You'd agree, this looks pretty ugly and it's not intuitive whether check mark belongs to Views or to Actions.
I'm aware that regular CheckBox has property Appearance which can be set to Button, making CheckBox appear like ToggleButton. However, there is no such property for MenuItem object.
I've also tried to add ToggleButton to menu, but it's appearance differs from what I'd expect. Here's the screenshot of this try:
I expect it to look something like this:
Is there a way to display toogle button control (or something appearing like it) in menu bar?
P.S. If You need my current test code, here it is:
<Menu Grid.Row="0" HorizontalAlignment="Stretch" IsHitTestVisible="True" x:Name="mnuMain">
<MenuItem Header="File" x:Name="mnuFile">
<MenuItem Header="Export List to Excel" x:Name="btnExportToExcel" Click="OnExportToExcel"/>
</MenuItem>
<MenuItem Header="Views" x:Name="mnuViews">
<MenuItem Header="Item1" x:Name="chkItem1" IsCheckable="true" Click="OnChkItem1Click" />
<MenuItem Header="Item2" x:Name="chkItem2" IsCheckable="true" Click="OnChkItem2Click" />
</MenuItem>
<MenuItem Header="Actions" x:Name="mnuActions" IsCheckable="true" >
<!-- -->
</MenuItem>
<MenuItem Header="Analysis" x:Name="btnAnalysis" Click="OnAnalysisClick"/>
<MenuItem Header="History" x:Name="btnHistory" Click="OnHistoryClick"/>
<ToggleButton x:Name="tbTest" BorderThickness="0" Background="Transparent" HorizontalContentAlignment="Stretch" HorizontalAlignment="Stretch" Click="OnTbTestClick">Test</ToggleButton>
</Menu>

it is possible to change MenuItem template for checkable and checked items, using custom style with triggers. Here is an example of a template (it was exctrcted from default MenuItem style)
<SolidColorBrush x:Key="MenuItem.Highlight.Background" Color="#3D26A0DA"/>
<SolidColorBrush x:Key="MenuItem.Highlight.Border" Color="#FF26A0DA"/>
<SolidColorBrush x:Key="Menu.Disabled.Foreground" Color="#FF707070"/>
<Style x:Key="MenuItemToggleStyle" TargetType="{x:Type MenuItem}" BasedOn="{StaticResource {x:Type MenuItem}}">
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsChecked" Value="True"/>
<Condition Property="IsCheckable" Value="True"/>
<Condition Property="Role" Value="TopLevelItem"/>
</MultiTrigger.Conditions>
<MultiTrigger.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="MenuItem">
<Border x:Name="templateRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
<Grid VerticalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ContentPresenter x:Name="Icon" ContentSource="Icon" HorizontalAlignment="Center" Height="16" Margin="3" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center" Width="16"/>
<ContentPresenter Grid.Column="1" ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Icon" Value="{x:Null}">
<Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="{StaticResource Menu.Disabled.Foreground}"/>
<Setter Property="BorderBrush" TargetName="templateRoot" Value="{StaticResource MenuItem.Highlight.Border}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="True">
<Setter Property="Background" TargetName="templateRoot" Value="{StaticResource MenuItem.Highlight.Background}"/>
<Setter Property="BorderBrush" TargetName="templateRoot" Value="{StaticResource MenuItem.Highlight.Border}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</MultiTrigger.Setters>
</MultiTrigger>
</Style.Triggers>
</Style>

Related

Connecting The ComboBox Popup Border to Main ComboBox Border

I'm trying to match the Style of a ComboBox I'm creating to a design I have.
I'm unable to connect the Popup border to the Main Border that shows the selected ComboBox item.
I took this ComboBox Template from a site, changed some properties to match the design's style, things were coming along good until I realized I can't connect these 2 aforementioned borders. I'm not exactly sure how we could go about doing it.
I also thought about adding 2 Rows and making the ComboBox Popup Rowspawn but that didn't work either.
Creating a StackOverflow post as I ran out of ideas, any ideas are welcome.
Thank you in advance.
Edit: I was able to use VerticalOffset to move the Popup up, where I want it to be but I can't tuck it underneath the Border I create within the ToggleButton template. Panel.ZIndex usage didn't help either. Still working on a way to accomplish this task.
Design:
My ComboBox:
Here's the part I have an issue with (Along with other parts that I'll address myself later):
Here's my code:
<ControlTemplate x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="30"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border x:Name="Border"
Grid.ColumnSpan="2"
CornerRadius="4"
Background="#FFFFFF">
<Border.Effect>
<DropShadowEffect ShadowDepth="0"
Color="Black"
Opacity="0.29"
BlurRadius="5"/>
</Border.Effect>
</Border>
<Border Grid.Column="0"
CornerRadius="4,0,0,4"
Margin="0,0,1,0"
Background="#FFFFFF"
BorderBrush="LightGray"
BorderThickness="0,0,1.7,0">
</Border>
<Canvas Width="30"
Height="30"
Grid.Column="1"
Margin="9,-18,0,0">
<Canvas.LayoutTransform>
<MatrixTransform Matrix="1,0,0,-1,0,0" />
</Canvas.LayoutTransform>
<Path Data="M131.6625 270.6375A21.1875 21.1875 0 0 0 168.4125 270.6375L296.98125 51.88125C305.55 37.29375 295.25625 18.75 278.60625 18.75H21.45C4.78125 18.75 -5.49375 37.3125 3.075 51.88125L131.6625 270.6375z"
Stroke="{x:Null}"
Fill="#707070"
Stretch="Uniform"
Width="10"
Height="10"
SnapsToDevicePixels="False"
UseLayoutRounding="False"
StrokeThickness="0"
StrokeStartLineCap="flat"
StrokeEndLineCap="flat"
StrokeLineJoin="miter"/>
</Canvas>
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="ComboBoxTextBox" TargetType="{x:Type TextBox}">
<Border x:Name="PART_ContentHost" Focusable="False" Background="{TemplateBinding Background}" />
</ControlTemplate>
<Style x:Key="{x:Type ComboBox}" TargetType="{x:Type ComboBox}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Visible"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
<Setter Property="MinWidth" Value="120"/>
<Setter Property="MinHeight" Value="20"/>
<Setter Property="Foreground" Value="#707070"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid>
<ToggleButton
Name="ToggleButton"
Template="{StaticResource ComboBoxToggleButton}"
Grid.Column="2"
Focusable="false"
IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press">
</ToggleButton>
<ContentPresenter Name="ContentSite" IsHitTestVisible="False" Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
Margin="15,3,23,3"
VerticalAlignment="Center"
HorizontalAlignment="Left" />
<TextBox x:Name="PART_EditableTextBox"
Style="{x:Null}"
Template="{StaticResource ComboBoxTextBox}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="15,3,23,3"
Focusable="True"
Background="#FF3F3F3F"
Foreground="Green"
Visibility="Hidden"
IsReadOnly="{TemplateBinding IsReadOnly}"/>
<Popup
Name="Popup"
Placement="Bottom"
IsOpen="{TemplateBinding IsDropDownOpen}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="Slide">
<Grid Name="DropDown"
SnapsToDevicePixels="True"
MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}"
Margin="15,15,15,15">
<Border
x:Name="DropDownBorder"
Background="White"
BorderThickness="0"
BorderBrush="#888888">
<Border.Effect>
<DropShadowEffect ShadowDepth="0"
Color="Black"
Opacity="0.29"
BlurRadius="5"/>
</Border.Effect>
</Border>
<ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasItems" Value="false">
<Setter TargetName="DropDownBorder" Property="MinHeight" Value="95"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#888888"/>
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
</Trigger>
<Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="true">
<Setter TargetName="DropDownBorder" Property="CornerRadius" Value="0"/>
<Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,0,0"/>
</Trigger>
<Trigger Property="IsEditable" Value="true">
<Setter Property="IsTabStop" Value="false"/>
<Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Visible"/>
<Setter TargetName="ContentSite" Property="Visibility" Value="Hidden"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
</Style.Triggers>
</Style>
<!-- SimpleStyles: ComboBoxItem -->
<Style x:Key="{x:Type ComboBoxItem}" TargetType="{x:Type ComboBoxItem}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="Foreground" Value="#707070"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBoxItem}">
<Border Name="Border"
Padding="2"
SnapsToDevicePixels="true">
<ContentPresenter Margin="8,3,23,3"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

C# WPF - Custom Menu Item Background on Hover

How do I change a custom menu item's background when I hover it? I changed the background property but it doesn't change, it stays the default blue color.
I also tried to change the trigger style on hover, but again, it doesn't help, it gets ignored.
The idea is to hover the menu item and then a custom color should appear instead of the default blue color.
Here is the code:
<Style TargetType="{x:Type Menu}" x:Key="TopbarMenu" BasedOn="{StaticResource BaseStyle}">
<Setter Property="WindowChrome.IsHitTestVisibleInChrome" Value="True"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{StaticResource WhiteBrush}"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
<Style TargetType="{x:Type MenuItem}" x:Key="DropdownMenuButton" BasedOn="{StaticResource BaseStyle}">
<Setter Property="TextOptions.TextFormattingMode" Value="Display"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Margin" Value="6 0 6 0"/>
</Style>
I think it is something connected to templates, but I'm not very competent with templates, and I could be fundamentally wrong and the problem could be something else.

This is the way I'm doing it... works perfectly for me:
<ControlTemplate TargetType="{x:Type MenuItem}" x:Key="MenuItemTemplate">
<Border x:Name="Border" Padding="10,5,10,5" BorderThickness="0" Margin="0">
<ContentPresenter ContentSource="Header" x:Name="HeaderHost" RecognizesAccessKey="True" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsHighlighted" Value="true">
<Setter Property="Background" TargetName="Border" Value="Blue"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
and use with:
<MenuItem Template="{StaticResource MenuItemTemplate}" Header="test" />
[EDIT]
As per request here is some stuff to support submenus correctly:
<ControlTemplate TargetType="MenuItem" x:Key="rootMenuItem">
<Border x:Name="templateRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<Grid VerticalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ContentPresenter x:Name="Icon" Content="{TemplateBinding Icon}" ContentSource="Icon" HorizontalAlignment="Center" Height="16" Margin="3" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center" Width="16"/>
<Path x:Name="GlyphPanel" Data="F1M10,1.2L4.7,9.1 4.5,9.1 0,5.2 1.3,3.5 4.3,6.1 8.3,0 10,1.2z" Fill="{TemplateBinding Foreground}" FlowDirection="LeftToRight" Margin="3" Visibility="Collapsed" VerticalAlignment="Center"/>
<ContentPresenter ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="1" ContentStringFormat="{TemplateBinding HeaderStringFormat}" ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
<Popup x:Name="PART_Popup" AllowsTransparency="True" Focusable="False" IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}" Placement="Bottom">
<Border x:Name="SubMenuBorder" BorderBrush="#FF999999" BorderThickness="1" Background="#FFF0F0F0" Padding="2">
<ScrollViewer x:Name="SubMenuScrollViewer" Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}">
<Grid RenderOptions.ClearTypeHint="Enabled">
<Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
<Rectangle x:Name="OpaqueRect" Fill="{Binding Background, ElementName=SubMenuBorder}" Height="{Binding ActualHeight, ElementName=SubMenuBorder}" Width="{Binding ActualWidth, ElementName=SubMenuBorder}"/>
</Canvas>
<Rectangle Fill="#FFD7D7D7" HorizontalAlignment="Left" Margin="29,2,0,2" Width="1"/>
<ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Cycle" Grid.IsSharedSizeScope="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.TabNavigation="Cycle"/>
</Grid>
</ScrollViewer>
</Border>
</Popup>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSuspendingPopupAnimation" Value="True">
<Setter Property="PopupAnimation" TargetName="PART_Popup" Value="None"/>
</Trigger>
<Trigger Property="Icon" Value="{x:Null}">
<Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Visibility" TargetName="GlyphPanel" Value="Visible"/>
<Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
</Trigger>
<Trigger Property="IsHighlighted" Value="True">
<Setter Property="Background" TargetName="templateRoot" Value="BLUE"/>
<Setter Property="BorderBrush" TargetName="templateRoot" Value="#FF26A0DA"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="#FF707070"/>
<Setter Property="Fill" TargetName="GlyphPanel" Value="#FF707070"/>
</Trigger>
<Trigger Property="CanContentScroll" SourceName="SubMenuScrollViewer" Value="False">
<Setter Property="Canvas.Top" TargetName="OpaqueRect" Value="{Binding VerticalOffset, ElementName=SubMenuScrollViewer}"/>
<Setter Property="Canvas.Left" TargetName="OpaqueRect" Value="{Binding HorizontalOffset, ElementName=SubMenuScrollViewer}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style TargetType="MenuItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type MenuItem}">
<Border x:Name="templateRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<Grid Margin="-1">
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="22" SharedSizeGroup="MenuItemIconColumnGroup" Width="Auto"/>
<ColumnDefinition Width="13"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="30"/>
<ColumnDefinition SharedSizeGroup="MenuItemIGTColumnGroup" Width="Auto"/>
<ColumnDefinition Width="20"/>
</Grid.ColumnDefinitions>
<ContentPresenter x:Name="Icon" Content="{TemplateBinding Icon}" ContentSource="Icon" HorizontalAlignment="Center" Height="16" Margin="3" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center" Width="16"/>
<Border x:Name="GlyphPanel" BorderBrush="#FF26A0DA" BorderThickness="1" Background="#3D26A0DA" Height="22" Margin="-1,0,0,0" Visibility="Hidden" VerticalAlignment="Center" Width="22">
<Path x:Name="Glyph" Data="F1M10,1.2L4.7,9.1 4.5,9.1 0,5.2 1.3,3.5 4.3,6.1 8.3,0 10,1.2z" Fill="#FF212121" FlowDirection="LeftToRight" Height="11" Width="9"/>
</Border>
<ContentPresenter ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="2" ContentStringFormat="{TemplateBinding HeaderStringFormat}" ContentSource="Header" HorizontalAlignment="Left" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/>
<TextBlock Grid.Column="4" Margin="{TemplateBinding Padding}" Opacity="0.7" Text="{TemplateBinding InputGestureText}" VerticalAlignment="Center"/>
<Path x:Name="RightArrow" Grid.Column="5" Data="M0,0L4,3.5 0,7z" Fill="#FF212121" HorizontalAlignment="Left" Margin="10,0,0,0" VerticalAlignment="Center"/>
<Popup x:Name="PART_Popup" AllowsTransparency="True" Focusable="False" HorizontalOffset="-2" IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}" Placement="Right" VerticalOffset="-3">
<Border x:Name="SubMenuBorder" BorderBrush="#FF999999" BorderThickness="1" Background="#FFF0F0F0" Padding="2">
<ScrollViewer x:Name="SubMenuScrollViewer" Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}">
<Grid RenderOptions.ClearTypeHint="Enabled">
<Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
<Rectangle x:Name="OpaqueRect" Fill="{Binding Background, ElementName=SubMenuBorder}" Height="{Binding ActualHeight, ElementName=SubMenuBorder}" Width="{Binding ActualWidth, ElementName=SubMenuBorder}"/>
</Canvas>
<Rectangle Fill="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}" HorizontalAlignment="Left" Margin="29,2,0,2" Width="1"/>
<ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Cycle" Grid.IsSharedSizeScope="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.TabNavigation="Cycle"/>
</Grid>
</ScrollViewer>
</Border>
</Popup>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSuspendingPopupAnimation" Value="True">
<Setter Property="PopupAnimation" TargetName="PART_Popup" Value="None"/>
</Trigger>
<Trigger Property="Icon" Value="{x:Null}">
<Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Visibility" TargetName="GlyphPanel" Value="Visible"/>
<Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
</Trigger>
<Trigger Property="IsHighlighted" Value="True">
<Setter Property="Background" TargetName="templateRoot" Value="BLUE"/>
<Setter Property="BorderBrush" TargetName="templateRoot" Value="#FF26A0DA"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="#FF707070"/>
<Setter Property="Fill" TargetName="Glyph" Value="#FF707070"/>
<Setter Property="Fill" TargetName="RightArrow" Value="#FF707070"/>
</Trigger>
<Trigger Property="CanContentScroll" SourceName="SubMenuScrollViewer" Value="False">
<Setter Property="Canvas.Top" TargetName="OpaqueRect" Value="{Binding VerticalOffset, ElementName=SubMenuScrollViewer}"/>
<Setter Property="Canvas.Left" TargetName="OpaqueRect" Value="{Binding HorizontalOffset, ElementName=SubMenuScrollViewer}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and the usage test:
<Menu HorizontalAlignment="Center" VerticalAlignment="Center">
<MenuItem Header="test" Template="{StaticResource rootMenuItem}">
<MenuItem Header="test" >
<MenuItem Header="test">
<MenuItem Header="test">
<MenuItem Header="test">
<MenuItem Header="test">
<MenuItem Header="test" />
<MenuItem Header="test" />
</MenuItem>
<MenuItem Header="test" />
</MenuItem>
<MenuItem Header="test" />
</MenuItem>
<MenuItem Header="test" />
</MenuItem>
<MenuItem Header="test">
<MenuItem Header="test">
<MenuItem Header="test" />
<MenuItem Header="test" />
</MenuItem>
<MenuItem Header="test">
<MenuItem Header="test">
<MenuItem Header="test" />
<MenuItem Header="test" />
</MenuItem>
<MenuItem Header="test" />
</MenuItem>
</MenuItem>
</MenuItem>
</MenuItem>
<MenuItem Header="test" Template="{StaticResource rootMenuItem}">
<MenuItem Header="test">
<MenuItem Header="test" />
<MenuItem Header="test" />
</MenuItem>
</MenuItem>
</Menu>
Beware, the root-item has another template than the child-items! in this demo it's done with static template binding for the root elements but in a real use case you can do this with a style selector like this:
<Style TargetType="{x:Type MenuItem}" x:Key="{x:Type MenuItem}">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Style.Triggers>
<Trigger Property="Role" Value="SubmenuHeader">
<Setter Property="Template" Value="{StaticResource {x:Static MenuItem.SubmenuHeaderTemplateKey}}"/>
</Trigger>
<Trigger Property="Role" Value="SubmenuItem">
<Setter Property="Template" Value="{StaticResource {x:Static MenuItem.SubmenuItemTemplateKey}}"/>
</Trigger>
</Style.Triggers>
</Style>
[/EDIT]
[EDIT2]
For the arrow to disappear, you need a StyleSelector as mentioned.
this class has to be implemented assuming yout two styles are named "MenuItemWithChildren" and "MenuItemWithoutChildren"
class ItemStyleSelector : StyleSelector
{
public override Style SelectStyle(object item, DependencyObject container)
{
if(item is MenuItem mItem)
{
if(mItem.Items.Count > 0)
{
return App.Current.Resources["MenuItemWithChildren"] as Style;
}
else
{
return App.Current.Resources["MenuItemWithoutChildren"] as Style;
}
}
return base.SelectStyle(item, container);
}
}
then you have to define two different styles & templates for each of the items, with and without children:
Important: these have to be defined in app.xaml or some resource-dictionary which is linked there, else the ItemStyleSelector class wont find them. E.g. Window.Resources won't be found.
<Style TargetType="MenuItem" x:Key="MenuItemWithChildren">
<Setter Property="ItemContainerStyleSelector" Value="{StaticResource ItemStyleSelector}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type MenuItem}">
[Your Template goes here]
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="MenuItem" x:Key="MenuItemWithoutChildren">
<Setter Property="ItemContainerStyleSelector" Value="{StaticResource ItemStyleSelector}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type MenuItem}">
[Your Template goes here]
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
also your Styleselctor itself and a default style for the menuitem
<local:ItemStyleSelector x:Key="ItemStyleSelector" />
<Style TargetType="MenuItem">
<Setter Property="ItemContainerStyleSelector" Value="{StaticResource ItemStyleSelector}" />
</Style>
and declare the selection in the menu:
<Menu ItemContainerStyleSelector="{StaticResource ItemStyleSelector}">
<MenuItem Header="test" Template="{StaticResource rootMenuItem}">
<MenuItem Header="test">
<MenuItem Header="test" />
<MenuItem Header="test" />
</MenuItem>
</MenuItem>
</Menu>
[/EDIT2]

How to properly fire the click event in a contextmenu in WPF

So I am trying to create a click event for one of my contextmenu items but it's throwing me an error I have never seen before.
There wasnt too much information on Google and the information I saw didnt help me because I didnt understand it.
The line throwing the error is this one
GridView ColumnHeaderContainerStyle="{StaticResource GridViewColumnHeaderStyle1}"
saying
'cmndOP_Click' is not valid. 'Click' is not an event on
'System.Windows.Controls.GridView'.
Reading the error message tells me that 'Click' is not a valid event in the gridview, but its not in the gridview its in the listviewitem.
Whats causing this error and what should I do in the future to prevent this?
<ListView Margin="10,36,520,10" ScrollViewer.HorizontalScrollBarVisibility="Hidden" BorderBrush="Black" Padding="-1, -1, 1, 0" Background="Transparent" BorderThickness="1.000001" Name="lvUsers" Style="{DynamicResource ListViewStyle1}">
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="ContextMenu">
<Setter.Value>
<ContextMenu>
<MenuItem Name="cmndOP" Header="OP User" Click="cmndOP_Click"/>
<MenuItem Header="Kick User"/>
<MenuItem Header="Ban User"/>
<MenuItem Header="Send Command"/>
</ContextMenu>
</Setter.Value>
</Setter>
<Setter Property="Background" Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border
BorderBrush="Transparent"
BorderThickness="0"
Background="{TemplateBinding Background}">
<GridViewRowPresenter HorizontalAlignment="Stretch" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Width="Auto" Margin="0" Content="{TemplateBinding Content}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="White" />
<Setter Property="Background" Value="#696969" />
<Setter Property="BorderBrush" Value="#696969" />
<Setter Property="BorderThickness" Value="0" />
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="White" />
<Setter Property="Background" Value="#696969" />
<Setter Property="BorderBrush" Value="#696969" />
<Setter Property="BorderThickness" Value="0" />
</Trigger>
</Style.Triggers>
</Style>
</ListView.ItemContainerStyle>
<ListView.View>
<GridView ColumnHeaderContainerStyle="{StaticResource GridViewColumnHeaderStyle1}">
<GridViewColumn x:Name="GridViewColumnName" Header="Name" Width="165">
<GridViewColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image x:Name="Image_GridViewColumnName" Width="16" Height="16" Source="Images\minecraft.png" />
<Label Content="{Binding Username}" Visibility="Visible" />
</StackPanel>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
And this behind it
private void cmndOP_Click(object sender, RoutedEventArgs e)
{
Commands cmd = new Commands();
cmd.OpUser(lvUsers.SelectedItem.ToString());
}
EDIT
This is where the error happands.
This is also in the App.xaml because otherwise I would get another error
<Style x:Key="GridViewColumnHeaderStyle1" TargetType="{x:Type GridViewColumnHeader}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GridViewColumnHeader}">
<Border BorderThickness="0,0,0,1" BorderBrush="Black" Background="Transparent">
<TextBlock x:Name="ContentHeader" Text="{TemplateBinding Content}" Padding="5,5,5,5" Width="{TemplateBinding Width}" TextAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="FontSize" Value="12" />
</Style>

I was surprised to find that your error was reproducible from the XAML you provided. When I define the context menu as a resource and update the setter accordingly, I no longer get the error.
<ListView Margin="10,36,520,10" ScrollViewer.HorizontalScrollBarVisibility="Hidden" BorderBrush="Black" Padding="-1, -1, 1, 0" Background="Transparent" BorderThickness="1.000001" Name="lvUsers" >
<ListView.Resources>
<ContextMenu x:Key="ListViewItemContextMenu">
<MenuItem Name="cmndOP" Header="OP User" Click="cmndOP_Click" />
<MenuItem Header="Kick User"/>
<MenuItem Header="Ban User"/>
<MenuItem Header="Send Command"/>
</ContextMenu>
</ListView.Resources>
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="ContextMenu" Value="{StaticResource ListViewItemContextMenu}" />

How to change Datagrid row background when clicking on togglebutton inside rowheader?

I am overriding DataGrid row header style, and I’m been hindered with the following two issues:
1.The DataGrid row header contains an Image and a ToggleButton. When the ToggleButton is ‘Checked’ I want to change the background color of the whole row, however I only managed to change the background of the row header and couldn’t figure out a way to fire a trigger on the row level.
2.When a row is selected the row and the header background is set to different background, the other way around does not work. What I need to do is to change the background of the row when the row header is selected
Here is a the style code of the DataGridRowHeader
<Style x:Key="{x:Type DataGridRowHeader}" TargetType="{x:Type DataGridRowHeader}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridRowHeader}">
<Grid>
<Border Name="RowHeaderBorder"
BorderThickness="0,0,3,0"
Margin="0,0,0,0"
BorderBrush="{StaticResource DataGridRowBorder}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="{Binding ImageSource}" RenderOptions.BitmapScalingMode="HighQuality" Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<ToggleButton x:Name="tglButton" Visibility="{Binding ActiveCall}" Grid.Column="1" Content="Button" Focusable="True" BorderThickness="1" Width="80" Height="33" VerticalAlignment="Top" >
</ToggleButton>
</Grid>
</Border>
</Grid>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding ElementName=tglButton, Path=IsChecked}" Value="true">
<Setter Property="Background" TargetName="RowHeaderBorder" Value ="Green"/>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And here is the style of the DataGridRow:
<Style x:Key="DataGridRowStyle" TargetType="{x:Type DataGridRow}">
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="{StaticResource DataGridRowBorder}"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="{StaticResource DataGridRowHoveredBackground}" />
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect ShadowDepth="0" BlurRadius="20"/>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsSelected" Value="true">
<Setter Property="Foreground" Value="Black"/>
<Setter Property="Background" Value="{StaticResource RowBackgroundSelectedBrush2}" />
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect ShadowDepth="0" BlurRadius="20"/>
</Setter.Value>
</Setter>
</Trigger>
<DataTrigger Binding="{Binding ElementName=DataGridRowHeader.tglButton, Path=IsChecked}" Value="true">
<Setter Property="Background" Value ="Green"/>
</DataTrigger>
</Style.Triggers>
</Style>

This is because tglButton is present in the row header, which is a child of the DataGridRow. A trigger defined in child row header is trying to update a property of the parent (DataGridRow) and is not able to find it.
One solution for this is to define the template for DataGridRowHeader inside the template for DataGridRow and supply a name for it, which can be used in the trigger. A very crude example:
<Style
TargetType="{x:Type DataGridRow}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridRow}">
<Border x:Name="DGR_Border"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
SnapsToDevicePixels="True"
CornerRadius="8,8,8,8">
<SelectiveScrollingGrid>
<SelectiveScrollingGrid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</SelectiveScrollingGrid.ColumnDefinitions>
<SelectiveScrollingGrid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</SelectiveScrollingGrid.RowDefinitions>
<DataGridCellsPresenter Grid.Column="1"
ItemsPanel="{TemplateBinding ItemsPanel}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
<DataGridDetailsPresenter Grid.Column="1"
Grid.Row="1"
SelectiveScrollingGrid.SelectiveScrollingOrientation="{Binding AreRowDetailsFrozen,
ConverterParameter={x:Static SelectiveScrollingOrientation.Vertical},
Converter={x:Static DataGrid.RowDetailsScrollingConverter},
RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"
Visibility="{TemplateBinding DetailsVisibility}" />
<DataGridRowHeader Name="RHeader" Grid.RowSpan="2"
SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"
Visibility="{Binding HeadersVisibility,
ConverterParameter={x:Static DataGridHeadersVisibility.Row},
Converter={x:Static DataGrid.HeadersVisibilityConverter},
RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ToggleButton x:Name="tglButton"
Grid.Column="1"
Content="Button"
Focusable="True"
BorderThickness="1"
Width="80"
Height="33"
VerticalAlignment="Top">
</ToggleButton>
</Grid>
</DataGridRowHeader>
</SelectiveScrollingGrid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected"
Value="True">
<Setter TargetName="DGR_Border"
Property="Background"
Value="Gray" />
</Trigger>
<DataTrigger Binding="{Binding ElementName=tglButton, Path=IsChecked}"
Value="true">
<Setter Property="Background"
TargetName="RHeader"
Value="Green" />
<Setter Property="Background"
Value="Green" />
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="DataContext"
Value="{Binding RelativeSource={RelativeSource Self}}" />
<Setter Property="BorderThickness"
Value="1" />
<Setter Property="BorderBrush"
Value="Aqua" />
<Style.Triggers>
<Trigger Property="IsSelected"
Value="true">
<Setter Property="Foreground"
Value="Black" />
<Setter Property="Background"
Value="Pink" />
<Setter Property="FontWeight"
Value="Bold" />
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect ShadowDepth="0"
BlurRadius="20" />
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>

Disable Control's Selection Background Effect in WPF

I have a ListView which shows a collection of objects. I want to disable the "Blue effect" or "Blue rectangle" when clicking on the ListViewItem, and Let only the object in this Item enabled. Does anyone has an idea about that ??
Here is an Example of one of my ListViewItems:
Here is my listView:
<ListView SelectionMode="Single" IsManipulationEnabled="True" HorizontalAlignment="Left" HorizontalContentAlignment="Stretch" VerticalAlignment="Stretch" ScrollViewer.VerticalScrollBarVisibility="Auto" ItemsSource="{Binding ChildrenList}" Background="Transparent" BorderBrush="Transparent" >
<ListView.LayoutTransform>
<RotateTransform Angle="{Binding IsVertical, Converter={StaticResource AngleOfBool}}"></RotateTransform>
</ListView.LayoutTransform>
<ListView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Stretch" Background="Transparent" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<CheckBox Content="{Binding Id}" Height="auto" Name="Flag" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Column="0" IsChecked="{Binding IsVisible}"/>
<Grid Grid.Column="1">
<area:Area HorizontalAlignment="Stretch" Visibility="{Binding IsVisible, Converter={StaticResource VisibilityOfBool}}" />
</Grid>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

Setting the IsEnabled property of a parent control to False will automatically set the IsEnabled property of every child control to False as well. The only way around this is to set the IsEnabled property of the individual controls that you want to be disabled to False, instead of that of the parent control.
However, you can create one bool property to Bind to the IsEnabled property of all of the relevant controls so that at least, you can disable and enable them all using the one property:
<Grid Name="Parent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<ContentControl IsEnabled="AreInnerControlsEnabled" Grid.Column="0" Content="{Binding}" Visibility="{Binding IsVisible, Converter= {StaticResource VisibilityOfBool} }"></ContentControl>
<Grid Grid.Column="1" Visibility="{Binding IsVisible, Converter= {StaticResource VisibilityOfBool} }" HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="0.5*"></RowDefinition>
<RowDefinition Height="0.5*"></RowDefinition>
</Grid.RowDefinitions>
<Label IsEnabled="AreInnerControlsEnabled" Grid.Row="0" Background="Transparent" Content="{Binding Top}" VerticalAlignment="Top" HorizontalAlignment="Stretch"></Label>
<Label Grid.Row="1" Background="Transparent" Content="{Binding Bottom}" VerticalAlignment="Bottom" HorizontalAlignment="Stretch"></Label>
</Grid>
</Grid>
Using this method, only the controls using the AreInnerControlsEnabled property will be affected.
UPDATE >>>
So it turns out that you actually want to remove the default selection colour of the ListView... that is very different to what you 'appeared' to be asking. However, now I know that, you can achieve that very easily by using a simple Style:
<Style x:Key="HiddenDefaultSelectionStyle" TargetType="{x:Type ListViewItem
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent" />
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Black" />
<SolidColorBrush x:Key="{x:Static SystemColors.ControlTextBrushKey}" Color="Black" />
</Style.Resources>
</Style>
You only need one of these to hide that colour, but I have shown you the rest for future reference. You can use it like this:
<ListView ItemContainerStyle="{StaticResource HiddenDefaultSelectionStyle}" ... />

As I stated at the comments, I would change the ListViewItem template.
The code is very verbose, so let's do it:
First, create a ResourceDictionary and set a reference to it in you App.xaml.
Having done that, paste the code below at the ResourceDictionary:
<SolidColorBrush x:Key="Item.MouseOver.Background" Color="#1F26A0DA"/>
<SolidColorBrush x:Key="Item.MouseOver.Border" Color="#a826A0Da"/>
<SolidColorBrush x:Key="Item.SelectedInactive.Background" Color="#3DDADADA"/>
<SolidColorBrush x:Key="Item.SelectedInactive.Border" Color="#FFDADADA"/>
<SolidColorBrush x:Key="Item.SelectedActive.Background" Color="#3D26A0DA"/>
<SolidColorBrush x:Key="Item.SelectedActive.Border" Color="#FF26A0DA"/>
<Style x:Key="ListViewItemStyle1" TargetType="{x:Type ListViewItem}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Padding" Value="4,1"/>
<Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="{StaticResource Item.MouseOver.Background}"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Item.MouseOver.Border}"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelectionActive" Value="False"/>
<Condition Property="IsSelected" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="{StaticResource Item.SelectedInactive.Background}"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Item.SelectedInactive.Border}"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelectionActive" Value="True"/>
<Condition Property="IsSelected" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="{StaticResource Item.SelectedActive.Background}"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Item.SelectedActive.Border}"/>
</MultiTrigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="TextElement.Foreground" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Notice that the first 6 tags (SolidColorBrush) have the references to the colors according to the state of the ListViewItem.
From here, you can take 2 paths, change the SolidColorBrush Color to whatever you want to, in your case Transparent OR remove the Triggers altogether (not recommended).
When you're done, set the Style property of your ListBoxItem to the x:Key you named. In the code the name is x:Key="ListViewItemStyle1".
I hope that this guide you!

We Keep Coding

C# (C-Sharp) is a programming language developed by Microsoft that runs on the .NET Framework.

Checkable MenuItem appearing like ToggleButton in C# WPF - c#

Related

Connecting The ComboBox Popup Border to Main ComboBox Border

C# WPF - Custom Menu Item Background on Hover

How to properly fire the click event in a contextmenu in WPF

How to change Datagrid row background when clicking on togglebutton inside rowheader?

Disable Control's Selection Background Effect in WPF

Categories

Resources