WPF ListView IsSelected Set Border Opacity - wpf

I have a listview and padding must be 2 and color's getting system theme (using windows 8.1) but look very ugly.
<ListView.Resources>
<Style TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Border Name="Border" Padding="2" SnapsToDevicePixels="True">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="Border" Property="Background" Value="{x:Static SystemParameters.WindowGlassBrush}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="IsSelected" Value="true"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.Resources>
TIP: I used CornerRadius = 10 in DataTemplate.
<DataTemplate x:Key="DT">
<StackPanel Orientation="Vertical">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50*"/>
<RowDefinition Height="50*"/>
</Grid.RowDefinitions>
<Border Background="{Binding HEXRengi}" MinHeight="100" MinWidth="150" Height="100" Width="150" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.RowSpan="2" CornerRadius="10"/>
<ToggleButton x:Name="HEXRenkAl" Style="{DynamicResource DüzRenkPaletiDüğmeBiçimi}" Grid.Row="0" Click="HEXRenkAl_Click">
<Border Background="{Binding HEXRengi}" MinHeight="50" MinWidth="150" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" CornerRadius="10">
<TextBox Text="{Binding HEXRengi}" Style="{DynamicResource SeçilebilirAmaYazılamazMetinKutusu}" VerticalAlignment="Center" HorizontalAlignment="Center" TextAlignment="Justify" TextWrapping="Wrap" Foreground="White" FontFamily="Century Gothic" FontSize="16" FontWeight="Bold"/>
</Border>
</ToggleButton>
<ToggleButton x:Name="RGBRengiAl" Style="{DynamicResource DüzRenkPaletiDüğmeBiçimi}" Grid.Row="1" Click="RGBRengiAl_Click">
<Border Background="{Binding HEXRengi}" MinHeight="50" MinWidth="150" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" CornerRadius="05">
<TextBox Text="{Binding RGBRengi}" Style="{DynamicResource SeçilebilirAmaYazılamazMetinKutusu}" VerticalAlignment="Center" HorizontalAlignment="Center" TextAlignment="Justify" TextWrapping="Wrap" Foreground="White" FontFamily="Century Gothic" FontSize="16" FontWeight="Bold"/>
</Border>
</ToggleButton>
</Grid>
</StackPanel>
</DataTemplate>
Look like this;
And IsSelected;
When i used setter property opacity value apply all item. Just should apply on border, not all item.
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="Border" Property="Background" Value="{x:Static SystemParameters.WindowGlassBrush}"/>
<Setter TargetName="Border" Property="Opacity" Value=".5"/>
</Trigger>
How can i do it? Thanks for advices.

When i used setter property opacity value apply all item. Just should apply on border, not all item.
If you are wondering why opacity value is applying to all items, that is because you have named "Border" and you are targeting by name in your Trigger.
<Border Name="Border" Padding="2" SnapsToDevicePixels="True">
<ContentPresenter />
</Border>

Related

Modify a child control from trigger or better way to change their foreground?

