Changing TabItem Style To a TabControl.ItemTemplate - c#

Could someone please help me.
I have a already written style for a TabItem Header.
But because my TabItem Header are binded I needed to use
TabControl.ItemTemplate instead of TabItem Header
So how do I even start getting the same style on a TabControl.ItemTemplate that I have for the TabItem
So I had this:
<TabItem Header="Tab1" Style="{StaticResource TabStyle}">
</TabItem>
Now I have this:
<TabControl.ItemTemplate>
<!-- this is the header template-->
<DataTemplate>
<TextBlock Text="{Binding Person}" />
</DataTemplate>
</TabControl.ItemTemplate>
This is the Style for the original TabItem:
<Style x:Key="TabStyle" TargetType="{x:Type TabItem}">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Border Padding="3">
<Grid Name ="grid" Height="24">
<Border Name="BorderName"
CornerRadius="12,12,12,12"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" />
<Rectangle Name="TabItemBackgorund"
RadiusX="12"
RadiusY="12"
Fill="{StaticResource TabItemBackgroundBrush}">
</Rectangle>
<Border Name="border"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}">
<ContentPresenter Name="TabItemTextbox"
ContentSource="Header"
Margin="6,0,6,0"
TextBlock.Foreground="{StaticResource TabItemBackgroundBrush}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Border>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="TabItemBackgorund" Property="Fill" Value="#00bfc2" />
<Setter TargetName="TabItemTextbox" Property="TextBlock.Foreground" Value="#ffffff" />
<Setter TargetName="TabItemTextbox" Property="TextBlock.FontWeight" Value="Bold" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="TabItemBackgorund" Property="Fill" Value="{StaticResource TabItemBackgroundBrush}" />
<Setter TargetName="TabItemTextbox" Property="TextBlock.Foreground" Value="#9494a3" />
<Setter TargetName="TabItemTextbox" Property="TextBlock.FontWeight" Value="Bold" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="TabItemBackgorund" Property="Fill" Value="#00bfc2" />
<Setter TargetName="TabItemTextbox" Property="TextBlock.Foreground" Value="#ffffff" />
<Setter TargetName="TabItemTextbox" Property="TextBlock.FontWeight" Value="Bold" />
</Trigger>
<Trigger SourceName="grid" Property="IsMouseOver" Value="True">
<Setter TargetName="TabItemBackgorund" Property="Fill" Value="#FF4F78" />
<Setter TargetName="TabItemTextbox" Property="TextBlock.Foreground" Value="#ffffff" />
<Setter TargetName="TabItemTextbox" Property="TextBlock.FontWeight" Value="Bold" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

I have a already written style for a TabItem Header. But because my
TabItem Header are binded I needed to use TabControl.ItemTemplate
instead of TabItem Header
Instead of Header="Tab1" in TabItem, you could continue using your original TabItem's Style with a Header Setter
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="Header" Value="{Binding Person}"/>
<Setter Property="Template">
and apply the style to TabControl.ItemContainerStyle
<TabControl>
<TabControl.ItemContainerStyle>
<Style TargetType="TabItem">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="Header" Value="{Binding Person}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
...
</Style>
</TabControl.ItemContainerStyle>
</TabControl>

Related

WPF C# ListBox IsMouseOver and IsSelected background

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
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>
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.

Accessing the border around a contentpresenter

I have a ListView which uses a DataTemplate. When an item is selected a border and background is added but I am unsure where from. This shows in the visual tree as a border around the ContentPresenter but inside the ListViewItem. The properties show that they were added by triggers in the TemplatedParent template. How can I override these triggers given the structure below or is my approach wrong?
<ListView x:Name="MyListview" ItemsSource="{Binding Thumbnails}" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<local:VirtualizingWrapPanel IsItemsHost="True" ....../>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="SnapsToDevicePixels" Value="true" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate x:Name="ThumbItemTemplate" DataType="{x:Type local:ThumbItem}">
<Grid Margin="6" Width="128" Height="168">
<Grid.RowDefinitions>
<RowDefinition Height="128"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Border Grid.Row="0" BorderThickness="0">
<Image x:Name="ThumbnailImage" MaxHeight="128" MaxWidth="128" Source="{Binding Thumbnail}" />
</Border>
<TextBlock Grid.Row="1" Margin="0,6,0,0" TextAlignment="Center" x:Name="Description" Text="{Binding Title}" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
These come from the ItemContainerStyle. You could define your own custom template for the ListViewItem, e.g:
<Style TargetType="ListViewItem">
<Style.Resources>
<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.Resources>
<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="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}"/>
</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 can copy the default template by right-clicking on a ListBox in design mode in Visual Studio and choose Edit Additional Templates->Edit Generated Item Container (ItemContainerStyle).

WPF Content Presenter weird horizontal alignment behaviour

