GridViewColumn.CellTemplate with TextBox not working with ListView.ItemContainerStyle - c#

I have a ListView like this:
<ListView ItemsSource="{Binding Components}"
BorderThickness="0"
Margin="0,2,0,0"
HorizontalAlignment="Stretch"
MinHeight="150"
SelectionMode="Single"
<ListView.View>
<GridView>
<GridViewColumn Header="Component Name">
<GridViewColumn.CellTemplate>
<DataTemplate DataType="{x:Type viewModels:ComponentViewModel}">
<TextBox Text="{Binding Name}"
Style="{StaticResource TextBoxInListViewStyle}">
</TextBox>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
This renders like shown here:
As you can see, TextBox is used (I can select text), but the ListViewItemContainer gives me the glassy selection look which I don't want.
Then I have defined a ItemContainerStyle (ListViewItemStyle) for my ListView which is used like that (7th row):
<ListView ItemsSource="{Binding Components}"
BorderThickness="0"
Margin="0,2,0,0"
HorizontalAlignment="Stretch"
MinHeight="150"
SelectionMode="Single"
ItemContainerStyle="{StaticResource ListViewItemStyle}"
<ListView.View>
<GridView>
<GridViewColumn Header="Component Name">
<GridViewColumn.CellTemplate>
<DataTemplate DataType="{x:Type viewModels:ComponentViewModel}">
<TextBox Text="{Binding Name}"
Style="{StaticResource TextBoxInListViewStyle}">
</TextBox>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
Here is my ListViewItemStyle:
<Style x:Key="ListViewItemStyle"
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}"
ContentTemplate="{TemplateBinding ContentTemplate}" />
</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>
This gives me the selection look I want. But unfortunately now my TextBox template from the CellTemplate is not working anymore and the data binding isn't working either:
Happy new year!

I solved it!
Instead of using a ContentPresenter in my Style I had to use a GridRowPresenter!
<Style x:Key="ListViewItemStyle"
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">
<GridViewRowPresenter 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>
Then it looks like this:

Related

InvalidOperationException - 'Template' property cannot be set in the current element's Template

I'm trying to override the default ListviewItem in ListView with my custom own, so i used GetContainerForItemOverride(). It worked as expected, but when i try to override the default template it throw the following exception:
InvalidOperationException: ''Template' property cannot be set in the current element's Template'
Am i missing anything here?
<Style TargetType="{x:Type local:StockViewItem}">
<Setter Property="Background" Value="{x:Null}" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="MinHeight" Value="60px" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:StockViewItem}">
<Grid Background="Transparent">
<Border
x:Name="ContentHost"
Margin="0"
Padding="{TemplateBinding Padding}"
Background="{TemplateBinding DefaultBackground}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}">
<Grid>
<GridViewRowPresenter x:Name="gridrowPresenter" Content="{TemplateBinding Property=ContentControl.Content}" />
<ContentPresenter
x:Name="contentPresenter"
Content="{TemplateBinding Property=ContentControl.Content}"
Visibility="Collapsed" />
</Grid>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="GridView.ColumnCollection" Value="{x:Null}">
<Setter TargetName="contentPresenter" Property="Visibility" Value="Visible" />
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="ContentHost" Property="Background" Value="{Binding RelativeSource={RelativeSource AncestorType=local:StockViewItem}, Path=ActiveBackground, Mode=TwoWay}" />
<Setter Property="Template" Value="{StaticResource SelectedTemplate}" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True" />
</MultiTrigger.Conditions>
<Setter Property="Cursor" Value="Hand" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="False" />
<Condition Property="IsMouseOver" Value="True" />
</MultiTrigger.Conditions>
<Setter TargetName="ContentHost" Property="Background" Value="{Binding RelativeSource={RelativeSource AncestorType=local:StockViewItem}, Path=HoverBackground, Mode=TwoWay}" />
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
As noted by Clemens, i had the Template setter in a trigger inside the Template itself instead of the Style triggers.

WPF Listbox. Style does not work correcty