I have a listbox with a template, inside the listboxitem I have 2 textblock.
My goal is to change the foreground of those 2 textblock when the listboxitem is:
Hovered(Mouse over)
Selected
My ItemTemplate currently removes the highlight when u hover over items, that works as expected.
I know I can get the IsSelected and IsMouseOver events, for example:
<Trigger Property="IsSelected" Value="true">
<Setter Property="Background" TargetName="Bd" Value="White"/>
<!-- I have no idea how to access the textblock child of the listboxitem to change it -->
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<!-- I have no idea how to access the textblock child of the listboxitem to change it -->
</Trigger>
But I could not figure out how to modify the TextBlock inside, I've tried using acestor and a whole different ways none worked(as in they had no effect).
Here is what my View looks like:
<UserControl x:Class="Shex.Views.SideBarView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:Shex.Views"
xmlns:s="https://github.com/canton7/Stylet"
xmlns:shex="clr-namespace:Shex"
mc:Ignorable="d"
d:DesignHeight="800" d:DesignWidth="260"
Background="#403f42" Padding="0" BorderThickness="0" Margin="0">
<UserControl.Resources>
<Style x:Key="MenuContainerStyle" TargetType="{x:Type ListBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="0" Background="{TemplateBinding Background}"
Padding="0" 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="White"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid Margin="0">
<ListBox ItemsSource="{Binding MenuItems}" SelectionMode="Single" SelectedItem="{Binding SelectedMenuItem}" SelectionChanged="{s:Action ChangeView}"
BorderThickness="0" Padding="0" Margin="0 10 0 0" Background="#403f42" ItemContainerStyle="{DynamicResource MenuContainerStyle}" SnapsToDevicePixels="true">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Height="60" Orientation="Horizontal" SnapsToDevicePixels="true">
<TextBlock Text="{Binding Image}" FontFamily="/Shex;component/Fonts/Font Awesome 5 Free-Solid-900.otf#Font Awesome 5 Free Solid" Foreground="#cfced1" FontSize="20" Margin="10 6 0 0" Width="30" VerticalAlignment="Center" HorizontalAlignment="Left"/>
<TextBlock Text="{Binding Name}" Foreground="#cfced1" FontSize="20" Margin="10 6 0 0" VerticalAlignment="Center" HorizontalAlignment="Left"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</UserControl>
You should add the trigger(s) to the ItemTemplate, e.g.:
<DataTemplate>
<StackPanel ...>
<TextBlock x:Name="tb1" ... />
<TextBlock x:Name="tb2" ... />
</StackPanel>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType=ListBoxItem}}" Value="True">
<Setter TargetName="tb1" Property="Foreground" Value="Blue" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
A ListBoxItem style cannot set properties of some individual TextBlock or any other control that is defined in the ItemTemplate.

Border widths displays inconsistently

