WPF ListBox items with template become invisible after grouping - wpf

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.

Related

WPF ListView IsSelected Set Border Opacity

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>

WPF ListView Highlight Color don't change

I have a ListView with three TextBlock for each Item.
The first one has the default color (black) and the others has the property Foreground set to gray.
When I select an item the color of the first TextBlock becomes blue but the others stay gray and are hard to read.
I want that all the text become white color when the item is selected.
How I do that ?
Edit :
My style :
<UserControl.Resources>
<Style TargetType="{x:Type ListViewItem}">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="White"/>
</Trigger>
</Style.Triggers>
</Style>
</UserControl.Resources>
My ListView
<ListView x:Name="lvResultat" Grid.Row="0" Grid.Column="1" Background="{x:Null}"
Margin="4"
HorizontalContentAlignment="Stretch"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
IsSynchronizedWithCurrentItem="True"
ItemsSource="{Binding ResultatsRecherche}" SelectedItem="{Binding ResultatSelectione, Mode=TwoWay}" BorderBrush="{x:Null}" MouseDoubleClick="lvResultat_MouseLeftDoubleClick" >
<ListView.ItemTemplate>
<DataTemplate DataType="viewModel:ResultatRechercheViewModel">
<Grid Height="86" Margin="2" >
<Grid.RowDefinitions>
<RowDefinition Height="1.5*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="0.5*"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding Titre}"
FontSize="20" FontWeight="Bold" />
<TextBlock Text="{Binding SousTitre}" Grid.Row="1"
FontStyle="Italic" Foreground="Gray"/>
<TextBlock Text="{Binding Resume}" Grid.Row="2" TextTrimming="WordEllipsis"
Foreground="Gray"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I also tried things like
<Style TargetType="ListViewItem">
<Style.Resources>
<!--<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="White" />-->
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="White" />
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="White" />
</Style.Resources>
</Style>
EDIT 2 :
I have discovered that the custom style changes the color of Textblock which have the default property as Foreground (black).
If I specife Black for the color of the text of the first textblock, the text doesn't change anymore of color when the item is selected.
Picture :
You could achieve what you are trying to do by converting your code from having DataTemplate for a ListViewItem to having a ControlTemplate
This is what I tried:
ListViewItem Style:
<Style TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border x:Name="ContentBorder"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Margin="4">
<Grid Height="86" Margin="2" >
<Grid.RowDefinitions>
<RowDefinition Height="1.5*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="0.5*"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding Titre}"
FontSize="20" FontWeight="Bold" />
<TextBlock Text="{Binding SousTitre}" Grid.Row="1" Name="st"
FontStyle="Italic" Foreground="Gray"/>
<TextBlock Text="{Binding Resume}" Grid.Row="2" TextTrimming="WordEllipsis" Name="r"
Foreground="Gray"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" TargetName="st" Value="White" />
<Setter Property="Foreground" TargetName="r" Value="White" />
<Setter Property="Background" TargetName="ContentBorder" Value="DeepSkyBlue" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and then I removed DataTemplate from the ListView XAML:
<ListView x:Name="lvResultat" Grid.Row="0" Grid.Column="1" Background="{x:Null}"
Margin="4"
HorizontalContentAlignment="Stretch"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
IsSynchronizedWithCurrentItem="True"
ItemsSource="{Binding ResultatsRecherche}" SelectedItem="{Binding ResultatSelectione, Mode=TwoWay}" BorderBrush="{x:Null}" >
</ListView>
However, if you must use DateTemplate, then what you could do is have a property called IsSelected on your ViewModel, ResultatRechercheViewModel and then have DataTriggers on that property in your DataTemplate.
Updated DataTemplate:
<ListView.ItemTemplate>
<DataTemplate DataType="viewModel:ResultatRechercheViewModel">
<Grid Height="86" Margin="2" >
<Grid.RowDefinitions>
<RowDefinition Height="1.5*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="0.5*"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding Titre}"
FontSize="20" FontWeight="Bold" />
<TextBlock Text="{Binding SousTitre}" Grid.Row="1" Name="st"
FontStyle="Italic" Foreground="Gray"/>
<TextBlock Text="{Binding Resume}" Grid.Row="2" TextTrimming="WordEllipsis" Name="r"
Foreground="Gray"/>
</Grid>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding IsSelected}" Value="True">
<Setter Property="Foreground" TargetName="st" Value="White" />
<Setter Property="Foreground" TargetName="r" Value="White" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ListView.ItemTemplate>
And, you need to update your ViewModel code to set IsSelected property, Below is code from my MainViewModel:
public ResultatRechercheViewModel ResultatSelectione
{
get { return _resultatSelectione; }
set
{
if (_resultatSelectione != null)
{
_resultatSelectione.IsSelected = false;
}
_resultatSelectione = value;
_resultatSelectione.IsSelected = true;
}
}
Hope this resolves your problem or gives you some ideas to resolve your problem.
Try this syntax
<ListView>
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="White"/>
</Trigger>
</Style.Triggers>
</Style>
</ListView.ItemContainerStyle>
...
</ListView>
Foreground Try use style for listView items:
<Style TargetType="{x:Type ListViewItem}">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="White"/>
</Trigger>
</Style.Triggers>
</Style>

