Style all ListViewItem in UWP app - xaml

I wanted to change the selected background color of an ListViewItem. Now I noticed, that the default value doesn't get overridden.
<Style TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<ListViewItemPresenter
ContentTransitions="{TemplateBinding ContentTransitions}"
SelectionCheckMarkVisualEnabled="True"
CheckBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
CheckBoxBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}"
DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
FocusBorderBrush="{ThemeResource SystemControlForegroundAltHighBrush}"
FocusSecondaryBorderBrush="{ThemeResource SystemControlForegroundBaseHighBrush}"
PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"
PointerOverBackground="{ThemeResource SystemControlHighlightListLowBrush}"
PointerOverForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}"
SelectedBackground="{StaticResource YellowBrush}"
SelectedForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}"
SelectedPointerOverBackground="{ThemeResource SystemControlHighlightListAccentMediumBrush}"
PressedBackground="{ThemeResource SystemControlHighlightListMediumBrush}"
SelectedPressedBackground="{ThemeResource SystemControlHighlightListAccentHighBrush}"
DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
ContentMargin="{TemplateBinding Padding}"
CheckMode="Inline"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
In this post it is mentioned, that one has to override the ItemContainerStyle property. But this can only be done on the ListView itself.
Is there no option to overwrite the style for all ListViewItem in the app?
PS: One could overwrite the brushes like e.g.
<SolidColorBrush x:Key="SystemControlHighlightListAccentLowBrush" Color="Yellow" />
but I only want to style the ListViewItem and not affect other styles.
Edit:
Because I got
Visual Studio requires a newer version of WIndows to display this content. Please update to Windows 10 Anniversary Edition (10.0.14393.0) or later.
I set the target version to 10240. This is what I found in the App.xaml after creating the copy as stated by Thomas Schneiter:
<Application.Resources>
<Style TargetType="ListViewItem">
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
<Setter Property="TabNavigation" Value="Local"/>
<Setter Property="IsHoldingEnabled" Value="True"/>
<Setter Property="Padding" Value="12,0,12,0"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}"/>
<Setter Property="MinHeight" Value="{ThemeResource ListViewItemMinHeight}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<ListViewItemPresenter
CheckBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
ContentMargin="{TemplateBinding Padding}"
CheckMode="Inline"
ContentTransitions="{TemplateBinding ContentTransitions}"
CheckBoxBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}"
DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
FocusBorderBrush="{ThemeResource SystemControlForegroundAltHighBrush}"
FocusSecondaryBorderBrush="{ThemeResource SystemControlForegroundBaseHighBrush}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
PointerOverForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}"
PressedBackground="{ThemeResource SystemControlHighlightListMediumBrush}"
PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"
PointerOverBackground="{ThemeResource SystemControlHighlightListLowBrush}"
ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
SelectedPressedBackground="{ThemeResource SystemControlHighlightListAccentHighBrush}"
SelectionCheckMarkVisualEnabled="True"
SelectedForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}"
SelectedPointerOverBackground="{ThemeResource SystemControlHighlightListAccentMediumBrush}"
SelectedBackground="{ThemeResource SystemControlHighlightListAccentLowBrush}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
Now I tried to override SelectedBackground, but the changes don't get applied.

You can right click on any ListView in the Designer View and select Edit Additional Templates -> Edit Generated Item Container (Item Container Style) -> Edit a Copy.
Then select Apply to all and Application to automatically insert a global copy into the app.xaml.

Related

Set background color for unselected ListViewItem for windows 8.1 app

