Custom WPF TreeViewItem style is behaving incorrectly when databound - wpf

I have adapted a TreeViewItemStyle to my need and it works great when I have hardcoded my TreeViewItems like so:
<TreeView Grid.Column="0"
HorizontalAlignment="Stretch"
Name="treeView1"
VerticalAlignment="Stretch" >
<TreeView.Items>
<TreeViewItem Header="McDonalds" IsExpanded="True">
<TreeViewItem.Items>
<TreeViewItem Header="Burger" IsExpanded="True" IsSelected="True">
<TreeViewItem.Items>
<TreeViewItem Header="Meat" />
</TreeViewItem.Items>
</TreeViewItem>
</TreeViewItem.Items>
</TreeViewItem>
<TreeViewItem Header="KFC" >
<TreeViewItem.Items>
<TreeViewItem Header="Chicken"/>
</TreeViewItem.Items>
</TreeViewItem>
<TreeViewItem Header="Hungry Jacks">
<TreeViewItem.Items>
<TreeViewItem Header="Onion Rings" />
</TreeViewItem.Items>
</TreeViewItem>
</TreeView.Items>
</TreeView>
(I cannot post images, so I must link to them)
Images of Differences
First image is perfect, but the second is created when I try to databind my TreeView. The code below works fine as far as Hierachical Data goes, but it displays differently than I want it to.
<TreeView DataContext="{Binding TopLevelCategories}">
<TreeView.Resources>
<HierarchicalDataTemplate DataType="{x:Type model:Category}" ItemsSource="{Binding Path=Category1}">
<TreeViewItem Header="{Binding Path=Name}" Tag="{Binding}" />
</HierarchicalDataTemplate>
</TreeView.Resources>
You can see the yucky effect that it creates.
What is going wrong?
My style is below (some brushes and animations removed for reading ease):
<Style x:Key="{x:Type TreeViewItem}" TargetType="{x:Type TreeViewItem}">
<Setter Property="Foreground" Value="#FFD0EBFF" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TreeViewItem}">
<Border x:Name="border1" Padding="1,1,0,0">
<Grid Width="Auto" Height="Auto">
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="19" Width="Auto" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="0.5*"/>
<RowDefinition Height="0.5*"/>
<RowDefinition Height="0.5*" />
</Grid.RowDefinitions>
<ToggleButton x:Name="Expander"
Style="{StaticResource ExpandCollapseToggleStyle}"
IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press"
Grid.RowSpan="2"/>
<Border Grid.Column="1" Grid.RowSpan="2" Background="#FF062B63" CornerRadius="0,0,0,0" x:Name="border1_0" Padding="1" ></Border>
<Border Width="Auto" Height="Auto" Grid.Column="1" Grid.RowSpan="2" Margin="1" CornerRadius="0,0,0,0" x:Name="border1_1" Background="{DynamicResource headerNormalGradient}">
</Border>
<Border SnapsToDevicePixels="True" Grid.Column="1" Grid.Row="0" Margin="1" CornerRadius="0,0,0,0" x:Name="border1_2" Background="{DynamicResource headerNormalGlare}">
</Border>
<Rectangle x:Name="leftGlare" HorizontalAlignment="Left" Margin="1" Width="1" Stroke="{x:Null}" StrokeThickness="0" Grid.Column="1" Grid.RowSpan="2">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1">
<GradientStop Color="#00C0DAFB" Offset="0"/>
<GradientStop Color="#57CDE2FF" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Border Grid.Column="1" Grid.RowSpan="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<ContentPresenter Margin="4,3,4,5" ContentSource="Header"/>
</Border>
<Rectangle x:Name="WhiteRectangle"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Grid.RowSpan="2"
Grid.Column="1"
Fill="{StaticResource Arrow58}"
Margin="0,0,-1,0"
Visibility="Hidden"/>
<Rectangle x:Name="BlackRectangle"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Grid.RowSpan="2"
Grid.Column="1"
Fill="{StaticResource Arrow57}"
Margin="0,0,0,0"
Visibility="Hidden"/>
<ItemsPresenter x:Name="ChildItems" Grid.Column="1" Grid.Row="2"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded"
Value="false">
<Setter TargetName="ChildItems"
Property="Visibility"
Value="Collapsed"/>
</Trigger>
<Trigger Property="HasItems"
Value="false">
<Setter TargetName="Expander"
Property="Visibility"
Value="Hidden"/>
</Trigger>
<Trigger Property="IsSelected"
Value="true">
<Setter TargetName="WhiteRectangle"
Property="Visibility"
Value="Visible" />
<Setter TargetName="BlackRectangle"
Property="Visibility"
Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

From the looks of the image this might be a problem with the item container. When you bind a collection to some ItemsControl you should not put the container item inside the DataTemplate, the ItemsControl will wrap your DataTemplate in an appropriate container itself (in this case a TreeViewItem).
So since your DataTemplate has another container in it you end up with two,

Related

How I get this kind of drop shadow Direction, Shadow depth, Color shown in the Tooltip (Click me) in this image in WPF?