Why is my drop shadow obscured by other items?

I have an ItemsControl with a data template, and when the user mouses over certain parts of an Item, I want a drop shadow to appear. However, the drop shadow is being cut off by the subsequent item in the ItemsControl.
XAML:
<Window x:Class="DropShadowTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:po ="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
Title="MainWindow"
Height="350" Width="525"
Loaded="Window_Loaded"
UseLayoutRounding="True"
SnapsToDevicePixels="True">
<Window.Resources>
<DropShadowEffect po:Freeze="true" x:Key="BuyOrderFlagShadow" Color="#FF000000" Direction="0" ShadowDepth="0" BlurRadius="15" RenderingBias ="Quality" Opacity =".65"/>
</Window.Resources>
<Grid>
<ItemsControl Name="itemsControl" Margin="25">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid Name="borderLeft" Grid.Column="0" Background="LightGray" >
<Border BorderBrush="Black" BorderThickness="0">
<TextBlock Text="{Binding Name}" Margin="5"/>
</Border>
</Grid>
<Grid Name="borderCenter" Grid.Column="1" Background="LightGray" >
<Border BorderBrush="Black" BorderThickness="0">
<TextBlock Text="{Binding City}" Margin="5"/>
</Border>
</Grid>
<Grid Name="borderRight" Grid.Column="2" Background="LightGray" >
<Border BorderBrush="Black" BorderThickness="0">
<TextBlock Text="{Binding State}" Margin="5"/>
</Border>
</Grid>
</Grid>
<DataTemplate.Triggers>
<Trigger Property="IsMouseOver" SourceName="borderLeft" Value="true">
<Setter Property="Effect" Value="{StaticResource BuyOrderFlagShadow}" TargetName="borderLeft"/>
<Setter Property="ZIndex" Value="1000" TargetName="borderLeft"/>
</Trigger>
<Trigger Property="IsMouseOver" SourceName="borderRight" Value="true">
<Setter Property="Effect" Value="{StaticResource BuyOrderFlagShadow}" TargetName="borderRight"/>
<Setter Property="ZIndex" Value="1000" TargetName="borderRight"/>
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</Window>
And here's what's happening when I mouse over an item:
I added the ZIndex property to the Triggers in an attempt to fix the issue. Prior to doing that, the drop shadow only appeared on the left and top sides of the grid. Any help is appreciated.
Thanks to user2760623, I investigated the ZIndex for the entire item. Using this question, I came up with the following solution using a ItemContainerStyle:
<Window x:Class="DropShadowTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:po ="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
Title="MainWindow"
Height="350" Width="525"
Loaded="Window_Loaded"
UseLayoutRounding="True"
SnapsToDevicePixels="True">
<Window.Resources>
<DropShadowEffect po:Freeze="true" x:Key="BuyOrderFlagShadow" Color="#FF000000" Direction="0" ShadowDepth="0" BlurRadius="15" RenderingBias ="Quality" Opacity =".65"/>
</Window.Resources>
<Grid>
<ItemsControl Name="itemsControl" Margin="25">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border Name="borderLeft" Panel.ZIndex="-1" Grid.Column="0" Background="LightGray" BorderBrush="Black" BorderThickness="0">
<TextBlock Text="{Binding Name}" Margin="5"/>
</Border>
<Border Name="borderCenter" Panel.ZIndex="-1" Grid.Column="1" Background="LightGray" BorderBrush="Black" BorderThickness="0">
<TextBlock Text="{Binding City}" Margin="5"/>
</Border>
<Border Name="borderRight" Panel.ZIndex="-1" Grid.Column="2" Background="LightGray" BorderBrush="Black" BorderThickness="0">
<TextBlock Text="{Binding State}" Margin="5"/>
</Border>
</Grid>
<DataTemplate.Triggers>
<Trigger Property="IsMouseOver" SourceName="borderLeft" Value="true">
<Setter Property="Effect" Value="{StaticResource BuyOrderFlagShadow}" TargetName="borderLeft"/>
<Setter Property="Panel.ZIndex" Value="100" TargetName="borderLeft"/>
</Trigger>
<Trigger Property="IsMouseOver" SourceName="borderRight" Value="true">
<Setter Property="Effect" Value="{StaticResource BuyOrderFlagShadow}" TargetName="borderRight"/>
<Setter Property="Panel.ZIndex" Value="100" TargetName="borderRight"/>
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemContainerStyle>
<Style TargetType="{x:Type ContentPresenter}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Panel.ZIndex" Value="100"/>
</Trigger>
</Style.Triggers>
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
</Grid>
</Window>
Now I get the behavior I expected:

