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.
Related
I am currently implementing SemanticZoom for a Windows UWP app. As you may know, items will be grouped into different section (e.g. Group A, Group B, etc.)
The Group name will be the header.
I have changed the default style for SemanticZoom Group Header. Too bad I still can't figure out how to change the height of the header.
Screenshot:
The height of the header is too high for my taste
The Code for the custom SemanticZoom Style
<Style TargetType="GridViewHeaderItem">
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="Background" Value="#ff00fe"/>
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="Height" Value="10"/>
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="Margin" Value="0 10 10 0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridViewHeaderItem">
<StackPanel Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter x:Name="ContentPresenter"
Margin="{TemplateBinding Padding}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
XAML Code for the SemanticZoom
<SemanticZoom >
<SemanticZoom.ZoomedOutView>
<GridView>
...
</GridView>
</SemanticZoom.ZoomedOutView>
<SemanticZoom.ZoomedInView>
<GridView>
<GridView.ItemTemplate>
....
</GridView.ItemTemplate>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock Text='{Binding Key}' Foreground="Black" FontSize="38" />
</StackPanel>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
</SemanticZoom.ZoomedInView>
</SemanticZoom>
Looking forward to your help.
There's couple properties you should set for your custom template: MinHeight and Padding.
The default GridViewHeaderItem template can be found from C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10240.0\Generic
From there you can find the things you should change:
Here's the full default style for GridViewHeaderItem.
<!-- Default style for Windows.UI.Xaml.Controls.GridViewHeaderItem -->
<Style TargetType="GridViewHeaderItem">
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource GridViewHeaderItemThemeFontSize}" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Margin" Value="0,0,0,4"/>
<Setter Property="Padding" Value="12,8,12,0"/>
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="MinHeight" Value="{ThemeResource GridViewHeaderItemMinHeight}"/>
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridViewHeaderItem">
<StackPanel Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter x:Name="ContentPresenter"
Margin="{TemplateBinding Padding}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
<Rectangle Stroke="{ThemeResource SystemControlForegroundBaseLowBrush}"
StrokeThickness="0.5"
Height="1"
VerticalAlignment="Bottom"
HorizontalAlignment="Stretch"
Margin="12,8,12,0"/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I am using listview instead of gridview,
you have to do three adjustment
1) change minheight and height
2) change the height of grid as highlighted below
3) change the textblock font size also highlighted
<Style x:Key="MyHeaderStyle" TargetType="ListViewItem">
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="Height" Value="30" />
<Setter Property="MinHeight" Value="30" />
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="Margin" Value="0,10,10,0"/>
</Style>
and,
<SemanticZoom.ZoomedInView>
<ListView ItemsSource="{Binding Source={StaticResource Collection}}" ItemContainerStyle="{StaticResource MyHeaderStyle}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
Change the height according to your requirement currently i set
to 30 looking fine also adjust font size of textblock
<!-- Adjust grid height -->
<Grid Name="AdjustmeGrid" Height="30" Margin="0,0,10,0" Width="370">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.2*" />
<ColumnDefinition Width="0.8*" />
</Grid.ColumnDefinitions>
<!-- Adjust textblock fontsize -->
<TextBlock Name="AdjustmeTextblock" Grid.Column="1" Text="{Binding Title}" VerticalAlignment="Center" Foreground="Black" FontSize="28" />
</Grid>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock Text='{Binding Key}' Foreground="Black" FontSize="38" />
</StackPanel>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
</ListView>
</SemanticZoom.ZoomedInView>
Output
I am developing an application for Windows Phone 8.1. I am trying to edit the windows default DatePicker style. I have succeeded in adding an image in place of the DatePicker using this style
<Style x:Key="DatePickerStyle" TargetType="DatePicker">
<Setter Property="FontFamily" Value="{ThemeResource PhoneFontFamilyNormal}"/>
<Setter Property="FontSize" Value="{ThemeResource ContentControlFontSize}"/>
<Setter Property="Foreground" Value="{ThemeResource DatePickerForegroundThemeBrush}"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DatePicker">
<StackPanel x:Name="LayoutRoot" Margin="{TemplateBinding Padding}">
<ContentPresenter x:Name="HeaderContentPresenter" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Margin="0,0,0,-3" Style="{StaticResource HeaderContentPresenterStyle}" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
<Button x:Name="FlyoutButton" BorderThickness="2.5" HorizontalAlignment="Stretch" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsEnabled="{TemplateBinding IsEnabled}" Padding="6.5,0,0,3" BorderBrush="{x:Null}" Foreground="{x:Null}" Height="100" Width="100" Content=" ">
<Button.Background>
<ImageBrush Stretch="Uniform" ImageSource="/Assets/calendaricon.png"/>
</Button.Background>
</Button>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
But when the DatePicker is pressed, it still shows the old DatePicker style instead of the new style that I have set. I tried to figure out how to set the pressed state style of the date picker but I couldn't figure it out. I want the same normal state style to be used for the datepicker for all its states. How can I achieve this?
Instead of setting the background of the button(FlyoutButton) set the content template of the button(FlyoutButton).
Here is the code:
<Style x:Key="DatePickerStyle" TargetType="DatePicker">
<Setter Property="FontFamily" Value="{ThemeResource PhoneFontFamilyNormal}"/>
<Setter Property="FontSize" Value="{ThemeResource ContentControlFontSize}"/>
<Setter Property="Foreground" Value="{ThemeResource DatePickerForegroundThemeBrush}"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DatePicker">
<StackPanel x:Name="LayoutRoot" Margin="{TemplateBinding Padding}">
<ContentPresenter x:Name="HeaderContentPresenter" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Margin="0,0,0,-3" Style="{StaticResource HeaderContentPresenterStyle}" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
<Button x:Name="FlyoutButton"
BorderThickness="2.5"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
IsEnabled="{TemplateBinding IsEnabled}"
Padding="6.5,0,0,3"
BorderBrush="{x:Null}"
Foreground="{x:Null}"
Height="100"
Width="100"
>
<Button.ContentTemplate>
<DataTemplate>
<Grid >
<Image Stretch="Uniform"
Source="/Assets/calendaricon.png"/>
</Grid>
</DataTemplate>
</Button.ContentTemplate>
</Button>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
In ListViews on windows universal platform, there is an ugly seperator line below the group header, when you use ListView grouping. Even Microsoft themselves removed this line in their Apps. In the Live Visual Tree you can see that it is a rectangle in a GridViewHeaderItem. I've read that it's possible to set its height to 0. How can I do this?
Here's the code which sets the text of the header item:
<ListView.GroupStyle>
<GroupStyle HidesIfEmpty="True" >
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}"/>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
You can find all the default styles in generic.xaml at
C:\Program Files (x86)\Windows
Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10240.0\Generic
Digging into that file, you'll find the default style for the ListViewHeaderItem as well:
<!-- Default style for Windows.UI.Xaml.Controls.ListViewHeaderItem -->
<Style TargetType="ListViewHeaderItem">
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource ListViewHeaderItemThemeFontSize}" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Margin" Value="0,0,0,4"/>
<Setter Property="Padding" Value="12,8,12,0"/>
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="MinHeight" Value="{ThemeResource ListViewHeaderItemMinHeight}"/>
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewHeaderItem">
<StackPanel Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter x:Name="ContentPresenter"
Margin="{TemplateBinding Padding}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
<Rectangle Stroke="{ThemeResource SystemControlForegroundBaseLowBrush}"
StrokeThickness="0.5"
Height="1"
VerticalAlignment="Bottom"
HorizontalAlignment="Stretch"
Margin="12,8,12,0"/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Simply copy over that style into your project's ResourceDictionary and remove the culprit Rectangle (so only the ContentPresenter is left as child element).
<Rectangle Stroke="{ThemeResource SystemControlForegroundBaseLowBrush}"
StrokeThickness="0.5"
Height="1"
VerticalAlignment="Bottom"
HorizontalAlignment="Stretch"
Margin="12,8,12,0"/>
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.
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>