I am trying to style a windows 8.1 ListView to show a background colour for unselected items in a listview.
This is my style in app.xaml file as a resource:
<Style x:Key="ListViewItemStyle1" TargetType="ListViewItem">
<!-- Other style here -->
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<ListViewItemPresenter CheckHintBrush="{ThemeResource ListViewItemCheckHintThemeBrush}"
CheckBrush="{ThemeResource ListViewItemCheckThemeBrush}"
ContentMargin="4" ContentTransitions="{TemplateBinding ContentTransitions}"
CheckSelectingBrush="{ThemeResource ListViewItemCheckSelectingThemeBrush}"
DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}"
DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
FocusBorderBrush="{ThemeResource ListViewItemFocusBorderThemeBrush}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
Padding="{TemplateBinding Padding}" PointerOverBackgroundMargin="1"
PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"
PointerOverBackground="{ThemeResource ListViewItemPointerOverBackgroundThemeBrush}"
ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
SelectedPointerOverBorderBrush="#FF2a63a8"
SelectionCheckMarkVisualEnabled="True"
SelectedForeground="White"
SelectedPointerOverBackground="#FF4979b3"
SelectedBorderThickness="{ThemeResource ListViewItemCompactSelectedBorderThemeThickness}"
SelectedBackground="#FF2a5fa3"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
</ListViewItemPresenter>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
With reference to attached image, when I set the background color here:
<Setter Property="Background" Value="LightGray"/>
I get the corresponding output as "LightGray background" (column 2)
When I set it to transparent, I get it as "Transparent Background" (column 1)
BUT I want it as what's shown in 3rd column "What the UI should be like"
I have tried everything. Even set the background colour via Model property, but it still looks like as shown in 2nd column.
Any help appreciated.

Remove padding on ListViewItem inside a flyout

I have the following flyout that i show when i press a button
<Flyout x:Name="saveDiscardMenu" Placement="Bottom" >
<Grid >
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<ListView Name="SaveDiscardList" ItemClick="SaveDiscardList_ItemClick" >
<ListViewItem Style="{StaticResource ListViewItemPDF}">
<TextBlock x:Uid="SaveChanges" Name="saveChanges" Grid.Row="0" Tapped="saveChanges_Tapped"></TextBlock>
</ListViewItem>
<ListViewItem Style="{StaticResource ListViewItemPDF}">
<TextBlock x:Uid="DiscardChanges" Name="discardChanges" Grid.Row="1" Margin="0,20,0,0" Tapped="discardChanges_Tapped" ></TextBlock>
</ListViewItem>
</ListView>
</Grid>
</Flyout>
it looks like this
and i use this as my ListViewItem style
<Style TargetType="ListViewItem" x:Key="ListViewItemPDF">
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="Background" Value="Transparent"/>
<Setter Property="TabNavigation" Value="Local"/>
<Setter Property="IsHoldingEnabled" Value="True"/>
<Setter Property="Margin" Value="0,0,0,0"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
<Setter Property="Padding" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<ListViewItemPresenter
ContentTransitions="{TemplateBinding ContentTransitions}"
Padding="{TemplateBinding Padding}"
SelectionCheckMarkVisualEnabled="True"
CheckHintBrush="{ThemeResource ListViewItemCheckHintThemeBrush}"
CheckSelectingBrush="{ThemeResource ListViewItemCheckSelectingThemeBrush}"
CheckBrush="{ThemeResource ListViewItemCheckThemeBrush}"
DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}"
DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
FocusBorderBrush="{ThemeResource ListViewItemFocusBorderThemeBrush}"
PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"
PointerOverBackground="{StaticResource MyLightBlue}"
SelectedBorderThickness="{ThemeResource ListViewItemCompactSelectedBorderThemeThickness}"
SelectedBackground="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}"
SelectedForeground="{ThemeResource ListViewItemSelectedForegroundThemeBrush}"
SelectedPointerOverBackground="{ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush}"
SelectedPointerOverBorderBrush="{ThemeResource ListViewItemSelectedPointerOverBorderThemeBrush}"
DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
PointerOverBackgroundMargin="1"
ContentMargin="4" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
What i would like to know is how to remove the left and right padding each items appears to have, i've tried setting the margins and padding to 0 but it allways seem to have a space between the sides of the items and the edge of the flyout.
Since I just got poked for my bad habit of so many quickie answers in comments...
Looking at the structure of the default control style template for FlyoutPresenter we notice there's a padding bound to a resource of;
<Thickness x:Key="FlyoutContentThemePadding">12,11,12,12</Thickness>
Which is often the culprit when you notice your Flyout content getting a bit squished. While yes ListView and other ItemsControl variants generally have their own templated Paddings/Margins that can interfere, the more we embed something into additional templated controls, the more layers there are to sort through to find our culprit.
Glad it helped. :)
Try to override Margin and Padding in ItemContainerStyle:
<ListView>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="MinWidth" Value="0"/>
</Style>
</ListView.ItemContainerStyle>
</ListView>
Might be MinWidth and MinHeight will be required to set 0 as well.