I've a problem with a WPF ListBox ( See code bellow ). I'm trying to change the background and foreground for the listBox items when the mouse is over or when the item is selected but it doesn't work and I don't know why.
<ListBox x:Name="ListBoxSnapshots" ItemsSource="{Binding DevicesImageList}" SelectedIndex="{Binding WebcamSelected}" BorderThickness="0" SelectionMode="Single" HorizontalContentAlignment="Left" VerticalContentAlignment="Stretch" SelectionChanged="ListBoxSnapshots_SelectionChanged" ScrollViewer.VerticalScrollBarVisibility="Disabled" >
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#FFBCBCBC"/>
<Setter Property="Foreground" Value="Black"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Background" Value="#FFD3D3D3"/>
<Setter Property="Foreground" Value="Black"/>
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="#FFD3D3D3"/>
<Setter Property="Foreground" Value="Black"/>
</Trigger>
<Trigger Property="IsSelected" Value="false">
<Setter Property="Background" Value="White"/>
<Setter Property="Foreground" Value="Black"/>
</Trigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderThickness="2" BorderBrush="DarkGray">
<StackPanel Orientation="Horizontal">
<Image Source="{Binding Path=theImage}" Stretch="Fill" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Width="142" Height="80"/>
<Canvas Width="142" Height="80" Margin="-142,0,0,0">
<Image Source="/MyApp;component/Images/snapshot-whitetriangle.png" Stretch="Fill" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
<Label FontSize="8" Content="{Binding Path=theImageIndex}" Foreground="DarkGray" FontWeight="DemiBold" Canvas.Top="61" Canvas.Left="110" HorizontalAlignment="Center" VerticalAlignment="Top" Width="34" Height="24" VerticalContentAlignment="Top" HorizontalContentAlignment="Right" />
</Canvas>
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True" Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
My listBox looks like the following picture.
The border of the Item selected has not the color that I have applied using Style.
Thanks,
Well, unfortunately it's not so easy... You need to change default ControlTemplate of ListBoxItem. Basing on this answer I've tried to make it look as i thought you wanted it to look. The most important elements are in <Setter Property="Template"> setter.
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Padding" Value="4,1" />
<Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment,
RelativeSource={RelativeSource FindAncestor,
AncestorLevel=1,
AncestorType={x:Type ItemsControl}}}" />
<Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment,
RelativeSource={RelativeSource FindAncestor,
AncestorLevel=1,
AncestorType={x:Type ItemsControl}}}" />
<Setter Property="Background"
Value="Transparent" />
<Setter Property="BorderBrush"
Value="Transparent" />
<Setter Property="BorderThickness"
Value="1" />
<Setter Property="FocusVisualStyle">
<Setter.Value>
<Style>
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="2"
SnapsToDevicePixels="True"
Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"
StrokeDashArray="1 2"
StrokeThickness="1" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border x:Name="Bd"
Background="White"
BorderBrush="DarkGray"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}"
SnapsToDevicePixels="True">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Content}"
ContentStringFormat="{TemplateBinding ContentStringFormat}"
ContentTemplate="{TemplateBinding ContentTemplate}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Border>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver"
Value="True" />
</MultiTrigger.Conditions>
<Setter TargetName="Bd"
Property="Background"
Value="#FFBCBCBC" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelectionActive"
Value="False" />
<Condition Property="IsSelected"
Value="True" />
</MultiTrigger.Conditions>
<Setter TargetName="Bd"
Property="Background"
Value="#FFD3D3D3" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelectionActive"
Value="True" />
<Condition Property="IsSelected"
Value="True" />
</MultiTrigger.Conditions>
<Setter TargetName="Bd"
Property="Background"
Value="#FFD3D3D3" />
</MultiTrigger>
<Trigger Property="IsEnabled"
Value="False">
<Setter TargetName="Bd"
Property="TextElement.Foreground"
Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Remove glassy highlight listview selected and mouse over items

