ComboBox drop down not dropping - wpf

I have a style for a ComboBox that I've been using for awhile, but I wanted to tweak the color of the drop down arrow. To do this, I just took the default template for the comboBox and pasted it into my style, and changed the arrow color fill.
It looks perfect - until I hit the drop down! Nothing happens. If I cut the template from the style, everything works fine again. It isn't the arrow fill color change though, as I get the same behavior with it's default black arrow too.
A related question implies it may have something to do with the ToggleButton portion of the ttemplate, but I haven't solved it yet.
Cheers,
Berryl
<!--ComboBoxStyle-->
<Style x:Key="ComboBoxStyle" TargetType="ComboBox">
<Setter Property="Background" Value="{StaticResource headerBrush}" />
<Setter Property="Foreground" Value="White" />
<Setter Property="BorderBrush" Value="{StaticResource headerBorderBrush}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="MinWidth" Value="100" />
<Setter Property="MaxWidth" Value="175" />
<Setter Property="MinHeight" Value="25" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Padding" Value="5" />
<Setter Property="Margin" Value="3" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
... std combobox template with white arrow <================
</Setter.Value>
</Setter>
Sample usage that works
<ComboBox Style="{StaticResource ComboBoxStyle}"
ItemContainerStyle="{StaticResource ComboBoxItemStyle}"
ItemsSource="{Binding Path=Departments}"
SelectedItem="{Binding Path=Department, Mode=TwoWay}"
...
/>
Here is the template
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBox"
xmlns:s="clr-namespace:System;assembly=mscorlib"
xmlns:mwt="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"
>
<Grid Name="MainGrid" SnapsToDevicePixels="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="0" MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" />
</Grid.ColumnDefinitions>
<Popup IsOpen="False" Placement="Bottom" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" AllowsTransparency="True" Name="PART_Popup" Margin="1,1,1,1" Grid.ColumnSpan="2">
<mwt:SystemDropShadowChrome Color="#00FFFFFF" Name="Shdw" MinWidth="0" MaxHeight="{TemplateBinding ComboBox.MaxDropDownHeight}">
<Border BorderThickness="1,1,1,1" BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}" Name="DropDownBorder">
<ScrollViewer Name="DropDownScrollViewer">
<Grid RenderOptions.ClearTypeHint="Enabled">
<Canvas Width="0" Height="0" HorizontalAlignment="Left" VerticalAlignment="Top">
<Rectangle Fill="{x:Null}" Name="OpaqueRect" Width="Auto" Height="Auto" />
</Canvas>
<ItemsPresenter Name="ItemsPresenter" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" KeyboardNavigation.DirectionalNavigation="Contained" />
</Grid>
</ScrollViewer>
</Border>
</mwt:SystemDropShadowChrome>
</Popup>
<ToggleButton IsChecked="False" BorderBrush="{TemplateBinding Border.BorderBrush}" Background="{TemplateBinding Panel.Background}" Grid.ColumnSpan="2">
<ToggleButton.Style>
<Style TargetType="ToggleButton">
<Style.Resources>
<ResourceDictionary />
</Style.Resources>
<Setter Property="FrameworkElement.OverridesDefaultStyle">
<Setter.Value>
<s:Boolean>True</s:Boolean>
</Setter.Value>
</Setter>
<Setter Property="KeyboardNavigation.IsTabStop">
<Setter.Value>
<s:Boolean>False</s:Boolean>
</Setter.Value>
</Setter>
<Setter Property="UIElement.Focusable">
<Setter.Value>
<s:Boolean>False</s:Boolean>
</Setter.Value>
</Setter>
<Setter Property="ButtonBase.ClickMode">
<Setter.Value>
<x:Static Member="ClickMode.Press" />
</Setter.Value>
</Setter>
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<mwt:ButtonChrome Background="{TemplateBinding Panel.Background}"
BorderBrush="{TemplateBinding Border.BorderBrush}"
RenderMouseOver="{TemplateBinding UIElement.IsMouseOver}"
RenderPressed="{TemplateBinding ButtonBase.IsPressed}"
Name="Chrome" SnapsToDevicePixels="True">
<Grid Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" HorizontalAlignment="Right">
<Path Data="M0,0L3.5,4 7,0z" Fill="#FF000000" Name="Arrow" Margin="3,1,0,0"
HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</mwt:ButtonChrome>
<ControlTemplate.Triggers>
<Trigger Property="ToggleButton.IsChecked">
<Setter Property="mwt:ButtonChrome.RenderPressed" TargetName="Chrome">
<Setter.Value>
<s:Boolean>True</s:Boolean>
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>True</s:Boolean>
</Trigger.Value>
</Trigger>
<Trigger Property="UIElement.IsEnabled">
<Setter Property="Shape.Fill" TargetName="Arrow">
<Setter.Value>
<SolidColorBrush>#FFAFAFAF</SolidColorBrush>
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>False</s:Boolean>
</Trigger.Value>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ToggleButton.Style>
</ToggleButton>
<ContentPresenter Content="{TemplateBinding ComboBox.SelectionBoxItem}" ContentTemplate="{TemplateBinding ComboBox.SelectionBoxItemTemplate}" ContentStringFormat="{TemplateBinding ComboBox.SelectionBoxItemStringFormat}" Margin="{TemplateBinding Control.Padding}" HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" IsHitTestVisible="False" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Popup.HasDropShadow" SourceName="PART_Popup">
<Setter Property="FrameworkElement.Margin" TargetName="Shdw">
<Setter.Value>
<Thickness>0,0,5,5</Thickness>
</Setter.Value>
</Setter>
<Setter Property="mwt:SystemDropShadowChrome.Color" TargetName="Shdw">
<Setter.Value>
<Color>#71000000</Color>
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>True</s:Boolean>
</Trigger.Value>
</Trigger>
<Trigger Property="ItemsControl.HasItems">
<Setter Property="FrameworkElement.Height" TargetName="DropDownBorder">
<Setter.Value>
<s:Double>95</s:Double>
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>False</s:Boolean>
</Trigger.Value>
</Trigger>
<Trigger Property="UIElement.IsEnabled">
<Setter Property="TextElement.Foreground">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.GrayTextBrushKey}" />
</Setter.Value>
</Setter>
<Setter Property="Panel.Background">
<Setter.Value>
<SolidColorBrush>#FFF4F4F4</SolidColorBrush>
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>False</s:Boolean>
</Trigger.Value>
</Trigger>
<Trigger Property="ItemsControl.IsGrouping">
<Setter Property="ScrollViewer.CanContentScroll">
<Setter.Value>
<s:Boolean>False</s:Boolean>
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>True</s:Boolean>
</Trigger.Value>
</Trigger>
<Trigger Property="ScrollViewer.CanContentScroll" SourceName="DropDownScrollViewer">
<Setter Property="Canvas.Top" TargetName="OpaqueRect">
<Setter.Value>
<Binding Path="VerticalOffset" ElementName="DropDownScrollViewer" />
</Setter.Value>
</Setter>
<Setter Property="Canvas.Left" TargetName="OpaqueRect">
<Setter.Value>
<Binding Path="HorizontalOffset" ElementName="DropDownScrollViewer" />
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>False</s:Boolean>
</Trigger.Value>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>