I just want to know the Drop Shadow shadow depth, Direction, Blur radius, opacity of the tooltip? And what is the Hex Color code of a windows 10 Tooltip
You can get/set the values in the Tooltip's ControlTemplate.In my code, I set the name for the DropShadowEffect and get the value by using ElementName, then show the values in a Grid which included in parent grid.
<Window.Resources>
<Style x:Key="{x:Type ToolTip}" TargetType="ToolTip">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="HasDropShadow" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToolTip}">
<Grid x:Name="grid" Background="White" >
<Border x:Name="Border" Margin="0,0,0,0" BorderThickness="0.5" Width="{TemplateBinding Width}" Height="150">
<Border.BorderBrush>
<SolidColorBrush Color="Gray" />
</Border.BorderBrush>
<Border.Effect>
<DropShadowEffect x:Name="Myeffect" ShadowDepth="6" Direction="135" Color="Maroon" Opacity="0.35" BlurRadius="0.0"/>
</Border.Effect>
<ContentPresenter Margin="4,0" HorizontalAlignment="Left" VerticalAlignment="Top" />
</Border>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="60"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0">ShadowDepth:</TextBlock>
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding ElementName=Myeffect,Path=ShadowDepth}"><!--Useful information goes here.--></TextBlock>
<TextBlock Grid.Row="1" Grid.Column="0">Direction:</TextBlock>
<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding ElementName=Myeffect,Path=Direction}"><!--Useful information goes here.--></TextBlock>
<TextBlock Grid.Row="2" Grid.Column="0">Color:</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding ElementName=Myeffect,Path=Color}"><!--Useful information goes here.--></TextBlock>
<TextBlock Grid.Row="3" Grid.Column="0">Opacity:</TextBlock>
<TextBlock Grid.Row="3" Grid.Column="1" Text="{Binding ElementName=Myeffect,Path=Opacity}"><!--Useful information goes here.--></TextBlock>
<TextBlock Grid.Row="4" Grid.Column="0">BlurRadius:</TextBlock>
<TextBlock Grid.Row="4" Grid.Column="1" Text="{Binding ElementName=Myeffect,Path=BlurRadius}"><!--Useful information goes here.--></TextBlock>
</Grid>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasDropShadow" Value="True" >
<Setter TargetName="Border" Property="CornerRadius" Value="0" />
<Setter TargetName="Border" Property="SnapsToDevicePixels" Value="true" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Button Width="200" Height="50" HorizontalAlignment="Center" Content="Click Here">
<Button.Template >
<ControlTemplate TargetType="{x:Type Button}" >
<Border BorderBrush="{TemplateBinding Control.BorderBrush}" BorderThickness="1" CornerRadius="7,7,7,7">
<Border.Background>#FFDDDDDD</Border.Background>
<ContentPresenter Content="{TemplateBinding ContentControl.Content}" HorizontalAlignment="Center" VerticalAlignment="Center" ></ContentPresenter>
</Border>
</ControlTemplate>
</Button.Template>
<Button.ToolTip>
<ToolTip>
</ToolTip>
</Button.ToolTip>
</Button>
</Grid>
The result is as below picture shown:

How to change a resource templates' child value in XAML?

I have a custom button Style written in XAML. It is a button with image and text.
But the Image should be customizable. I need to change the Source property in designer.
My code:
<Window.Resources>
<ResourceDictionary>
<Style x:Key="SSbutton" TargetType="{x:Type Button}">
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Background" Value="Green"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Viewbox Stretch="Uniform">
<Border Background="{TemplateBinding Background}" Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center">
<!--I want to change this Source property-->
<Image Source="img/desktop.png" Width="30" HorizontalAlignment="Left" />
<TextBlock Margin="3,0,0,0" HorizontalAlignment="Right" VerticalAlignment="Center"
Text="{TemplateBinding Content}" FontSize="{TemplateBinding FontSize}"/>
</StackPanel>
</Border>
</Viewbox>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="90" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border Grid.Column="0" Grid.Row="1" Background="LightGreen">
<StackPanel >
<Button Style="{StaticResource SSbutton}" Width="90" Height="30" Content="Desktop" FontSize="13"
Foreground="White"/>
</StackPanel>
</Border>
</Grid>
How can I do that?
Piggy back in to the property using an arbitrary template binding with the handy dandy Tag property;
<Style x:Key="SSbutton" TargetType="{x:Type Button}">
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Background" Value="Green"/>
<!-- Set a default -->
<Setter Property="Tag" Value="img/desktop.png"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Viewbox Stretch="Uniform">
<Border Background="{TemplateBinding Background}" Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center">
<!--I want to change this Source property-->
<Image Source="{Binding Path=Tag, RelativeSource={RelativeSource TemplatedParent}}" Width="30" HorizontalAlignment="Left" />
<TextBlock Margin="3,0,0,0" HorizontalAlignment="Right" VerticalAlignment="Center"
Text="{TemplateBinding Content}" FontSize="{TemplateBinding FontSize}"/>
</StackPanel>
</Border>
</Viewbox>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Then at the instance;
<Button Style="{StaticResource SSbutton}"
Tag="Some/Other/Image.png"
Width="90" Height="30"
Content="Desktop"
FontSize="13" Foreground="White"/>
Hope this helps, cheers.
Edit: Updated to reflect path considerations for templatebinding in wpf as per OP's comments.