I'm trying to center a content a Content Presenter in a button, It centers perfectly in the designer But when ran it will either go off center by a bit or will get cut off. What's confusing me is that I have another style that does relatively the same thing but works perfectly.
Here's the style;
<Style x:Key="MainButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="0,1"/>
<Setter Property="RenderOptions.BitmapScalingMode" Value="NearestNeighbor"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid x:Name="Chrome" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
<Grid.BindingGroup>
<BindingGroup/>
</Grid.BindingGroup>
<Border x:Name="border" CornerRadius="3,3,3,3" BorderBrush="LightGray" BorderThickness="1" Background="#FFF3F3F3" Padding="0">
<ContentPresenter
HorizontalAlignment="Center"
VerticalAlignment="Stretch"
TextElement.FontWeight="Light" Height="Auto" Margin="153.636,0.52,156,1.52" Width="Auto" UseLayoutRounding="False" SnapsToDevicePixels="False" >
</ContentPresenter>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" TargetName="border" Value="#330CB3EE"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" TargetName="border" Value="#FF0CB3EE"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" TargetName="Chrome" Value="0.25"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Remove the Margin from the Content Presenter:
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Stretch"
TextElement.FontWeight="Light"
Height="Auto"
Width="Auto"
UseLayoutRounding="False"
SnapsToDevicePixels="False" >
This Margin was probably added by the designer, matching the layout of the control in the designer.

Border Color For Toggle Button Does not change?

I have the following style
<Style TargetType="{x:Type ToggleButton}" x:Key="ListToggleButton">
<Setter Property="FontSize" Value="15" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Foreground" Value="#FF232A2E"/>
<Setter Property="Background" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border Background="{TemplateBinding Background}" BorderBrush="#FFECECEC" BorderThickness="0,0,0,1">
<Grid>
<ContentPresenter x:Name="MyContentPresenter" Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,0,0" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="False">
<Setter Property="Background" Value="#FF232A2E"/>
<Setter Property="BorderBrush" Value="#FFECECEC"/>
<Setter Property="BorderThickness" Value="0,0,0,1"/>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Background" Value="#FFF5F5F5"/>
<Setter Property="BorderBrush" Value="#FF25a0da"/>
<Setter Property="BorderThickness" Value="0,0,0,2"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I want to change the border color when I checked the button, background changes but border no !
What I miss
Thanks in advance
You need to specify a name for the border, and specify it under TargetName in the Setter. When you omit TargetName, it will set the value of the property of the owner of the trigger (in this case the ToggleButton itself). Background setter is working because the border's background is template-bound to the togglebutton's background property.
<Style TargetType="{x:Type ToggleButton}" x:Key="ListToggleButton">
<Setter Property="FontSize" Value="15" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Foreground" Value="#FF232A2E"/>
<Setter Property="Background" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border x:Name="ButtonBorder" Background="{TemplateBinding Background}" BorderBrush="#FFECECEC" BorderThickness="0,0,0,1">
<Grid>
<ContentPresenter x:Name="MyContentPresenter" Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,0,0" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="False">
<Setter Property="Background" Value="#FF232A2E"/>
<Setter Property="BorderBrush" Value="#FFECECEC" TargetName="ButtonBorder"/>
<Setter Property="BorderThickness" Value="0,0,0,1" TargetName="ButtonBorder"/>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Background" Value="#FFF5F5F5"/>
<Setter Property="BorderBrush" Value="#FF25a0da" TargetName="ButtonBorder"/>
<Setter Property="BorderThickness" Value="0,0,0,2" TargetName="ButtonBorder"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Image shifting while displaying border around listbox item wpf

I am using a listbox to display images. When a listbox item is selected it displays a border around the image. Instead of displaying border around the image it shifts the image towards right.
Listbox style:
<Style TargetType="{x:Type ListBox}">
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding Path=UriSource}"
Stretch="Fill"
Width="639" Height="530">
</Image>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility"
Value="Disabled"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility"
Value="Disabled"/>
<Setter Property="HorizontalContentAlignment"
Value="Left"/>
<Setter Property="VerticalContentAlignment"
Value="Center" />
</Style>
List box item style:
<Style TargetType="{x:Type ListBoxItem}" x:Key="ContainerStyle">
<Setter Property="Padding" Value="0,0,0,0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border x:Name="Bd"
SnapsToDevicePixels="True"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="0"
Padding="{TemplateBinding Padding}">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource BorderColor}"/>
<Setter Property="BorderThickness" TargetName="Bd" Value="12" />
<Setter Property="Width" Value="639" />
<Setter Property="Height" Value="530" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true"/>
<Condition Property="Selector.IsSelectionActive" Value="false"/>
</MultiTrigger.Conditions>
<Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource BorderColor}"/>
<Setter Property="BorderThickness" TargetName="Bd" Value="12" />
<Setter Property="Width" Value="639" />
<Setter Property="Height" Value="530" />
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This is because in your ListBoxItem style, you're changing the border's thickness, from 0 in the normal case, to 12 when the item is selected. This shifts the content by 12pt.
You have several of possible solutions here, here are two possibilities:
Always use a 12pt border, but use a Transparent or {x:Null} brush in the unselected state
Use a 12 margin on your ContentPresenter, and set it to 0 in the triggers
Used Layout transform instead of using Render transform.
Set Margin="-2,0,-2,0"
Padding="-1,0,-1,0" for listbox.
and

Categories

Resources