Lets take this as example. I now have a total of 8 textboxes. I use a static resource style to make sure they all have the exact same styling set. But notice how some of the textboxes have a bottom border line and others don't. Why does this happen?
Here's the code
<Style x:Key="AddressTextBox" TargetType="TextBox">
<Setter Property="MinWidth" Value="230"></Setter>
<Setter Property="MaxWidth" Value="260"></Setter>
<Setter Property="MaxLength" Value="45"></Setter>
<Setter Property="Margin" Value="1"></Setter>
<Setter Property="BorderThickness" Value="1,1,1,1"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="Padding" Value="1,2,0,1"/>
<Setter Property="BorderBrush" Value="Gray"></Setter>
<Setter Property="Height" Value="20"></Setter>
</Style>
<DockPanel>
<StackPanel>
<Grid Margin="5">
<StackPanel>
<DockPanel Height="Auto">
<TextBlock Width="50" Margin="7">Postal</TextBlock>
<TextBox Style="{StaticResource AddressTextBox}"></TextBox>
</DockPanel>
<DockPanel Height="Auto">
<TextBlock Width="50" Margin="7"></TextBlock>
<TextBox Style="{StaticResource AddressTextBox}"></TextBox>
</DockPanel>
<DockPanel Height="Auto">
<TextBlock Width="50" Margin="7"></TextBlock>
<TextBox Style="{StaticResource AddressTextBox}"></TextBox>
</DockPanel>
<DockPanel Height="Auto">
<TextBlock Width="50" Margin="7"></TextBlock>
<TextBox Style="{StaticResource AddressTextBox}"></TextBox>
</DockPanel>
<DockPanel Height="10"></DockPanel>
<DockPanel Height="Auto">
<TextBlock Width="50" Margin="7">Street</TextBlock>
<TextBox Style="{StaticResource AddressTextBox}"></TextBox>
</DockPanel>
<DockPanel Height="Auto">
<TextBlock Width="50" Margin="7"></TextBlock>
<TextBox Style="{StaticResource AddressTextBox}"></TextBox>
</DockPanel>
<DockPanel Height="Auto">
<TextBlock Width="50" Margin="7"></TextBlock>
<TextBox Style="{StaticResource AddressTextBox}"></TextBox>
</DockPanel>
<DockPanel Height="Auto">
<TextBlock Width="50" Margin="7"></TextBlock>
<TextBox Style="{StaticResource AddressTextBox}"></TextBox>
</DockPanel>
</StackPanel>
</Grid>
</StackPanel>
</DockPanel>
Even though your layout is very inefficient, its not the problem as all above comments suggest. Nothing to do with SnapToDevicePixels, Padding, Margins, etc. It is part of TextBox's control style. It seems that if you set BorderWidth bigger than default, it sticks on all corners, but if you go below it doesn't. If you extract the TextBox's template you can see its border and styling. So in order to "beat" this irregularity, instead of trying to sort of indirectly manipulate the TextBox's Border properties in your style you need to override its template. Then manipulate it's Border directly in the Template.
Here's a the style that will work(I plugged in your setters into it) :
<SolidColorBrush x:Key="DisabledBackgroundBrush" Color="LightGray"/>
<SolidColorBrush x:Key="DisabledForegroundBrush" Color="Gray"/>
<SolidColorBrush x:Key="EnabledBackgroundBrush" Color="White"/>
<Style x:Key="AddressTextBox" TargetType="{x:Type TextBoxBase}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="AllowDrop" Value="true"/>
<Setter Property="MinWidth" Value="230"/>
<Setter Property="MaxWidth" Value="260"/>
<Setter Property="Margin" Value="1"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="Padding" Value="1,2,0,1"/>
<Setter Property="Height" Value="20"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBoxBase}">
<Border Name="Border" CornerRadius="2" Padding="2" Background="{StaticResource EnabledBackgroundBrush}"
BorderBrush="Gray" BorderThickness="1" >
<ScrollViewer Margin="0" x:Name="PART_ContentHost"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Border" Property="Background" Value="{StaticResource DisabledBackgroundBrush}"/>
<Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBackgroundBrush}"/>
<Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
also, just a tip about your layout. To minimize inefficiencies, I would use the Grid:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Text="Postal"/>
<TextBox Grid.Column="1" Style="{StaticResource AddressTextBox}"/>
<TextBlock Grid.Row="1" />
<TextBox Grid.Row="1" Grid.Column="1" Style="{StaticResource AddressTextBox}"/>
<TextBlock Grid.Row="2" />
<TextBox Grid.Row="2" Grid.Column="1" Style="{StaticResource AddressTextBox}"/>
<TextBlock Grid.Row="3" />
<TextBox Grid.Row="3" Grid.Column="1" Style="{StaticResource AddressTextBox}"/>
<TextBlock Grid.Row="4" Text="Street" Margin="7,10,7,7"/>
<TextBox Grid.Row="4" Grid.Column="1" Style="{StaticResource AddressTextBox}"/>
<TextBlock Grid.Row="5"/>
<TextBox Grid.Row="5" Grid.Column="1" Style="{StaticResource AddressTextBox}"/>
<TextBlock Grid.Row="6"/>
<TextBox Grid.Row="6" Grid.Column="1" Style="{StaticResource AddressTextBox}"/>
<TextBlock Grid.Row="7"/>
<TextBox Grid.Row="7" Grid.Column="1" Style="{StaticResource AddressTextBox}"/>
</Grid>

WPF ListBox items with template become invisible after grouping