You have IsOpen set to False on the Popup and IsChecked set to False on the ToggleButton. Both of these are bound to ComboBox.IsDropDownOpen in the standard template, which is how the ToggleButton causes the Popup to open. Set the bindings like this:
<Popup IsOpen="{Binding Path=IsDropDownOpen,
RelativeSource={RelativeSource TemplatedParent}}" ...
<ToggleButton IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay,
RelativeSource={RelativeSource TemplatedParent}}" ...

Thank you, I had a problem because the Popup IsOpen binding was {TemplateBinding IsDropDownOpen} and not the binding you show here.
Ido.

Related

WPF GridColumnHeader Background Property cannot be set

i'm trying to set the Background of the Column Header to a dark grey color (#6A767D) but it doesn´t work. Instead the Header Background is the Color of the AlternatingRowBackground Property. Maybe the Background is somehow overwritten? I'm not sure if you need more than just the xaml-code of the data grid. Any suggestions?
<DataGrid x:Name="DataGrid"
AlternatingRowBackground="#F8F8F8" Margin="40,60,40,45"
Grid.Column="2" Grid.ColumnSpan="10"
Grid.Row="1" Grid.RowSpan="12"
RowHeight="47"
ColumnHeaderHeight="47"
Padding="0"
FontSize="18"
ColumnWidth="Auto"
HorizontalScrollBarVisibility="Visible"
AutoGenerateColumns ="False"
GridLinesVisibility="All"
SelectionUnit="Cell"
ContextMenu="{StaticResource ctMenu}">
<DataGrid.Resources>
<Style x:Key="DatagridColumnHeaderStyle_Basic" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Width" Value="Auto"/>
<Setter Property="Background" Value="#6A767D" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Padding" Value="10" />
<Setter Property="FontWeight" Value="SemiBold" />
<Setter Property="FontFamily" Value="Arial" />
<Setter Property="TextElement.Foreground" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid Name="HedearGrid" Background="AliceBlue" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ContentPresenter Margin="6,3,6,3" VerticalAlignment="Center" Grid.Column="0" />
<Path x:Name="SortArrow" Visibility="Collapsed" Data="M0,0 L1,0 0.5,1 z" Stretch="Fill"
Grid.Column="1" Width="8" Height="6" Fill="Blue" Margin="0,0,8,0"
VerticalAlignment="Center" RenderTransformOrigin="0.5,0.4" />
<Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" Cursor="SizeWE"
Grid.Column="1" >
<Thumb.Style>
<Style TargetType="{x:Type Thumb}">
<Setter Property="Width" Value="2" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Border Background="Transparent"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Thumb.Style>
</Thumb>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="SortDirection" Value="Ascending">
<Setter TargetName="SortArrow" Property="Visibility" Value="Visible" />
<Setter TargetName="SortArrow" Property="RenderTransform">
<Setter.Value>
<RotateTransform Angle="180" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="SortDirection" Value="Descending">
<Setter TargetName="SortArrow" Property="Visibility" Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DataGrid.Resources>
<DataGrid.RowStyle>
<Style TargetType="DataGridRow">
<EventSetter Event="MouseUp" Handler="Row_Click"/>
</Style>
</DataGrid.RowStyle>
Two issues:
You never actually assign the style to be used. I would recommend you define the style in the resources of your Window or whatever panel the DataGrid is placed in.
<Window.Resources>
<Style x:Key="DatagridColumnHeaderStyle_Basic" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Width" Value="Auto"/>
<Setter Property="Background" Value="#6A767D" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Padding" Value="10" />
<Setter Property="FontWeight" Value="SemiBold" />
<Setter Property="FontFamily" Value="Arial" />
<Setter Property="TextElement.Foreground" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid Name="HedearGrid" Background="{TemplateBinding Background}" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ContentPresenter Margin="6,3,6,3" VerticalAlignment="Center" Grid.Column="0" />
<Path x:Name="SortArrow" Visibility="Collapsed" Data="M0,0 L1,0 0.5,1 z" Stretch="Fill"
Grid.Column="1" Width="8" Height="6" Fill="Blue" Margin="0,0,8,0"
VerticalAlignment="Center" RenderTransformOrigin="0.5,0.4" />
<Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" Cursor="SizeWE"
Grid.Column="1" >
<Thumb.Style>
<Style TargetType="{x:Type Thumb}">
<Setter Property="Width" Value="2" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Border Background="Transparent"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Thumb.Style>
</Thumb>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="SortDirection" Value="Ascending">
<Setter TargetName="SortArrow" Property="Visibility" Value="Visible" />
<Setter TargetName="SortArrow" Property="RenderTransform">
<Setter.Value>
<RotateTransform Angle="180" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="SortDirection" Value="Descending">
<Setter TargetName="SortArrow" Property="Visibility" Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
You can then assign it to your DataGrid like this:
<DataGrid ColumnHeaderStyle="{StaticResource DatagridColumnHeaderStyle_Basic}"/>
Alternatively, just remove x:Key="DatagridColumnHeaderStyle_Basic", then you don't have to specify.
(fixed for you in the above code) you override your Background with AliceBlue:
<Grid Name="HedearGrid" Background="AliceBlue">
should be:
<Grid Name="HedearGrid" Background="{TemplateBinding Background">

