2

I am have made the following usercontrol, and all works well except the 2 Background setter properties with value transparent for both isMouseOver and IsSelected that do nothing..

<UserControl.Resources> <DataTemplate x:Key="DeviceItemTemplate"> <Border Padding="10,5" Margin="10" BorderThickness="4" BorderBrush="Green" CornerRadius="20" Height="150" Width="150"> <StackPanel Orientation="Vertical"> <TextBox Name="screenNameTextBox" Margin="10" Height="20" Text="{Binding Name}" /> <TextBox Margin="10" Height="20" Text="{Binding Location}" /> </StackPanel> </Border> </DataTemplate> <DataTemplate x:Key="DeviceItemTemplateSelected"> <Border Padding="10,5" Margin="10" BorderThickness="4" BorderBrush="Orange" CornerRadius="20" Height="150" Width="150" > <StackPanel Orientation="Vertical" > <TextBox Name="screenNameTextBox" Margin="10" Height="20" Text="{Binding Name}" /> <TextBox Margin="10" Height="20" Text="{Binding Location}" /> </StackPanel> </Border> </DataTemplate> <Style TargetType="{x:Type ListBoxItem}" x:Key="DeviceContainerStyle"> <Setter Property="ContentTemplate" Value="{DynamicResource DeviceItemTemplate}"/> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True" > <Setter Property="BorderThickness" Value="0" /> <Setter Property="Background" Value="Transparent" /> </Trigger> <Trigger Property="IsSelected" Value="True"> <Setter Property="ContentTemplate" Value="{DynamicResource DeviceItemTemplateSelected}"/> <Setter Property="BorderThickness" Value="0" /> <Setter Property="Background" Value="Transparent" /> </Trigger> </Style.Triggers> </Style> </UserControl.Resources> <Border Grid.Column="0" Margin="10" BorderBrush="Silver" BorderThickness="1"> <ListBox ItemsSource="{Binding Devices, UpdateSourceTrigger=PropertyChanged}" SelectedItem="{Binding SelectedScreen, Mode=TwoWay}" ItemContainerStyle="{StaticResource DeviceContainerStyle}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" > <ListBox.ItemsPanel> <ItemsPanelTemplate> <WrapPanel IsItemsHost="True" Orientation="Horizontal" /> </ItemsPanelTemplate> </ListBox.ItemsPanel> </ListBox> </Border>

This is how it looks

enter image description here

I also tried white, but got same results. I cannot get rid of this blue background.

What am I overlooking please?


-----After receiving mm8 answer-----

Placed all his code in a resource dictionary, made some changes to the solidcolorbrush and BorderThickness, and modified the style section from previous to:

<Style BasedOn="{StaticResource ListBoxItemSSDS}" TargetType="{x:Type ListBoxItem}" x:Key="DeviceContainerStyle"> <Setter Property="ContentTemplate" Value="{DynamicResource DeviceItemTemplate}"/> <Style.Triggers> <Trigger Property="IsSelected" Value="True"> <Setter Property="ContentTemplate" Value="{DynamicResource DeviceItemTemplateSelected}"/> </Trigger> </Style.Triggers> </Style>
Improve this question

1 Answer 1

Reset to default
1

You need to define a custom ControlTemplate for the ListBoxItem to be able to the background of it when the IsMouseOver and IsSelected properties are set.

You can right-click on a ListBoxItem in design mode in Visual Studio or in Blend and choose Edit Template->Edit a Copy to copy the default template into your XAML markup and then edit it as per your requirements.

Here is what it looks like and the resources that are involved:

<Style x:Key="FocusVisual"> <Setter Property="Control.Template"> <Setter.Value> <ControlTemplate> <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/> </ControlTemplate> </Setter.Value> </Setter> </Style> <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="ListBoxItemStyle1" TargetType="{x:Type ListBoxItem}"> <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 ListBoxItem}"> <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>

You may for example change the Color of the Item.MouseOver.Background and Item.SelectedActive.Background resources.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.