Set Full Page Height for Flyout

I want to display flyout-panel on the right side of my page and this panel must have the full height of the page.
Here is a XAML:
<Button Content="One" Grid.Column="0" Click="Button_Click_1" VerticalAlignment="Stretch" VerticalContentAlignment="Stretch" />
<Button x:Name="TestButton" Content="TestButton" Grid.Column="1" VerticalAlignment="Stretch" VerticalContentAlignment="Stretch">
<Button.Flyout>
<Flyout>
<StackPanel x:Name="FlyoutPanel" Margin="0 0 0 0">
<TextBlock>Some text</TextBlock>
<Button Click="Button_Click">Press me</Button>
</StackPanel>
</Flyout>
</Button.Flyout>
</Button>
<StackPanel x:Name="FlyoutPlacement" Grid.Column="2" Margin="0 0 0 0"/>
And here is a code to display the flyout panel on the right side of my page:
private void Button_Click_1(object sender, RoutedEventArgs e)
{
FlyoutPanel.Height = Window.Current.Bounds.Height;
FlyoutPlacement.Height = Window.Current.Bounds.Height;
TestButton.Flyout.ShowAt(FlyoutPlacement);
}
Now my flyout-panel have a vertical scrollbar and the size which is smaller then the page size. How can I remove scrollbar and set the flyout-panel the full page size?
You need to edit the default FlyoutPresenterStyle:
<SolidColorBrush x:Key="FlyoutBackgroundThemeBrush" Color="#FF000000"/>
<SolidColorBrush x:Key="FlyoutBorderThemeBrush" Color="#FFFFFFFF"/>
<x:Double x:Key="FlyoutThemeMaxHeight">718</x:Double> <!-- Change to NaN -->
<x:Double x:Key="FlyoutThemeMaxWidth">450</x:Double> <!-- Change to NaN -->
<x:Double x:Key="FlyoutThemeMinHeight">54</x:Double>
<x:Double x:Key="FlyoutThemeMinWidth">70</x:Double>
<Thickness x:Key="FlyoutBorderThemeThickness">2</Thickness>
<Thickness x:Key="FlyoutContentThemePadding">20,17,20,20</Thickness> <!-- Change to 0 -->
<Style x:Key="FlyoutStyle" TargetType="FlyoutPresenter">
<Setter Property="RequestedTheme" Value="Light" />
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Background" Value="{ThemeResource FlyoutBackgroundThemeBrush}"/>
<Setter Property="BorderBrush" Value="{ThemeResource FlyoutBorderThemeBrush}"/>
<Setter Property="BorderThickness" Value="{ThemeResource FlyoutBorderThemeThickness}"/>
<Setter Property="Padding" Value="{ThemeResource FlyoutContentThemePadding}"/>
<Setter Property="MinWidth" Value="{ThemeResource FlyoutThemeMinWidth}"/>
<Setter Property="MaxWidth" Value="{ThemeResource FlyoutThemeMaxWidth}"/>
<Setter Property="MinHeight" Value="{ThemeResource FlyoutThemeMinHeight}"/>
<Setter Property="MaxHeight" Value="{ThemeResource FlyoutThemeMaxHeight}"/>
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Auto" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" /> <!-- Change to Hidden -->
<Setter Property="ScrollViewer.ZoomMode" Value="Disabled" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="FlyoutPresenter">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ScrollViewer x:Name="ScrollViewer"
ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}"
HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
AutomationProperties.AccessibilityView="Raw">
<ContentPresenter Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The main resources for your problem are FlyoutThemeMaxHeight, FlyoutThemeMaxWidth and FlyoutContentThemePadding. You need to set the max values to a very big number like I have put it for example NaN.
Then you set it as the FlyoutPresenterStyle:
<Flyout FlyoutPresenterStyle="{StaticResource FlyoutStyle}">
Also to hide the vertical scroll bar set ScrollViewer.VerticalScrollBarVisibility to Hidden.