WPF - "g" is cut off sometimes

I have a combobox in which I display simple strings. At some point this looks like the following:
This is ok. now ein scroll down one step:
Now the "g" is cut off at the bottom. What I have tried so far: Set the height property explicit to Auto. Changing Padding and Margin. Nothing worked. Had some of you the same problem or any suggestions what I could try?
EDIT
Here the related XAML:
<Style x:Key="GraphicEditorInplaceLabelEditStyle">
<Setter Property="ComboBox.Focusable" Value="True"/>
<Setter Property="ComboBox.IsEditable" Value="True"/>
<Setter Property="ComboBox.IsReadOnly" Value="False"/>
<Setter Property="ComboBox.IsTextSearchEnabled" Value="True"/>
<!--Use Separators for empty entries-->
<Setter Property="ComboBox.ItemContainerStyle">
<Setter.Value>
<Style TargetType="{x:Type ComboBoxItem}" BasedOn="{StaticResource {x:Type ComboBoxItem}}">
<Style.Triggers>
<DataTrigger Binding="{Binding}" Value="">
<Setter Property="IsEnabled" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBoxItem}">
<Separator HorizontalAlignment="Stretch"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Setter.Value>
</Setter>
<Setter Property="ComboBox.Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBox">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Border Validation.ValidationAdornerSiteFor="{Binding RelativeSource={RelativeSource FindAncestor,AncestorType=ComboBox}}" Background="{StaticResource ComboBoxActiveBackgroundBrush}" BorderBrush="{StaticResource ComboBoxBorderBrush}" BorderThickness="1" CornerRadius="2">
<Grid>
<ContentPresenter Margin="3,3,3,3" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" HorizontalAlignment="Left" IsHitTestVisible="False" Name="ContentSite" VerticalAlignment="Center" />
<TextBlock Style="{x:Null}" x:Name="PART_TextBackground" Margin="3,3,3,3" Background="Transparent" Focusable="False" FontStyle="Italic" Foreground="LightGray" HorizontalAlignment="Left" VerticalAlignment="Center"/>
<TextBox Style="{x:Null}" x:Name="PART_EditableTextBox" Margin="3,3,3,3" Background="Transparent" Focusable="True" HorizontalAlignment="Left" IsReadOnly="{TemplateBinding IsReadOnly}" VerticalAlignment="Center" Visibility="Hidden">
<TextBox.Template>
<ControlTemplate TargetType="TextBox">
<Border x:Name="PART_ContentHost" Background="{TemplateBinding Background}" Focusable="False" />
</ControlTemplate>
</TextBox.Template>
</TextBox>
<Popup AllowsTransparency="True" Focusable="False" IsOpen="{TemplateBinding IsDropDownOpen}" Name="Popup" Placement="Bottom" PopupAnimation="Slide">
<Grid MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{TemplateBinding ActualWidth}" Name="DropDown" SnapsToDevicePixels="True">
<Border x:Name="DropDownBorder" Background="{StaticResource ComboBoxActiveBackgroundBrush}" BorderBrush="{StaticResource ComboBoxBorderBrush}" BorderThickness="1" />
<ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True" CanContentScroll="False">
<StackPanel KeyboardNavigation.DirectionalNavigation="Contained" IsItemsHost="True" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
</Border>
<ToggleButton Grid.Column="1" ClickMode="Press" Focusable="false" IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}" Name="ToggleButton" VerticalAlignment="Bottom">
<ToggleButton.Template>
<ControlTemplate TargetType="ToggleButton">
<Grid>
<Border x:Name="Border"
CornerRadius="2"
Background="{StaticResource ComboBoxActiveBackgroundBrush}"
BorderBrush="{StaticResource ComboBoxBorderBrush}"
BorderThickness="1"
Margin="0,0,0,0" />
<Rectangle x:Name="arrow"
Height="6"
Width="8"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="2"
Fill="{StaticResource ComboBoxArrowDownBrush}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="ToggleButton.IsMouseOver"
Value="true">
<Setter TargetName="Border"
Property="Background"
Value="{StaticResource ComboBoxMouseOverBackgroundBrush}" />
<Setter TargetName="arrow"
Property="Fill"
Value="{StaticResource ComboBoxArrowDownMouseOverBrush}"></Setter>
</Trigger>
<Trigger Property="ToggleButton.IsChecked"
Value="true">
<Setter TargetName="Border"
Property="Background"
Value="{StaticResource ComboBoxPressedBackgroundBrush}" />
<Setter Property="Fill"
TargetName="arrow"
Value="{StaticResource ComboBoxArrowUpBrush}" />
</Trigger>
<Trigger Property="IsEnabled"
Value="false">
<Setter TargetName="Border"
Property="Background"
Value="{StaticResource ComboBoxInactiveBackgroundBrush}" />
<Setter Property="Foreground"
Value="{StaticResource FontInactiveBrush}" />
<Setter Property="Fill"
TargetName="arrow"
Value="{StaticResource ComboBoxArrowDownInactiveBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ToggleButton.Template>
<ToggleButton.RenderTransform>
<TranslateTransform X="-3" Y="0"></TranslateTransform>
</ToggleButton.RenderTransform>
</ToggleButton>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasItems" Value="false">
<Setter Property="Visibility" TargetName="ToggleButton" Value="Collapsed" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{StaticResource FontInactiveBrush}" />
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false" />
</Trigger>
<Trigger Property="Popup.AllowsTransparency" SourceName="Popup" Value="true">
<Setter Property="CornerRadius" TargetName="DropDownBorder" Value="4" />
<Setter Property="Margin" TargetName="DropDownBorder" Value="0,2,0,0" />
</Trigger>
<Trigger Property="IsEditable" Value="true">
<Setter Property="IsTabStop" Value="false" />
<Setter Property="Visibility" TargetName="PART_EditableTextBox" Value="Visible" />
<Setter Property="Visibility" TargetName="ContentSite" Value="Hidden" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I tried to change the padding/margin of the ComboBoxItem as well as the item host stackpanel.