I have ObservableCollection with items which I want to display in a ListBox.
Also I write a template for ListboxItem for correct display of my collection.
On this stage everything works fine.
in .cs
Sensors = new ObservableCollection<Sensor>();
...
lstBox.ItemsSource = Sensors;
in .xaml
...
<DataTemplate x:Key="SensorTileTemplate">
<Border>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Name}" Grid.Row="0" Grid.ColumnSpan="3"></TextBlock>
<Image Source="{Binding ImageModel.ImgSource}" Style="{StaticResource ImageGlowStyle}" Height="72" Grid.Row="1" Grid.Column="0"></Image>
<StackPanel Grid.Row="1" Grid.Column="1" Margin="5">
<TextBlock Text="IP:"></TextBlock>
<TextBlock Text="Port:"></TextBlock>
<TextBlock Text="Command port:"></TextBlock>
</StackPanel>
<StackPanel Grid.Row="1" Grid.Column="2" Margin="5">
<TextBlock Text="{Binding DeviceAddress}"></TextBlock>
<TextBlock Text="{Binding DeviceDataPort}"></TextBlock>
<TextBlock Text="{Binding DeviceControlPort}"></TextBlock>
</StackPanel>
</Grid>
</Border>
</DataTemplate>
<Style x:Key="ContainerStyle">
<Style.Triggers>
<DataTrigger Binding="{Binding IsSelected}" Value="True">
<Setter Property="ListBoxItem.Visibility" Value="Collapsed"/>
</DataTrigger>
</Style.Triggers>
</Style>
...
<ListBox Name="lstBox" Focusable="False"
SelectionChanged="lstBox_SelectionChanged"
HorizontalContentAlignment="Stretch"
ItemTemplate="{StaticResource SensorTileTemplate}"
ItemContainerStyle="{StaticResource ContainerStyle}">
</ListBox>
The problem appears when I need to group certain items using expander as a group container.
in .cs
...
ICollectionView view = CollectionViewSource.GetDefaultView(Sensors);
view.GroupDescriptions.Add(new PropertyGroupDescription("GroupNumber"));
lstBox.ItemsSource = view;
...
in .xaml
<!--Same Template and Style-->
...
...
<Style x:Key="GroupContainerStyle" TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Expander IsExpanded="True">
<Expander.Header>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Group #" />
<TextBlock Text="{Binding Name}" />
</StackPanel>
</Expander.Header>
<Expander.Content>
<ItemsPresenter />
</Expander.Content>
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
...
<ListBox Name="lstBox" Focusable="False"
SelectionChanged="lstBox_SelectionChanged"
HorizontalContentAlignment="Stretch"
ItemTemplate="{StaticResource SensorTileTemplate}"
ItemContainerStyle="{StaticResource ContainerStyle}">
<ListBox.GroupStyle>
<GroupStyle ContainerStyle="{StaticResource GroupContainerStyle}" />
</ListBox.GroupStyle>
</ListBox>
This code works and groups items but items become invisible.
So without grouping items display correctly but with grouping expanders show nothing in it.
I think there is something about ItemsPresenter in Expander but can't figure out what.
The problem was in one third party theme I use in my app. That theme has a ListBox template like:
<Style TargetType="{x:Type ListBox}">
...
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBox}">
<Grid>
<Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2" Background="{DynamicResource ControlBackgroundBrush}" />
<ScrollViewer Margin="1" Style="{DynamicResource NuclearScrollViewer}" Focusable="false" Background="{x:Null}">
<StackPanel Margin="1,1,1,1" IsItemsHost="true" />
</ScrollViewer>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" Value="{DynamicResource DisabledBackgroundBrush}" TargetName="Border" />
<Setter Property="BorderBrush" Value="{DynamicResource DisabledBorderBrush}" TargetName="Border" />
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
So I use an ItemsPresenter instead of the StackPanel in that template and everything works now.

TemplateBinding from a Style DataTrigger In ControlTemplate