How enable scroll bar for only few item listBox?

I have a listbox i want that except first index all other items are scrollable.
I have a sample code here. Here my list box first item is behaing like header of list box. So now i dont want to scroll header. and rest of item's should be scrollable.`
<ListBox x:Name="FieldOrderListBox" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" HorizontalContentAlignment="Stretch" SelectedIndex="0" IsSynchronizedWithCurrentItem="True"
ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollBarVisibility="Hidden" SelectionChanged="FieldOrderListBox_SelectionChanged">
<ListBox.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="#FF479EF3"></SolidColorBrush>
</ListBox.Resources>
<ListBox.ItemTemplate>
<DataTemplate x:Name="MyTemplate">
<Grid Margin="-5,-1,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="FieldName" MinWidth="10" MaxWidth="300"/>
<ColumnDefinition Width="2"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.Style>
<Style TargetType="{x:Type Grid}">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource PreviousData}}" Value="{x:Null}">
<Setter Property="TextBlock.TextAlignment" Value="Center"/> <Setter Property="Background" Value="#E5E5E5"/>
<Setter Property="TextBlock.Foreground" Value="Black"/>
<Setter Property="Border.BorderThickness" Value="0.5,0.5,0,2"/>
<Setter Property="Border.BorderBrush" Value="Black"/>
<Setter Property="Border.Margin" Value="0,-1,0,0"/>
<Setter Property="Border.Padding" Value="5,0,0,5"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Grid.Style>
<Border BorderBrush="Black" Grid.Column="0" BorderThickness="0.5,0.0,0.5,0.5" IsHitTestVisible="False" OverridesDefaultStyle="False">
<TextBlock Text="{Binding Name}" Grid.Column="0" ToolTip="{Binding Name}" Margin="5,0,2,0" VerticalAlignment="Center"/>
</Border>
<GridSplitter Grid.Column="1" Width="2" HorizontalAlignment="Left" Background="DarkGray" Margin="-2,0,-1,0"/>
<Border BorderBrush="Black" BorderThickness="0,0.0,0.5,0.5" Margin="-2,0,0,0" Padding="0,5,0,0" Grid.Column="2">
<TextBlock Text="{Binding AliasName}" Grid.Column="1" ToolTip="{Binding AliasName}" Margin="5,0,2,0" VerticalAlignment="Center" HorizontalAlignment="Stretch"/>
</Border>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

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