I am personalizing the style of my listview,
but there is a glassy effect I did not manage to remove...
Here is an image of my listview with empty data
The first orange element is the header, then the selected item and then a mouseover item.
I try to get everything as the header flat and mat.
Anyone knows what to do? I tryed severals things ...
Edit : Add XAML code
The listview :
<ListView Style="{DynamicResource ListViewStyle1}" ItemContainerStyle="{DynamicResource ListViewItemStyle1}" x:Name="AffairesList" Margin="0,0,0,0" ItemsSource="{Binding affaires.Affaires}" MouseDoubleClick="AffairesList_MouseDoubleClick" AlternationCount="2" >
<ListView.View>
<GridView>
<GridViewColumn Header="ID" DisplayMemberBinding="{Binding Path=ID}" />
<GridViewColumn Header="Nom" DisplayMemberBinding="{Binding Path=name}" />
</GridView>
</ListView.View>
</ListView>
ListViewItemStyle1 :
<Style x:Key="ListViewItemStyle1" TargetType="{x:Type ListViewItem}">
<Setter Property="Background" Value="#FFEBEBEB"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="Height" Value="40"/>
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true" />
<Condition Property="Selector.IsSelectionActive" Value="true" />
</MultiTrigger.Conditions>
<Setter Property="Background" Value="#FFFFA200" />
</MultiTrigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="#FFFFA200"/>
</Trigger>
</Style.Triggers>
</Style>
ListViewStyle1 (I suppose I have to modify the Themes:ListBoxChrome part) :
<Style x:Key="ListViewStyle1" TargetType="{x:Type ListView}">
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
<Setter Property="BorderBrush" Value="{StaticResource ListBorder}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Foreground" Value="#FF042271"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
<Setter Property="ScrollViewer.PanningMode" Value="Both"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListView}">
<Themes:ListBoxChrome x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderFocused="{TemplateBinding IsKeyboardFocusWithin}" SnapsToDevicePixels="true">
<ScrollViewer Padding="{TemplateBinding Padding}" Style="{DynamicResource {x:Static GridView.GridViewScrollViewerStyleKey}}">
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</ScrollViewer>
</Themes:ListBoxChrome>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsGrouping" Value="true"/>
<Condition Property="VirtualizingPanel.IsVirtualizingWhenGrouping" Value="false"/>
</MultiTrigger.Conditions>
<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Using Styles with HierarchicalDataTemplate with Caliburn.Micro and MahApps frameworks