Tab Item and Tab Control Border Style

How do I style the Tab Control Border so that the selected Tab Item does not have a line underneath it?
These are my Tab Control and Tab Item styles so far.
<!-- Tab control styling -->
<Style TargetType="{x:Type TabControl}">
<Setter Property="Padding" Value="10,5,10,5" />
<Setter Property="Margin" Value="3.5" />
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}" />
</Style>
<!-- Tab item styling -->
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<Border
Name="Border"
Background="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"
BorderBrush="Black"
BorderThickness="1,1,1,0"
CornerRadius="3,3,0,0"
MinWidth="120">
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="12,2,12,2"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True" >
<Setter Property="Background" TargetName="Border" Value="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}" />
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock FontWeight="Bold" Text="{Binding}"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsMouseOver" Value="True" >
<Setter Property="Background" TargetName="Border" Value="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}" />
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock FontWeight="Bold" Text="{Binding}"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsSelected" Value="True" >
<Setter Property="Background" TargetName="Border" Value="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}" />
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock FontWeight="Bold" Text="{Binding}"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
If I can achieve the look displayed in the screenshot without having to overload the tab item control template then I don't have an issue as the default tab item template doesn't have the line underneath it on the selected tab. I haven't been able to do this so far. Thanks for your help.
The XAML below is how I have overridden the TabControl to solve this problem. The key piece of info is the Margin property of the HeaderPanel. You will see that the bottom margin is -1, which shifts it down just enough to cover up that line.
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid KeyboardNavigation.TabNavigation="Local">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TabPanel x:Name="HeaderPanel"
Grid.Row="0"
Panel.ZIndex="1"
Margin="0,0,4,-1"
IsItemsHost="True"
KeyboardNavigation.TabIndex="1"
Background="Transparent" />
<Border x:Name="Border"
Grid.Row="1"
BorderThickness="1"
KeyboardNavigation.TabNavigation="Local"
KeyboardNavigation.DirectionalNavigation="Contained"
KeyboardNavigation.TabIndex="2">
<Border.Background>
<SolidColorBrush Color="White"/>
</Border.Background>
<Border.BorderBrush>
<SolidColorBrush Color="White"/>
</Border.BorderBrush>
<ContentPresenter x:Name="PART_SelectedContentHost"
Margin="4"
ContentSource="SelectedContent" />
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Add property Padding="0,0,0,0" to tab control :-)
Instead of modifying tabcontrol template, you may as well just modify the TabItem template, by adding two lines to cover up the border, and using minus margins for covering up.
(Please take a look at "TopLineCover" and "BottomLineCover" borders.)
<Style TargetType="TabItem" BasedOn="{StaticResource {x:Type TabItem}}">
<Setter Property="Foreground" Value="{DynamicResource VsBrush.WindowText}"/>
<Setter Property="Background" Value="{DynamicResource VsBrush.Window}"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid SnapsToDevicePixels="true">
<Border x:Name="HeaderBorder" Padding="8,3,8,3" BorderThickness="1,1,1,0"
Background="{DynamicResource {x:Static commonControls:ColorService.JobViewHeaderBrushKey}}"
BorderBrush="{DynamicResource {x:Static commonControls:ColorService.JobViewHeaderBorderBrushKey}}">
<ContentPresenter x:Name="Content" ContentSource="Header"
HorizontalAlignment="{Binding Path=HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"
VerticalAlignment="{Binding Path=VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"
/>
</Border>
<Border x:Name="TopLineCover" BorderThickness="1,1,1,0" Margin="0,-2,0,0" Height="3" Panel.ZIndex="100"
Background="{DynamicResource VsBrush.Window}" BorderBrush="{DynamicResource {x:Static commonControls:ColorService.JobViewHeaderBorderBrushKey}}"
VerticalAlignment="Top" HorizontalAlignment="Stretch" Visibility="Collapsed"/>
<Border x:Name="BottomLineCover" BorderThickness="0,0,0,3" Margin="1,0,1,-2" Panel.ZIndex="100" BorderBrush="{DynamicResource VsBrush.Window}"
VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Visibility="Collapsed"/>
</Grid>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True"/>
<Condition Property="IsSelected" Value="False"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="HeaderBorder" Value="{DynamicResource VsBrush.Window}"/>
</MultiTrigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" TargetName="HeaderBorder" Value="{DynamicResource VsBrush.Window}"/>
<Setter Property="Visibility" TargetName="TopLineCover" Value="Visible"/>
<Setter Property="Visibility" TargetName="BottomLineCover" Value="Visible"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
In the past I've accomplished this by making the TabItem extend a little further down then it's allocated, so its actually drawn on top of the border element and hides it
I can't remember how I did it exactly, but I think it was with a negative margin on the bottom of the TabItem

