I have 2 ComboBox's in a app settings flyout. One of which has an ItemTemplate defined and the other does not:
<StackPanel Orientation="Horizontal"
Margin="5">
<Label Content="Accent"
VerticalAlignment="Center"/>
<ComboBox ItemsSource="{Binding MetroAccents}"
SelectedItem="{Binding SelectedAccent}"
Margin="5">
<ComboBox.ItemTemplate>
<DataTemplate>
<Label Content="{Binding Name}"
Margin="0"/>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<StackPanel Orientation="Horizontal"
Margin="5">
<Label Content="Grid Lines"
VerticalAlignment="Center"/>
<ComboBox ItemsSource="{Binding GridLinesVisibilityList}"
SelectedItem="{Binding SelectedGridLinesVisibility}"
Margin="5"/>
However, the ComboBox with the ItemTemplate has a larger height than the other ComboBox. Analysing the control with the 'Enable Selection' debugging tool, the ComboBox with the ItemTemplate seems to have a TextBlock with the Label (defined in the template). Whereas the other ComboBox only has a Label. Does anyone know why this is?
Label will take more space due to it's default style which looks like this:
<Style x:Key="LabelStyle1" TargetType="{x:Type Label}">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Padding" Value="5"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Label}">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Which as you can see has padding on it. While the TextBlock does not. This is why it takes more space.
Bear in mind that Label supports key bindings with _ underscore and also other UI elements as it's content. I personally don't use it unless I need key bindings, but even then I use AccessText MSDN.
Related
I've recently taken to learning WPF for a project. I've been styling a TabControl to fit the colors of a component library I'm using, but these strange white lines have appeared beside each TabItem, but only between items or before the first item.
What are they, and how can I get rid of them? I tried using the inspector provided in Visual Studio but they aren't selectable, which leads me to believe they are some internal part of TabItem, but I'm stuck at this point.
Usage:
<TabControl Grid.Row="1"
TabStripPlacement="Bottom"
BorderBrush="#00000000"
BorderThickness="0"
Resources="{StaticResource TabControlResources}">
<TabItem Header="Story">
<local:Workspace />
</TabItem>
<TabItem Header="Test">
Test Tab
</TabItem>
<TabItem Header="Test">
Test Tab 2
</TabItem>
</TabControl>
And style definition:
<ResourceDictionary x:Key="TabControlResources">
<Style TargetType="TabControl">
<Setter Property="Background"
Value="{StaticResource Fluent.Ribbon.Brushes.RibbonTabControl.Background}"/>
<Setter Property="Foreground"
Value="{StaticResource Fluent.Ribbon.Brushes.IdealForegroundColorBrush}" />
</Style>
<Style TargetType="TabItem">
<Setter Property="Foreground"
Value="{StaticResource Fluent.Ribbon.Brushes.IdealForegroundColorBrush}" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background"
Value="{StaticResource Fluent.Ribbon.Brushes.RibbonTabControl.Background}" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter Property="Background"
Value="{StaticResource Fluent.Ribbon.Brushes.RibbonTabItem.Active.Background}" />
</Trigger>
</Style.Triggers>
</Style>
</ResourceDictionary>
Those are part of the TabItem. You can add the setter in the tab item style within your resource which should do the job:
<Style TargetType="{x:Type TabItem}">
<Setter Property="BorderBrush" Value="Red"/>
</Style>
And the result will be such:
Alternatively:
You can completely remove it, but unfortunately it is part of the template and the template has to be modified:
In Visual studio designer right click on one of the tab items and go to "Edit template" then "Edit a copy".
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid x:Name="templateRoot" SnapsToDevicePixels="true">
<Border x:Name="mainBorder" BorderBrush="Red" BorderThickness="0" Background="{TemplateBinding Background}" Margin="0">
<Border x:Name="innerBorder" BorderBrush="{StaticResource TabItem.Selected.Border}" BorderThickness="0" Background="{StaticResource TabItem.Selected.Background}" Margin="-1" Opacity="0"/>
</Border>
<ContentPresenter x:Name="contentPresenter" ContentSource="Header" Focusable="False" HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
</Grid>
In there you have to modify the BorderThichness of mainBorder and innerBoarder to BorderThickness="0"
Result:
In the illustration below you can see a custom control that I'm currently creating with a view to learning as much as I can about the whole process of control creation.
Currently I'm trying to both simplify the xaml by effectively refactoring repetitive style elements out into a separate style and achieve a disabled look for images when the buttons in which they are situated are disabled.
In the xaml below you can see both the button style I've created and the data trigger for the image. In theory both are being applied to the second button on the left, but quite clearly they aren't being.
I think that the basic style definitions are correct but it may be that they are in the incorrect place. Can anyone advise as to what it is that I'm currently doing wrong.
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:ViewToLearn.WpfControls">
<Style TargetType="{x:Type Image}">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type UIElement}, AncestorLevel=1}, Path=IsEnabled}"
Value="False">
<Setter Property="Opacity"
Value="0.2"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
<Style TargetType="{x:Type Button}">
<Setter Property="BorderBrush"
Value="Transparent" />
<Setter Property="Background"
Value="Transparent" />
<Setter Property="BorderThickness"
Value="0" />
<Setter Property="Margin"
Value="4" />
</Style>
<Style TargetType="{x:Type local:VtlDataNavigator}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:VtlDataNavigator}">
<StackPanel Orientation="Horizontal">
<Button BorderBrush="Transparent"
Background="Transparent"
BorderThickness="0">
<StackPanel Margin="4">
<Image Source="/ViewToLearn.WpfControls;component/Resources/Images/button_rounded_blue_first24.png" />
</StackPanel>
</Button> <!-- This is the button that should be influenced by the style and trigger defined above, but clearly it isn't -->
<Button IsEnabled="False">
<StackPanel Margin="4">
<Image Source="/ViewToLearn.WpfControls;component/Resources/Images/button_rounded_blue_previous24.png" />
</StackPanel>
</Button>
<TextBox Text="{Binding Path=RecordIndex,RelativeSource={RelativeSource TemplatedParent}}"
VerticalAlignment="Center"
IsReadOnly="True"
BorderThickness="0"
Margin="4" />
<TextBlock Text="of"
VerticalAlignment="Center"
Margin="4" />
<TextBlock Text="{Binding Path=RecordCount,RelativeSource={RelativeSource TemplatedParent}}"
VerticalAlignment="Center"
Margin="4" />
<Button BorderBrush="Transparent"
Background="Transparent"
BorderThickness="0">
<StackPanel Margin="4">
<Image Source="/ViewToLearn.WpfControls;component/Resources/Images/button_rounded_blue_next24.png" />
</StackPanel>
</Button>
Your second button has IsEnabled="false"
That makes the difference.
But if you want the background to be the same for all buttons, enabled or not, you have to got in the triggers.
The best way to generate the default style and template with triggers is to put a dummy/test button in a window, right click on it, Edit Template/Edit a copy.
VS will generate much code. You 'll see inside the "full" template" of the button + the triggers.
Inside there is a trigger for different appearance when disabled :
<Setter Property="Template" >
<Setter.Value>
<ControlTemplate TargetType="{x:Type ButtonBase}">
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<!-- ... -->
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" TargetName="border" Value="#FFF4F4F4"/>
<Setter Property="BorderBrush" TargetName="border" Value="#FFADB2B5"/>
<Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="#FF838383"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
It's that template you can take inspiration from to update your style (without trigger when disabled):
<Style TargetType="{x:Type Button}">
<Setter Property="BorderBrush"
Value="Transparent" />
<Setter Property="Background"
Value="Transparent" />
<Setter Property="BorderThickness"
Value="0" />
<Setter Property="Margin"
Value="4" />
<Setter Property="Template" >
<Setter.Value>
<ControlTemplate TargetType="{x:Type ButtonBase}">
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<!-- no trigger int he template -->
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Notes regarding your code because it seems you are eager to learn :
Don't have to set Background, BorderThickness, BorderBrush for every button, it is already done in your Button style
The StackPanel around every Image is the same and can be put inside the template around the ContentPresenter tag
If VtlDataNavigator is a Usercontrol, you can put all the content of <ControlTemplate TargetType="{x:Type local:VtlDataNavigator}"> inside the <UserControl> tag.
It makes the control more reusable (don't have to provide the template in every Window for the control)
Regards
I want to change the background color of a ListBox's SelectedItem. I tried the below code :
<ListBox Grid.Column="0" ScrollViewer.HorizontalScrollBarVisibility="Hidden"
ItemsSource="{Binding Parents}" DisplayMemberPath="Title"
Height="35" FontSize="18" BorderThickness="0" Background="#FF2A2A2A"
Foreground="White" SelectedIndex="0">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel IsItemsHost="True" Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="DodgerBlue" />
</Trigger>
</Style.Triggers>
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}"
Color="Transparent"/>
<SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}"
Color="Transparent" />
</Style.Resources>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
But I cannot see any change in SelectedItems's Background Color. Can anybody point the mistake in above XAML?
Also I want to use this style for this specific ListBox, so I don't want to change ControlTemplate.
Try this:
<ListBox Grid.Column="1" Grid.Row="1" Margin="2" SelectionMode="Multiple" ItemsSource="{Binding NavigationMenuItems}" DisplayMemberPath="Name">
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="IsSelected" Value="{Binding Mode=TwoWay, Path=IsSelected}"/>
<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>
<Trigger Property="IsSelected" Value="true">
<Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
In .NET 4.5 system does not use SystemColors by default, therefore you should:
1) create your own Style/ControlTemplate;
2) create a BlankListBoxContainer like in this example:
<Style x:Key="BlankListBoxContainerStyle" TargetType="{x:Type ListBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="FocusVisualStyle" Value="{x:Null} "/>
</Style>
3) remove the difference between the frameworks, like this:
FrameworkCompatibilityPreferences.AreInactiveSelectionHighlightBrushKeysSupported = false;
before any Window are created, for example before InitializeComponent().
From MSDN:
AreInactiveSelectionHighlightBrushKeysSupported:
Gets or sets a value that indicates whether the application should use the InactiveSelectionHighlightBrush and InactiveSelectionHighlightTextBrush properties for the colors of inactive selected items.
I want to make impossible checking checkbox in WPF (from C# code). Only unchecking would be allowed.
How can I do it?
PS.Writing event handler on Click event which would immediately uncheck checkbox after checking it is not acceptable.
[edit]Checkbox should always be enabled, so that user can think that checkbox can be checked. It's strange but it's specific programme.
<CheckBox Content="Checkbox"
IsEnabled="{Binding RelativeSource={RelativeSource Self}, Path=IsChecked}" />
Edit after being informed that the checkbox always has to look to be in an checkable state, even when it's not. Here is a working example:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero" x:Class="WpfTest.MainWindow"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<ControlTemplate x:Key="DeceptiveCheckbox" TargetType="{x:Type CheckBox}">
<BulletDecorator Background="Transparent" SnapsToDevicePixels="True">
<BulletDecorator.Bullet>
<Microsoft_Windows_Themes:BulletChrome BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" IsChecked="{TemplateBinding IsChecked}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}"/>
</BulletDecorator.Bullet>
<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</BulletDecorator>
<ControlTemplate.Triggers>
<Trigger Property="HasContent" Value="True">
<Setter Property="FocusVisualStyle">
<Setter.Value>
<Style>
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="14,0,0,0" SnapsToDevicePixels="True" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
<Setter Property="Padding" Value="4,0,0,0"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Window.Resources>
<Grid>
<CheckBox Content="CheckBox" IsEnabled="{Binding IsChecked, RelativeSource={RelativeSource Self}}" Template="{StaticResource DeceptiveCheckbox}" />
</Grid>
</Window>
The fix was simple. I simply created a copy of the current checkbox template and removed:
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
How about this:
<Grid>
<Grid.Resources>
<Style TargetType="CheckBox">
<Style.Triggers>
<Trigger Property="IsChecked" Value="False">
<Setter Property="IsEnabled" Value="False" />
</Trigger>
</Style.Triggers>
</Style>
</Grid.Resources>
<CheckBox IsChecked="True" />
</Grid>
This approach has the benefit of being applied to all (as-is) or many (if you apply a x:Key attribute and then assign the resource to the desired checkboxes) without needing to do anything special or change the bindings of the individual checkboxes.
An easy solution could be to bind the IsEnabled property to be equal to the IsChecked property.
I am having trouble finding how to not allow my ListBox to highlight the item selected. I know that I didn't add a trigger to highlight the item.
<ListBox Name="CartItems" ItemsSource="{Binding}"
ItemTemplate="{StaticResource TicketTemplate}"
Grid.Row="3" Grid.ColumnSpan="9" Background="Transparent"
BorderBrush="Transparent">
</ListBox>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="IsSelected" Value="{Binding Content.IsSelected, Mode=TwoWay, RelativeSource={RelativeSource Self}}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<ContentPresenter/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
Late answer, but there's a much better and simpler solution:
<ListBox>
<ListBox.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent" />
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Black" />
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent" />
</ListBox.Resources>
</ListBox>
This allows you to have a LisBox that looks just like an itemscontrol, but has support for selection.
Edit: How it works
This alters "colors of the system", in other words your windows theme, only for this ListBox and its children (we actually want to target the ListboxItem).
For example hovering a ListboxItem usually gives it a deep blue background, but here we set it to transparent (HighlightBrushKey).
Edit (30 June 2016):
It seems for latest Windows version this is not enough anymore, you also need to redefine InactiveSelectionHighlightBrushKey
<SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" Color="Transparent" />
Thanks to #packoman in the comments
removing the highlighting completely feels very odd, as you dont know if you've selected anything, but here's a version of the control template that uses WhiteSmoke (which is very subtle) instead of Blue
<Window.Resources>
<Style x:Key="ListBoxItemStyle1" TargetType="{x:Type ListBoxItem}">
<Setter Property="Background" Value="Transparent"/>
<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="Padding" Value="2,0,0,0"/>
<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>
<Trigger Property="IsSelected" Value="true">
<Setter Property="Background" TargetName="Bd" Value="WhiteSmoke"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid x:Name="LayoutRoot">
<ListBox HorizontalAlignment="Left" VerticalAlignment="Top" ItemContainerStyle="{DynamicResource ListBoxItemStyle1}">
<ListBoxItem Content="Item1"/>
<ListBoxItem Content="Item2"/>
<ListBoxItem Content="Item3"/>
<ListBoxItem Content="Item4"/>
<ListBoxItem Content="Item5"/>
<ListBoxItem Content="Item6"/>
</ListBox>
</Grid>
here's what worked for me.
<Style x:Key="ListBoxNoHighlight" TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Transparent"/>
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="Transparent"/>
</Trigger>
</Style.Triggers>
</Style>
In the Properties tab, there is an Enabled Field with 2 options, true and false. By turning this to false, the Listbox remains white and selection is not avaliable. Just figured this out!
I'm talking about a trick I did in my WP8 app.
I added a transparent frame image above it (the image's border was seen, think of it like a picture frame). The scroll was functional, any manipulation event was firing just that the Listbox items weren't selected anylonger.
<Grid
Grid.Row="0"
Margin="10,15"
Background="#FF008F88">
<ListBox
x:Name="listBox_content"
Margin="20,15"
VirtualizingStackPanel.VirtualizationMode="Recycling">
</ListBox>
<!-- TV image, middle is transparent so the ListBox can be seen -->
<Image
x:Name="image_tv"
Source="/Assets/Images/tvFrame.png"
Stretch="Fill"/>
<!---->
</Grid>
I guess this could work with a full transparent image set to Fill as well.
You will have to re-template ListBoxItem. In the default template, it has a trigger that highlights itself when IsSelected property is true. You just have to create a template that does not have that trigger.
I think you need to create a custom control template for the ListBoxItem, and include the trigger to change the background color to "Transparent" when the item is selected. Here is an example of how you can do this:
<ListBox x:Name="MyListBox">
<ListBox.Resources>
<ControlTemplate x:Key="ListBoxItemControlTemplate" TargetType="ListBoxItem">
<Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
<ContentPresenter x:Name="Content" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" TargetName="Bd" Value="Transparent"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ListBox.Resources>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Template" Value="{StaticResource ListBoxItemControlTemplate}"/>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>