In the following example I copy pasted the full style of MenuItem into my UserControll just to add the property
<Setter Property="cal:Message.Attach" Value="MenuEntryClicked($dataContext)" />
The reason for doing it was that I needed to attach a callback to my MenuItems such my viewmodels can do actions based on the clicks. Are there any other way where I could have achieved the same thing?
I tryed using the BasedOn property and creating a inhered style. Problem was that I am using the VisualStudio Theme for mahapps and the style for MenuItem is created with no name/key in the following file:
https://github.com/MahApps/MahApps.Metro/blob/master/MahApps.Metro/Styles/VS/Menu.xaml
<Menu Grid.Column="0" SnapsToDevicePixels="True" Margin="2,0,0,0" x:Name="Plugins" >
<Menu.Resources>
<HierarchicalDataTemplate ItemsSource="{Binding MenuItems}" DataType="{x:Type sap:MenuItemViewModel}">
<ContentPresenter Content="{Binding Caption}" RecognizesAccessKey="True" >
</ContentPresenter>
</HierarchicalDataTemplate>
</Menu.Resources>
<Style TargetType="{x:Type MenuItem}">
<Setter Property="cal:Message.Attach" Value="MenuEntryClicked($dataContext)" />
<Setter Property="Foreground"
Value="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type Menu}}}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type MenuItem}">
<!--Border 1-->
<Border x:Name="Border"
Background="Transparent"
BorderBrush="Transparent"
BorderThickness="1"
SnapsToDevicePixels="False">
<Grid x:Name="Grid">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="Col0"
MinWidth="17"
Width="Auto"
SharedSizeGroup="MenuItemIconColumnGroup" />
<ColumnDefinition Width="Auto"
SharedSizeGroup="MenuTextColumnGroup" />
<ColumnDefinition Width="Auto"
SharedSizeGroup="MenuItemIGTColumnGroup" />
<ColumnDefinition x:Name="Col3"
Width="14" />
</Grid.ColumnDefinitions>
<ContentPresenter Grid.Column="0"
x:Name="Icon"
VerticalAlignment="Center"
ContentSource="Icon" />
<ContentPresenter Grid.Column="1"
Margin="{TemplateBinding Padding}"
x:Name="HeaderHost"
RecognizesAccessKey="True"
ContentSource="Header"
VerticalAlignment="Center" />
<ContentPresenter Grid.Column="2"
Margin="8,1,8,1"
x:Name="IGTHost"
ContentSource="InputGestureText"
VerticalAlignment="Center" />
<Grid Grid.Column="3"
Margin="4,0,6,0"
x:Name="ArrowPanel"
VerticalAlignment="Center">
<Path x:Name="ArrowPanelPath"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Fill="{TemplateBinding Foreground}"
Data="M0,0 L0,8 L4,4 z" />
</Grid>
<Popup IsOpen="{Binding Path=IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}"
Placement="Right"
HorizontalOffset="-1"
x:Name="SubMenuPopup"
Focusable="false"
PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}"
AllowsTransparency="True">
<Grid Margin="0,0,5,5">
<!--Border 2-->
<Border x:Name="SubMenuBorder"
BorderBrush="{StaticResource MenuSeparatorBorderBrush}"
BorderThickness="1"
Background="{StaticResource SubmenuItemBackground}"
SnapsToDevicePixels="True">
<Grid x:Name="SubMenu"
Grid.IsSharedSizeScope="True"
Margin="2">
<StackPanel IsItemsHost="True"
KeyboardNavigation.DirectionalNavigation="Cycle" />
</Grid>
<Border.Effect>
<DropShadowEffect ShadowDepth="2"
Color="Black" />
</Border.Effect>
</Border>
<!--Border 3-->
<Border Margin="1,0,0,0"
x:Name="TransitionBorder"
Width="0"
Height="2"
VerticalAlignment="Top"
HorizontalAlignment="Left"
Background="{StaticResource SubmenuItemBackground}"
SnapsToDevicePixels="False"
BorderThickness="1"
BorderBrush="{StaticResource SubmenuItemBackground}" />
</Grid>
</Popup>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Role"
Value="TopLevelHeader">
<Setter Property="Padding"
Value="6,0,6,2" />
<Setter TargetName="SubMenuPopup"
Property="Placement"
Value="Bottom" />
<Setter TargetName="Col0"
Property="MinWidth"
Value="0" />
<Setter TargetName="Col3"
Property="Width"
Value="Auto" />
<Setter TargetName="Icon"
Property="Visibility"
Value="Collapsed" />
<Setter TargetName="IGTHost"
Property="Visibility"
Value="Collapsed" />
<Setter TargetName="ArrowPanel"
Property="Visibility"
Value="Collapsed" />
<Setter TargetName="SubMenuBorder"
Property="BorderThickness"
Value="1,1,1,1" />
<Setter TargetName="SubMenu"
Property="Margin"
Value="2,3,2,2" />
<Setter TargetName="TransitionBorder"
Property="Width"
Value="{Binding ActualWidth, ElementName=Grid}" />
</Trigger>
<Trigger Property="Role"
Value="TopLevelItem">
<Setter Property="Padding"
Value="6,0,6,2" />
<Setter TargetName="Col0"
Property="MinWidth"
Value="0" />
<Setter TargetName="Col3"
Property="Width"
Value="Auto" />
<Setter TargetName="Icon"
Property="Visibility"
Value="Collapsed" />
<Setter TargetName="IGTHost"
Property="Visibility"
Value="Collapsed" />
<Setter TargetName="ArrowPanel"
Property="Visibility"
Value="Collapsed" />
</Trigger>
<Trigger Property="Role"
Value="SubmenuHeader">
<Setter Property="DockPanel.Dock"
Value="Top" />
<Setter Property="Padding"
Value="10,3,0,3" />
<Setter TargetName="Border"
Property="MinHeight"
Value="22" />
<Setter TargetName="Border"
Property="Background"
Value="{StaticResource SubmenuItemBackground}" />
</Trigger>
<Trigger Property="Role"
Value="SubmenuItem">
<Setter Property="DockPanel.Dock"
Value="Top" />
<Setter Property="Padding"
Value="10,3,0,3" />
<Setter TargetName="Border"
Property="MinHeight"
Value="22" />
<Setter TargetName="ArrowPanel"
Property="Visibility"
Value="Collapsed" />
<Setter TargetName="Border"
Property="Background"
Value="{StaticResource SubmenuItemBackground}" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsHighlighted"
Value="true" />
<Condition Property="Role"
Value="TopLevelHeader" />
</MultiTrigger.Conditions>
<Setter TargetName="Border"
Property="Background"
Value="{StaticResource MenuItemHighlightedBackground}" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsHighlighted"
Value="true" />
<Condition Property="Role"
Value="TopLevelItem" />
</MultiTrigger.Conditions>
<Setter TargetName="Border"
Property="Background"
Value="{StaticResource MenuItemHighlightedBackground}" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsHighlighted"
Value="true" />
<Condition Property="Role"
Value="SubmenuHeader" />
</MultiTrigger.Conditions>
<Setter TargetName="Border"
Property="Background"
Value="{StaticResource SubmenuItemBackgroundHighlighted}" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsHighlighted"
Value="true" />
<Condition Property="Role"
Value="SubmenuItem" />
</MultiTrigger.Conditions>
<Setter TargetName="Border"
Property="Background"
Value="{StaticResource SubmenuItemBackgroundHighlighted}" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSubmenuOpen"
Value="true" />
<Condition Property="Role"
Value="TopLevelHeader" />
</MultiTrigger.Conditions>
<Setter TargetName="Border"
Property="Background"
Value="{StaticResource SubmenuItemBackground}" />
<Setter TargetName="Border"
Property="BorderBrush"
Value="{StaticResource MenuSeparatorBorderBrush}" />
<Setter TargetName="Border"
Property="BorderThickness"
Value="1,1,1,0" />
</MultiTrigger>
<Trigger Property="IsSubmenuOpen"
Value="true">
<Setter TargetName="ArrowPanelPath"
Property="Fill"
Value="{StaticResource BackgroundSelected}" />
</Trigger>
<Trigger Property="IsSuspendingPopupAnimation"
Value="true">
<Setter TargetName="SubMenuPopup"
Property="PopupAnimation"
Value="None" />
</Trigger>
<Trigger Property="Icon"
Value="{x:Null}">
<Setter TargetName="Icon"
Property="Visibility"
Value="Collapsed" />
</Trigger>
<Trigger Property="IsEnabled"
Value="False">
<Setter Property="Foreground"
Value="{StaticResource MenuDisabledForeground}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Menu>
here are two workarounds, before the issue is fixed at mahapps.metro
1) copy the whole style and give it a key and use this key in your code
2) or just use the menu style where you need it.
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/VS/Menu.xaml" />
</ResourceDictionary.MergedDictionaries>
hope that helps