Default combobox template. Popup width

I want add some buttons to default combobox template, so I override its template.
I use this:
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="l:RefreshableComboBox">
<Grid Name="MainGrid" SnapsToDevicePixels="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="0" MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" />
</Grid.ColumnDefinitions>
<Popup IsOpen="{Binding Path=IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}" Placement="Bottom" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" AllowsTransparency="True" Name="PART_Popup" Margin="1,1,1,1" Grid.ColumnSpan="2" >
<mwt:SystemDropShadowChrome Color="#00FFFFFF" Name="Shdw" MinWidth="0" MaxHeight="{TemplateBinding ComboBox.MaxDropDownHeight}">
<Border BorderThickness="1,1,1,1" BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}" Name="DropDownBorder">
<ScrollViewer Name="DropDownScrollViewer">
<Grid RenderOptions.ClearTypeHint="Enabled">
<Canvas Width="0" Height="0" HorizontalAlignment="Left" VerticalAlignment="Top">
<Rectangle Fill="{x:Null}" Name="OpaqueRect" Width="Auto" Height="Auto" />
</Canvas>
<ItemsPresenter Name="ItemsPresenter" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" KeyboardNavigation.DirectionalNavigation="Contained" />
</Grid>
</ScrollViewer>
</Border>
</mwt:SystemDropShadowChrome>
</Popup>
<ToggleButton x:Name="ToggleButton" IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" BorderBrush="{TemplateBinding Border.BorderBrush}" Background="{TemplateBinding Panel.Background}" Grid.ColumnSpan="2">
<ToggleButton.Style>
<Style TargetType="ToggleButton">
<Style.Resources>
<ResourceDictionary />
</Style.Resources>
<Setter Property="FrameworkElement.OverridesDefaultStyle">
<Setter.Value>
<s:Boolean>True</s:Boolean>
</Setter.Value>
</Setter>
<Setter Property="KeyboardNavigation.IsTabStop">
<Setter.Value>
<s:Boolean>False</s:Boolean>
</Setter.Value>
</Setter>
<Setter Property="UIElement.Focusable">
<Setter.Value>
<s:Boolean>False</s:Boolean>
</Setter.Value>
</Setter>
<Setter Property="ButtonBase.ClickMode">
<Setter.Value>
<x:Static Member="ClickMode.Press" />
</Setter.Value>
</Setter>
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<mwt:ButtonChrome Background="{TemplateBinding Panel.Background}"
BorderBrush="{TemplateBinding Border.BorderBrush}"
RenderMouseOver="{TemplateBinding UIElement.IsMouseOver}"
RenderPressed="{TemplateBinding ButtonBase.IsPressed}"
Name="Chrome" SnapsToDevicePixels="True">
<Grid Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" HorizontalAlignment="Right">
<Path Data="M0,0L3.5,4 7,0z" Fill="#FF000000" Name="Arrow" Margin="3,1,0,0"
HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</mwt:ButtonChrome>
<ControlTemplate.Triggers>
<Trigger Property="ToggleButton.IsChecked">
<Setter Property="mwt:ButtonChrome.RenderPressed" TargetName="Chrome">
<Setter.Value>
<s:Boolean>True</s:Boolean>
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>True</s:Boolean>
</Trigger.Value>
</Trigger>
<Trigger Property="UIElement.IsEnabled">
<Setter Property="Shape.Fill" TargetName="Arrow">
<Setter.Value>
<SolidColorBrush>#FFAFAFAF</SolidColorBrush>
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>False</s:Boolean>
</Trigger.Value>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ToggleButton.Style>
</ToggleButton>
<ContentPresenter Content="{TemplateBinding ComboBox.SelectionBoxItem}" ContentTemplate="{TemplateBinding ComboBox.SelectionBoxItemTemplate}" ContentStringFormat="{TemplateBinding ComboBox.SelectionBoxItemStringFormat}" Margin="{TemplateBinding Control.Padding}" HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" IsHitTestVisible="False" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Popup.HasDropShadow" SourceName="PART_Popup">
<Setter Property="FrameworkElement.Margin" TargetName="Shdw">
<Setter.Value>
<Thickness>0,0,5,5</Thickness>
</Setter.Value>
</Setter>
<Setter Property="mwt:SystemDropShadowChrome.Color" TargetName="Shdw">
<Setter.Value>
<Color>#71000000</Color>
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>True</s:Boolean>
</Trigger.Value>
</Trigger>
<Trigger Property="ItemsControl.HasItems">
<Setter Property="FrameworkElement.Height" TargetName="DropDownBorder">
<Setter.Value>
<s:Double>95</s:Double>
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>False</s:Boolean>
</Trigger.Value>
</Trigger>
<Trigger Property="UIElement.IsEnabled">
<Setter Property="TextElement.Foreground">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.GrayTextBrushKey}" />
</Setter.Value>
</Setter>
<Setter Property="Panel.Background">
<Setter.Value>
<SolidColorBrush>#FFF4F4F4</SolidColorBrush>
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>False</s:Boolean>
</Trigger.Value>
</Trigger>
<Trigger Property="ItemsControl.IsGrouping">
<Setter Property="ScrollViewer.CanContentScroll">
<Setter.Value>
<s:Boolean>False</s:Boolean>
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>True</s:Boolean>
</Trigger.Value>
</Trigger>
<Trigger Property="ScrollViewer.CanContentScroll" SourceName="DropDownScrollViewer">
<Setter Property="Canvas.Top" TargetName="OpaqueRect">
<Setter.Value>
<Binding Path="VerticalOffset" ElementName="DropDownScrollViewer" />
</Setter.Value>
</Setter>
<Setter Property="Canvas.Left" TargetName="OpaqueRect">
<Setter.Value>
<Binding Path="HorizontalOffset" ElementName="DropDownScrollViewer" />
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>False</s:Boolean>
</Trigger.Value>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
By some reason my popup(PART_Popup) isn't the same width as toggleButton. It has width enough for displaying item. If I don't override template popup is the same width as toggleButton. So I can't understand why I can't get the same situation with standart template
Change the MinWidth of mwt:SystemDropShadowChrome from 0 to:
MinWidth="{Binding ElementName=MainGrid,Path=ActualWidth}"