Textblock textwrapping not working

Can somebody give me an idea of why the Wrapping is not working inide these Textblocks?
I just don't know why, i changed all my stackpanels to grids to avoid the infinite space issue, but still it doesn't work...
<Border x:Name="SummaryRightSideContainerBorder" Grid.Column="1"
Margin="10,10,10,10" BorderBrush="Black"
BorderThickness="1">
<ContentControl x:Name="SummaryRightSideContainerContentControl" Content="{Binding SelectedItem, ElementName=SummaryTreeView}">
<ContentControl.Resources>
<DataTemplate DataType="{x:Type ViewModelsProject:ProjectViewModel}">
<StackPanel>
<TextBlock Text="Displaying Project DataContract stuff..." />
</StackPanel>
</DataTemplate>
<DataTemplate DataType="{x:Type ViewModelsProject:SequenceViewModel}">
<StackPanel>
<TextBlock Text="Displaying Sequence DataContract stuff..." />
</StackPanel>
</DataTemplate>
<DataTemplate DataType="{x:Type ViewModelsProject:GroupViewModel}">
<StackPanel>
<DataGrid Margin="10" AutoGenerateColumns="False"
Background="Transparent" BorderThickness="0"
CanUserAddRows="False"
CellStyle="{DynamicResource dgCellStyle}"
ColumnHeaderStyle="{DynamicResource dgHeader}"
DataContext="{Binding ElementName=SummaryTreeView,
Path=SelectedItem}"
GridLinesVisibility="None"
ItemsSource="{Binding Standards}"
Padding="0" RowHeaderWidth="0" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<DataGrid.Resources>
<Style x:Key="dgHeader" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<TextBlock Width="{TemplateBinding Width}"
Padding="5"
Text="{TemplateBinding Content}"
TextAlignment="Left">
<TextBlock.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0.0" Color="#373638" />
<GradientStop Offset="1.0" Color="#77797B" />
</LinearGradientBrush>
</TextBlock.Background>
</TextBlock>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Background" Value="Green" />
<Setter Property="Foreground" Value="White" />
<Setter Property="FontSize" Value="12" />
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0.0" Color="#373638" />
<GradientStop Offset="1.0" Color="#77797B" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="dgCellStyle" TargetType="{x:Type DataGridCell}">
<Style.Triggers>
<Trigger Property="DataGridCell.IsSelected" Value="True">
<Setter Property="Background" Value="White" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="BorderThickness" Value="0" />
</Trigger>
</Style.Triggers>
</Style>
</DataGrid.Resources>
<DataGrid.Columns>
<DataGridTemplateColumn Header="Standards">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="{Binding Path=StepMaster.Description}" VerticalAlignment="Center" FontWeight="SemiBold"/>
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="Standard: " VerticalAlignment="Top"/>
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Path=Standard}" Margin="5,0,0,0" VerticalAlignment="Top" TextWrapping="Wrap"/>
<TextBlock Grid.Row="1" Grid.Column="0" Text="Details: " VerticalAlignment="Top"/>
<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Path=Details}" Margin="5,0,0,0" VerticalAlignment="Top" TextWrapping="Wrap"/>
<TextBlock Grid.Row="2" Grid.Column="0" Text="Comments: " VerticalAlignment="Top"/>
<TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding Path=Comments}" Margin="5,0,0,0" VerticalAlignment="Top" TextWrapping="Wrap"/>
</Grid>
</Grid>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
</StackPanel>
</DataTemplate>
<DataTemplate DataType="{x:Type ViewModelsProject:StepViewModel}">
<UniformGrid Rows="3">
<TextBlock Margin="10" FontWeight="DemiBold"
Text="Standards" />
<TextBlock Margin="10" FontWeight="DemiBold"
Text="Standards Details" />
<StackPanel Orientation="Vertical">
<DataGrid Margin="10" AutoGenerateColumns="False"
<Another data grid is here />
</DataGrid>
</StackPanel>
</UniformGrid>
</DataTemplate>
</ContentControl.Resources>
</ContentControl>
</Border>
Turns out the only way to make this work is to use properties directly in the DataGrid:
MaxWidth="{Binding ElementName=SummaryRightSideContainerBorder, Path=ActualWidth}" ColumnWidth="*"
MaxWidth is used so that the Datagrid itself does not exceed its container boundaries and ColumnWidth is used so that the columns use 100% of the space available in the datagrid.
Blam's answer put me in the right track to find the solution.
As an answer you need to set second column to
<ColumnDefinition Width="*"/>
so it is constrained. * mean the size of the container. Right now it is growing outside the container (screen)
first column auto is OK

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