Setting Background Color or WPF (4.0) ListBox - Windows 8

I am attempting to set the background color of a selected ListBoxItem to be white rather than the system color. I have read what I could find here on SO and have followed, or believed to have followed the recommendations there (Change background color for selected ListBox item, WPF How to change the listbox selected item text color when the list box loses focus, Change selected and unfocused Listbox style to not be grayed out, and others).
All seem to solve the problem by setting the HighlightBrush and ControlBrush to Transparent for the selected item. I have the following XAML and it sets the font color properly, but the backgroound is the default transparent blue regardless of the brush settings. I am still a bit of a WPF noob, so I must be missing something simple here.
<ListBox Width="Auto" Height="Auto" Grid.Column="0" BorderThickness="0" Background="#FFF3F3F3" xmlns:sys="clr-namespace:System;assembly=mscorlib">
<ListBox.ItemsSource>
<x:Array Type="{x:Type sys:String}">
<sys:String>String 1</sys:String>
<sys:String>String 2</sys:String>
<sys:String>String 3</sys:String>
<sys:String>String 4</sys:String>
</x:Array>
</ListBox.ItemsSource>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem" BasedOn="{StaticResource {x:Type ListBoxItem}}">
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent" />
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent" />
</Style.Resources>
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="FontSize" Value="16"/>
<Setter Property="Foreground" Value="#999999"/>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True" >
<Setter Property="Background" Value="White" />
<Setter Property="Foreground" Value="Black" />
</Trigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" HorizontalAlignment="Right" Margin="0,0,8,0" Background="Transparent"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I would appreciate any nudges in the right direction.
EDIT:
After reading the first answer that it worked for them with a slight change, I took the application that I have been developing on my Windows 8 machine and executed it in a Windows 7 VM and it worked as expected. Any ideas on what needs to change to get this to work on a Windows 8 machine as well as a Windows 7?
Those posts are getting outdated for Windows-8.
In Windows-8 for some reason Microsoft don't want people editing their Default Style's so easily or something with a Brush over-ride.
ListBoxItem default Style from VS has this for selection triggers:
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelectionActive"
Value="False" />
<Condition Property="IsSelected"
Value="True" />
</MultiTrigger.Conditions>
<Setter TargetName="Bd"
Property="Background"
Value="#3DDADADA" />
<Setter TargetName="Bd"
Property="BorderBrush"
Value="#FFDADADA" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelectionActive"
Value="True" />
<Condition Property="IsSelected"
Value="True" />
</MultiTrigger.Conditions>
<Setter TargetName="Bd"
Property="Background"
Value="#3D26A0DA" />
<Setter TargetName="Bd"
Property="BorderBrush"
Value="#FF26A0DA" />
</MultiTrigger>
Triggers for Selection state no longer are applying brushes we can over-ride easily but are static colors. Hence to modify it you are going to need to derive the template and modify the trigger there. to White
This is the full Style given by VS2012 Windows-8 for ListBoxItem
<Style x:Key="ListBoxItemStyle1"
TargetType="{x:Type ListBoxItem}">
<Setter Property="SnapsToDevicePixels"
Value="True" />
<Setter Property="Padding"
Value="4,1" />
<Setter Property="HorizontalContentAlignment"
Value="{Binding HorizontalContentAlignment,
RelativeSource={RelativeSource FindAncestor,
AncestorLevel=1,
AncestorType={x:Type ItemsControl}}}" />
<Setter Property="VerticalContentAlignment"
Value="{Binding VerticalContentAlignment,
RelativeSource={RelativeSource FindAncestor,
AncestorLevel=1,
AncestorType={x:Type ItemsControl}}}" />
<Setter Property="Background"
Value="Transparent" />
<Setter Property="BorderBrush"
Value="Transparent" />
<Setter Property="BorderThickness"
Value="1" />
<Setter Property="FocusVisualStyle">
<Setter.Value>
<Style>
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="2"
SnapsToDevicePixels="True"
Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"
StrokeDashArray="1 2"
StrokeThickness="1" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border x:Name="Bd"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}"
SnapsToDevicePixels="True">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Content}"
ContentStringFormat="{TemplateBinding ContentStringFormat}"
ContentTemplate="{TemplateBinding ContentTemplate}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Border>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver"
Value="True" />
</MultiTrigger.Conditions>
<Setter TargetName="Bd"
Property="Background"
Value="#1F26A0DA" />
<Setter TargetName="Bd"
Property="BorderBrush"
Value="#A826A0DA" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelectionActive"
Value="False" />
<Condition Property="IsSelected"
Value="True" />
</MultiTrigger.Conditions>
<Setter TargetName="Bd"
Property="Background"
Value="#3DDADADA" />
<Setter TargetName="Bd"
Property="BorderBrush"
Value="#FFDADADA" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelectionActive"
Value="True" />
<Condition Property="IsSelected"
Value="True" />
</MultiTrigger.Conditions>
<Setter TargetName="Bd"
Property="Background"
Value="#3D26A0DA" />
<Setter TargetName="Bd"
Property="BorderBrush"
Value="#FF26A0DA" />
</MultiTrigger>
<Trigger Property="IsEnabled"
Value="False">
<Setter TargetName="Bd"
Property="TextElement.Foreground"
Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
if you modify those triggers to:
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelectionActive"
Value="False" />
<Condition Property="IsSelected"
Value="True" />
</MultiTrigger.Conditions>
<Setter TargetName="Bd"
Property="Background"
Value="White" />
<Setter TargetName="Bd"
Property="BorderBrush"
Value="White" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelectionActive"
Value="True" />
<Condition Property="IsSelected"
Value="True" />
</MultiTrigger.Conditions>
<Setter TargetName="Bd"
Property="Background"
Value="White" />
<Setter TargetName="Bd"
Property="BorderBrush"
Value="White" />
</MultiTrigger>
you should have your issue sorted.
Adding the following trigger to my Item DataTemplate, worked for Windows 10:
<DataTemplate x:Key="MyItemTemplate">
<Border Name="Border" Background="Transparent" BorderBrush="LightGray" BorderThickness="0,1,0,0" Padding="0">
<TextBlock Text="{Binding Text}" HorizontalAlignment="Left" FontWeight="Medium" />
</Border>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}}, Path=IsSelected}" Value="True">
<Setter TargetName="Border" Property="Background" Value="SkyBlue"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
So you simply want to make the background of the selected item white?
Your code minus the ControlBrushKey setting works for me:
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="White" />
</Style.Resources>

Categories