In the following XAML I'm using a Rectangle with a Border as the Template for a ToggleButton.
I want the BorderBrush to be a different colour to reflect the changing value of ToggleButton.IsChecked.
Unfortunately my attempt here of using a TemplateBinding in the DataTrigger doesn't work. What do I need to do instead?
<StackPanel Orientation="Horizontal">
<StackPanel.Resources>
<ControlTemplate x:Key="ButtonAsSwatchTemplate">
<Border BorderThickness="1">
<Border.Style>
<Style>
<Setter Property="BorderBrush" Value="Gainsboro" />
<Style.Triggers>
<!-- TemplateBinding doesn't work.-->
<DataTrigger
Binding={TemplateBinding Property=IsChecked}
Value="True">
<Setter Property="BorderBrush" Value="Black" />
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<Rectangle Fill="{TemplateBinding Property=Background}"
Width="15" Height="15" />
</Border>
</ControlTemplate>
</StackPanel.Resources>
<ToggleButton Template="{StaticResource ButtonAsSwatchTemplate}"
HorizontalAlignment="Center" VerticalAlignment="Center"
Margin="2" Background="Red" />
</StackPanel>
EDIT
When I build and reload the designer I get the following error:
Error 1 Property 'Binding' does not support values of type 'TemplateBindingExpression'.
SOLUTION
<StackPanel Orientation="Horizontal">
<StackPanel.Resources>
<ControlTemplate x:Key="ButtonAsSwatchTemplate">
<Border x:Name="SwatchBorder" BorderThickness="1">
<Rectangle Fill="{TemplateBinding Property=Background}" Width="15" Height="15" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="ToggleButton.IsChecked" Value="True">
<Setter TargetName="SwatchBorder" Property="BorderBrush" Value="Yellow" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</StackPanel.Resources>
<RadioButton Template="{StaticResource ButtonAsSwatchTemplate}"
GroupName="CropGuidesColourRadioButtonGroup"
IsChecked="{Binding Checked}" Margin="2" Background="Red" />
<RadioButton Template="{StaticResource ButtonAsSwatchTemplate}"
GroupName="CropGuidesColourRadioButtonGroup"
IsChecked="{Binding Checked}" Margin="2" Background="Black" />
...
</StackPanel>
You could use a Trigger in the ControlTemplate, e.g.
<StackPanel Orientation="Horizontal">
<StackPanel.Resources>
<ControlTemplate x:Key="ButtonAsSwatchTemplate">
<Border x:Name="myBorder" BorderBrush="Gainsboro" BorderThickness="1">
<Rectangle Fill="{TemplateBinding Property=Background}" Width="15" Height="15" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="ToggleButton.IsChecked" Value="True">
<Setter TargetName="myBorder" Property="BorderBrush" Value="Black" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</StackPanel.Resources>
<ToggleButton Template="{StaticResource ButtonAsSwatchTemplate}"
HorizontalAlignment="Center" VerticalAlignment="Center"
Margin="2" Background="Red" />
</StackPanel>
One problem I see right away is that you are setting BorderBrush as a local property value on Border. This will always override the value applied by the style. Try removing the explicit BorderBrush attribute and see if that works.
Border BorderBrush="Gainsboro" BorderThickness="1"
Dependency Property Value Inheritance

WPF ComboBox Residing in a ListBox Click Event