ListView - disable the mouse-down behavior

I have a ListView in my Windows Store app. I want it to be a static list (I'm using it because it supports virtualization, but if I should be using something else, let me know!). I've managed to disable most of the UI changes with mouse over, etc. However, one thing I've not figured out how to do is remove the click behavior. When you click on an item it shrinks a bit to give you feed back that it has been clicked. How do I turn that off?
Here is my ListView XAML:
<ListView x:Name="SlideStrip"
SelectionMode="None"
ScrollViewer.HorizontalScrollMode="Auto"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
ItemContainerStyle="{StaticResource PlainOldList}">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<local:PDFPageUserControl
Margin="0 0 5 0"
ViewModel="{Binding}"
RespectRenderingDimension="Vertical" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
The PlainOldList style is as follows:
<Style x:Key="PlainOldList" TargetType="ListViewItem">
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="TabNavigation" Value="Local"/>
<Setter Property="IsHoldingEnabled" Value="True"/>
<Setter Property="Margin" Value="0,0,0,0"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<ListViewItemPresenter x:Name="listViewItemPresenter"
CheckHintBrush="{ThemeResource ListViewItemCheckHintThemeBrush}"
CheckBrush="{ThemeResource ListViewItemCheckThemeBrush}"
ContentMargin="0"
ContentTransitions="{TemplateBinding ContentTransitions}"
CheckSelectingBrush="{ThemeResource ListViewItemCheckSelectingThemeBrush}"
DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}"
DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
FocusBorderBrush="{ThemeResource ListViewItemFocusBorderThemeBrush}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
Padding="{TemplateBinding Padding}"
PointerOverBackgroundMargin="0"
PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"
ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
SelectedPointerOverBorderBrush="{ThemeResource ListViewItemSelectedPointerOverBorderThemeBrush}"
SelectionCheckMarkVisualEnabled="True"
SelectedForeground="{ThemeResource ListViewItemSelectedForegroundThemeBrush}"
SelectedPointerOverBackground="{ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush}"
SelectedBorderThickness="{ThemeResource ListViewItemCompactSelectedBorderThemeThickness}"
SelectedBackground="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
</ListViewItemPresenter>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I'm pretty convinced what I need to do is edit the visual states for the item container style. But I'm at a complete loss as to what visual state. Clicking on them in blend never show a transform that is active. I tried setting one or two to be zero explicitly, but that failed (perhaps because I didn't know how to override a default behavior or chose the wrong state).
Any help appreciated!
See ListViewItemExpanded style with all visual states.
I removed all unnecessary
<Style TargetType="ListViewItem" x:Key="ListViewItemWithoutEffectStyle">
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="VerticalAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Border x:Name="OuterContainer" RenderTransformOrigin="0.5,0.5">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Pressed"/>
<VisualState x:Name="CheckboxPressed"/>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected" />
<VisualState x:Name="Selected"/>
<VisualState x:Name="SelectedUnfocused"/>
</VisualStateGroup>
<VisualStateGroup x:Name="DataVirtualizationStates">
<VisualState x:Name="DataAvailable" />
<VisualState x:Name="DataPlaceholder"/>
</VisualStateGroup>
<VisualStateGroup x:Name="MultiSelectStates">
<VisualState x:Name="NoMultiSelect" />
<VisualState x:Name="ListMultiSelect"/>
<VisualState x:Name="GridMultiSelect"/>
</VisualStateGroup>
<VisualStateGroup x:Name="ReorderModeStates">
<VisualState x:Name="ReorderEnabled"/>
<VisualState x:Name="Reorderable"/>
<VisualState x:Name="ReorderDisabled" />
</VisualStateGroup>
<VisualStateGroup x:Name="ReorderHintStates">
<VisualState x:Name="NoReorderHint" />
<VisualState x:Name="BottomReorderHint"/>
<VisualState x:Name="RightReorderHint"/>
<VisualState x:Name="TopReorderHint"/>
<VisualState x:Name="LeftReorderHint"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="ReorderHintContent" Background="Transparent">
<Border x:Name="ContentContainer">
<Border x:Name="ContentBorder"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<ContentPresenter x:Name="contentPresenter"
ContentTransitions="{TemplateBinding ContentTransitions}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Margin="{TemplateBinding Padding}" />
</Grid>
</Border>
</Border>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

ListBox selected item background color

Trying to make a tab control out of a listbox. If the listboxitems are just text, then it's easy to see which tab is selected, but as soon as I add an image/path as the content of the listboxitem, it no longer shows it as being selected when clicked. The only item below that shows when it is selected is the "Hello World" item. I just want the background of the tab to change color when it is selected.
<ListBox>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBoxItem>
<Canvas Width="53.3333" Height="53.3333">
<Path Width="4.22434" Height="4.224" Stretch="Fill" Fill="#FF000000" Data="..."/>
</Canvas>
</ListBoxItem>
<ListBoxItem>
<ListBoxItem.Content>
<Canvas Width="46.6667" Height="45.3333">
<Path Width="46.3232" Height="43.9357"
Canvas.Left="0.51729"
Canvas.Top="1.06295"
Stretch="Fill"
Fill="#FF000000"
Data="..."
</Canvas>
</ListBoxItem.Content>
</ListBoxItem>
<ListBoxItem Content="Hello World">
</ListBoxItem>
</ListBox>
I just did this recently for one of my apps using a ListView. It should be similar for ListBox but you might want to use ListView as they are similar and I know it works. You need to modify the style to set the SelectedBackground and SelectedPointerOverBackground colors. I set them to blue in the style below.
<Style x:Key="ListViewItemTabStyle" TargetType="ListViewItem">
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="30" />
<Setter Property="Background" Value="Transparent"/>
<Setter Property="TabNavigation" Value="Local"/>
<Setter Property="IsHoldingEnabled" Value="True"/>
<Setter Property="Margin" Value="0,0,0,0"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<ListViewItemPresenter
ContentTransitions="{TemplateBinding ContentTransitions}"
Padding="{TemplateBinding Padding}"
SelectionCheckMarkVisualEnabled="False"
CheckHintBrush="{ThemeResource ListViewItemCheckHintThemeBrush}"
CheckSelectingBrush="{ThemeResource ListViewItemCheckSelectingThemeBrush}"
CheckBrush="{ThemeResource ListViewItemCheckThemeBrush}"
DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}"
DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
FocusBorderBrush="{ThemeResource ListViewItemFocusBorderThemeBrush}"
PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"
PointerOverBackground="{ThemeResource ListViewItemPointerOverBackgroundThemeBrush}"
SelectedBorderThickness="{ThemeResource ListViewItemCompactSelectedBorderThemeThickness}"
SelectedBackground="Blue"
SelectedForeground="{ThemeResource ListViewItemSelectedForegroundThemeBrush}"
SelectedPointerOverBackground="Blue"
SelectedPointerOverBorderBrush="{ThemeResource ListViewItemSelectedPointerOverBorderThemeBrush}"
DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
PointerOverBackgroundMargin="1"
ContentMargin="4" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And then set the style for your ListView like this:
<ListView ItemContainerStyle="{StaticResource ResourceKey=ListViewItemTabStyle}" Background="Gray" SelectedIndex="0">
<ListViewItem Content="Item1"/>
<ListViewItem Content="Item2"/>
<ListViewItem Content="Item3"/>
</ListView>