The Background of the selected row do not change in ListView Control

I have the following ListView with a ListView.ItemTemplate:
<ListView.ItemTemplate>
<DataTemplate>
<StackPanelName="stackPanel" Orientation="Horizontal">
<TextBoxName="textBoxOrg"
Background="Transparent" BorderThickness="0" TextWrapping="Wrap" Text="{BindingOrgText}"
IsReadOnly="True"/>
<TextBoxName="textBoxNew"
Background="Transparent" BorderThickness="0" TextWrapping="Wrap" Text="{BindingNewText}"
AcceptsReturn="True"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
And the following ListViewItemStyle
<Style TargetType="ListViewItem">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="LightGoldenrodYellow" />
</Trigger>
</Style.Triggers>
</Style>
I want to change the default 'Blue' background color of the selected item, but when using the above code, it did not change to 'LightGoldenrodYellow' when I select an item.
How should I fix the code to let it work properly?
You need to customize the ControlTemplate of the ListViewItem. Otherwise it overrides(doesnt use) the Background trigger you defined. Here is the default template to customize (I'm using a helpful little tool called stylesnooper to get the templates http://wpfwonderland.wordpress.com/2007/01/02/wpf-tools-stylesnooper/):
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border BorderThickness="{TemplateBinding Border.BorderThickness}" Padding="{TemplateBinding Control.Padding}" BorderBrush="{TemplateBinding Border.BorderBrush}" Background="{TemplateBinding Panel.Background}" Name="Bd" SnapsToDevicePixels="True">
<ContentPresenter Content="{TemplateBinding ContentControl.Content}" ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}" HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Selector.IsSelected">
<Setter Property="Panel.Background" TargetName="Bd">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.HighlightBrushKey}" />
</Setter.Value>
</Setter>
<Setter Property="TextElement.Foreground">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.HighlightTextBrushKey}" />
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>
True</s:Boolean>
</Trigger.Value>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelected">
<Condition.Value>
<s:Boolean>
True</s:Boolean>
</Condition.Value>
</Condition>
<Condition Property="Selector.IsSelectionActive">
<Condition.Value>
<s:Boolean>
False</s:Boolean>
</Condition.Value>
</Condition>
</MultiTrigger.Conditions>
<Setter Property="Panel.Background" TargetName="Bd">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.ControlBrushKey}" />
</Setter.Value>
</Setter>
<Setter Property="TextElement.Foreground">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.ControlTextBrushKey}" />
</Setter.Value>
</Setter>
</MultiTrigger>
<Trigger Property="UIElement.IsEnabled">
<Setter Property="TextElement.Foreground">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.GrayTextBrushKey}" />
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>
False</s:Boolean>
</Trigger.Value>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
Dr WPF has a excellent article on ItemsControls called (ItemsControl: A to Z) and read I and L
I finally work out like this:
<Style x:Key="myListboxStyle">
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#CCFFFFFF" />
</Style.Resources>
</Style>
And it works perfect.
Thanks all of you.

Resources