I have a little issue.
I have a a ListBox that is bound to a list of object. These Objects have a property that can be set. I have in the LIstBox ItemTemplate (a datatemplate) a combobox that is about to the objects property and the combobox has some hardcoded values.
My problem is that when the list box is displayed and I click ont he combo, only the ListBoxItem is selected, The click never makes it to the combobox!
just to give you an idea.
<ListBox SelectionMode="Multiple" VerticalAlignment="Center" HorizontalAlignment="Left" Style="{StaticResource Style_ListBox}" ItemsSource="{Binding ModeSampleSets, Mode=OneWay}">
<ListBox.ItemTemplate>
<DataTemplate DataType="ListBoxItem">
<Grid>
<StackPanel>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" FontWeight="Bold" Text="{Binding Name, Mode=OneWay}" Width="{Binding ElementName=this, Path=Content.DesiredWidth}"/>
<ComboBox Focusable="False" Width="10" Height="10" Grid.Column="2" Style="{StaticResource Style_ComboBoxColorPicker}" SelectedItem="{Binding GraphColor, Mode=TwoWay}" >
<ComboBoxItem IsSelected="True" Content="#e62a2c" />
<ComboBoxItem Content="#ec7c28"></ComboBoxItem>
<ComboBoxItem Content="#69c5d8"></ComboBoxItem>
<ComboBoxItem Content="#36b34b"></ComboBoxItem>
<ComboBoxItem Content="#415dae"></ComboBoxItem>
<ComboBoxItem Content="#9056A3"></ComboBoxItem>
<ComboBoxItem Content="#0b0b0b"></ComboBoxItem>
<ComboBoxItem Content="#666666"></ComboBoxItem>
<ComboBoxItem Content="#a6a6a6"></ComboBoxItem>
</ComboBox>
</Grid>
<StackPanel Orientation="Horizontal">
<TextBlock FontSize="8" Text="{Binding SampleAnalysisDate, Mode=OneWay}" Width="{Binding ElementName=this, Path=Content.DesiredWidth}"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,4,0,0">
<TextBlock FontSize="14" Text="{Binding WaveLengthStart, Mode=OneWay}" Width="{Binding ElementName=this, Path=Content.DesiredWidth}"/>
<TextBlock Margin="2,0,0,0" FontSize="14" Text="{x:Static UIStrings:WaveLengthScanStrings.WaveLengthScanModeView_SampleWaveLength_Seperator}" Width="{Binding ElementName=this, Path=Content.DesiredWidth}"/>
<TextBlock Margin="2,0,0,0" FontSize="14" Text="{Binding WaveLengthStop, Mode=OneWay}" Width="{Binding ElementName=this, Path=Content.DesiredWidth}"/>
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Styles:
<Style x:Key="Style_ComboBoxColorPickerItemContainerStyle" TargetType="ComboBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBoxItem">
<Border Name="ItemBorder" Margin="2" BorderBrush="Transparent" BorderThickness="1.5" Background="Transparent">
<ContentPresenter Margin="2" Height="20" Width="20" ContentTemplate="{StaticResource DataTemplate_ComboBoxColorPickerItemTemplate}" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="ItemBorder" Property="BorderBrush" Value="Black"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="Style_ComboBoxColorPicker" TargetType="ComboBox">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<WrapPanel MaxWidth="100"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemTemplate" Value="{StaticResource DataTemplate_ComboBoxColorPickerItemTemplate}"/>
<Setter Property="ItemContainerStyle" Value="{StaticResource Style_ComboBoxColorPickerItemContainerStyle}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBox">
<Grid>
<ToggleButton
ClickMode="Press"
Name="ComboToggleButton"
IsChecked="{Binding Path=IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
Focusable="False"
>
<ToggleButton.Template>
<ControlTemplate TargetType="ToggleButton">
<ContentPresenter/>
</ControlTemplate>
</ToggleButton.Template>
<ContentPresenter Content="{TemplateBinding ComboBox.SelectionBoxItem}" ContentTemplate="{TemplateBinding ComboBox.ItemTemplate}" ContentTemplateSelector="{TemplateBinding ComboBox.ItemTemplateSelector}"/>
</ToggleButton>
<Popup
Placement="Bottom"
Name="Popup"
Focusable="False"
AllowsTransparency="True"
IsOpen="{TemplateBinding ComboBox.IsDropDownOpen}"
PopupAnimation="Fade">
<Grid
MinWidth="{TemplateBinding FrameworkElement.ActualWidth}"
MaxHeight="{TemplateBinding ComboBox.MaxDropDownHeight}"
Name="DropDown"
SnapsToDevicePixels="True">
<Border
BorderBrush="Gray"
BorderThickness="1.5"
Name="DropDownBorder"
Background="White">
<ScrollViewer
Margin="0"
SnapsToDevicePixels="True">
<ItemsPresenter />
</ScrollViewer>
</Border>
</Grid>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="Style_ListBox" TargetType="ListBox">
<Setter Property="BorderBrush" Value="{StaticResource Brush_PanelInnerBorder}"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Margin" Value="5"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="False"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel Background="{StaticResource Brush_PanelInnerBackground}"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Grid Background="{StaticResource Brush_PanelInnerBackground}" Margin="-.5">
<Border x:Name="BorderItem" Margin="0" ClipToBounds="True" BorderThickness="0" Style="{StaticResource Style_PanelInnerBorder}">
<Rectangle x:Name="BackgroundRec" Fill="Transparent" Stroke="Transparent" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" HorizontalAlignment="Left" VerticalAlignment="Top"/>
</Border>
<ContentPresenter Name="TheContentPresenter" Margin="5" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Border Margin="0" ClipToBounds="True" Style="{StaticResource Style_PanelInnerBorder}">
<Rectangle VerticalAlignment="Bottom" Width="{TemplateBinding Width}" Height="0"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="BorderItem" Property="Background" Value="{StaticResource Brush_Highlight}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
</Style>
Make sure you don't have IsHitTestVisible="False" on the ComboBox's style. Can you please post here the styles you're using?
I found the problem.
My ItemContainerStyle Template had a rectangle and i guess it was implying zindex somehow. When I expclicity told it to draw the content before the border and it's rectangle, it worked. i just had to add Panel.ZIndex="1" and it worked.

Resources