We Keep Coding

ControlTemplate Opacity not displayed like I want it to

I have a Style defined for my DataGridCell
<Style x:Key="MYDGCellStyle" TargetType="{x:Type DataGridCell}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Template" Value="{DynamicResource MYDGCellControlTemplate}" />
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsReadOnly}" Value="True">
<Setter Property="Background">
<Setter.Value>
<SolidColorBrush Color="Gray" Opacity="0.3" />
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
<ControlTemplate x:Key="MYDGCellControlTemplate" TargetType="{x:Type DataGridCell}">
<Grid x:Name="CellGrid">
<Border Background="{TemplateBinding Background}">
<ContentPresenter VerticalAlignment="Center" Margin="4,0,6,0" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="true">
<Setter Property="Background" TargetName="CellGrid">
<Setter.Value>
<LinearGradientBrush Opacity="2" StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Offset="0" Color="Fuchsia" />
<GradientStop Offset="0.2" Color="Transparent" />
<GradientStop Offset="0.8" Color="Transparent" />
<GradientStop Offset="1" Color="Fuchsia" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
During Runtime I add additional Triggers for specific Columns like this in my Code
Style Sty = null;
if (Sty == null)
{
Sty = new Style(typeof(DataGridCell));
Sty.BasedOn = (Style)Application.Current.TryFindResource("MYDGCellStyle");
}
DataTrigger t = new DataTrigger();
t.Binding = new Binding("ProductionStatus");
t.Value = "I";
Setter s = new Setter();
s.Property = DataGridCell.BackgroundProperty;
s.Value = new SolidColorBrush(Colors.Gold) { Opacity = 0.5 };
t.Setters.Add(s);
Sty.Triggers.Add(t);
DGC.CellStyle = Sty;
But if I focus one of the Cells where a DataTrigger I added in my Code is triggerd the Color isn't displayed correctly.
How can I display the fuchsia Sides in front of the Gold Background?
Grey Cell Focused:
Gold Cell Focused:
UPDATE
<ControlTemplate x:Key="MYDGCellControlTemplate" TargetType="{x:Type DataGridCell}">
<Grid>
<Grid Grid.ZIndex="99" x:Name="CellGrid"/>
<Border Grid.ZIndex="98" Background="{TemplateBinding Background}">
<ContentPresenter VerticalAlignment="Center" Margin="4,0,6,0" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="true">
<Setter Property="Background" TargetName="CellGrid">
<Setter.Value>
<LinearGradientBrush Opacity="2" StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Offset="0" Color="Fuchsia" />
<GradientStop Offset="0.1" Color="#00FF00FF" />
<GradientStop Offset="0.9" Color="#00FF00FF" />
<GradientStop Offset="1" Color="Fuchsia" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>

Your problem might be, that you apply a golden color brush above the fuchsia edges, so they get tinted by 50% of gold.
s.Value = new SolidColorBrush(Colors.Gold) { Opacity = 0.5 };
Additionally you should be aware that using Transparent in XAML means "white with no opacity", so if you want to fade out funchsia you should not fade to transparent white, but to transparent fuchsia instead.
White: #FFFFFFFF
Transparent: #00FFFFFF
Fuchsia opaque: #FFFF00FF
Fuchsia transparent: #00FF00FF
To enforce the z-order you could use an additional container around the item given and apply the status here "during runtime". Anyway this will not be an MVVM approach.
The better way might be to define a custom template-parameter (bool IsSpecificColumn) in your XAML, which will be set in your code "during runtime". Using MultiTrigger you can also define a third state for gold+fuchsia.
If you have to combine even more states you should let WPF do the job and use the approach with the boxed containers mentioned above together with template-parameters.

Try creating a new "IsFocused" trigger in your new style(I ProductionStatus)like this:
<Trigger Property="IsFocused" Value="true">
<Setter Property="Background" TargetName="CellGrid">
<Setter.Value>
<LinearGradientBrush Opacity="2" StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Offset="0" Color="Fuchsia" />
<GradientStop Offset="0.2" Color="Gold" />
<GradientStop Offset="0.8" Color="Gold" />
<GradientStop Offset="1" Color="Fuchsia" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
I know you are doing it on code behind, but I think you'll understand me(easyer to copy-paste).

WPF Listbox selected item brings up another sub listbox items

I have a unique request and I am very new to WPF.
I have a list of Items. When I select an Item, it should show the child items.
There are many ways to do this:
1. You have the sub listbox items slide down moving the parent listbox items down. There will be lot of bouncing around
2. To avoid the height change, I am thinking that the sub listbox items can popup and I select the child items. If not, then I click away and get back to my parent listbox items.
I have no idea where to begin adding a sub listbox items underneath it's parent listbox item.
I have two listbox in my xaml
<Window x:Class="MakeModel.MakeModelYear"
Icon="cc_64x64_blue_02.ico"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:MakeModel"
Title="Car Make and Model" Height="740.667" Width="426" Opacity="0.9"
WindowStartupLocation="CenterScreen" ResizeMode="CanResize" Background="White">
<Window.Resources>
</Window.Resources>
<Grid>
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFFE" Offset="0"/>
<GradientStop Color="#FF6699CC" Offset="1.2"/>
</LinearGradientBrush>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="156*"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0*"/>
<ColumnDefinition Width="53*"/>
<ColumnDefinition Width="198*"/>
</Grid.ColumnDefinitions>
<StackPanel Margin="0,31,0,29" Grid.ColumnSpan="3">
<GroupBox Header="Make / Model" BorderBrush="WhiteSmoke" BorderThickness="0" Margin="5,0" Foreground="#FF0B6C78" FontSize="18" FontFamily="Microsoft Sans Serif">
<!--Task -->
<StackPanel>
<ListBox x:Name="cmbMake" HorizontalAlignment="Left" VerticalAlignment="Top" Width="387" Cursor="Arrow"
ItemsSource="{Binding SelectedMake}" DisplayMemberPath ="Make"
SelectionChanged="cmbMake_SelectionChanged" SelectionMode="Single" RenderTransformOrigin="0.494,1.409" Margin="0,3,0,0" Height="150" BorderBrush="#FF336699" FontFamily="Microsoft Sans Serif" FontSize="12" >
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" Color="Transparent"/>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
</Style.Resources>
<EventSetter Event="UIElement.MouseEnter" Handler="cmbFirstDigitLineItem_MouseMove" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True" >
<Setter Property="Background" Value="#FFD7E1EC" />
</Trigger>
<Trigger Property="IsSelected" Value="True" >
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="FontSize" Value="24" />
<Setter Property="Foreground" Value="Black" />
</Trigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.Template>
<ControlTemplate>
<Border CornerRadius="5" BorderThickness="0" BorderBrush="#FF336699">
<ItemsPresenter/>
</Border>
</ControlTemplate>
</ListBox.Template>
</ListBox>
</StackPanel>
</GroupBox>
</StackPanel>
<StackPanel Margin="0,205,0,29" Grid.ColumnSpan="3">
<GroupBox Header="" BorderBrush="WhiteSmoke" BorderThickness="0" Margin="5,0">
<!--Subtask -->
<StackPanel>
<ListBox x:Name="cmbModel" HorizontalAlignment="Left" VerticalAlignment="Top" Width="387" Cursor="Arrow"
ItemsSource="{Binding SelectedModel}" DisplayMemberPath ="Model"
SelectionChanged="cmbModel_SelectionChanged" SelectionMode="Single" RenderTransformOrigin="0.494,1.409" Margin="0,3,0,0" Background="#FFE0E0E0" BorderBrush="#FF336699" FontFamily="Arial">
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" Color="Transparent"/>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
</Style.Resources>
<EventSetter Event="UIElement.MouseEnter" Handler="cmbSecondDigitLineItem_MouseMove" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True" >
<Setter Property="Background" Value="#FFD7E1EC" />
</Trigger>
<Trigger Property="IsSelected" Value="True" >
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="FontSize" Value="24" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="Black" />
</Trigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.Template>
<ControlTemplate>
<Border CornerRadius="5" BorderThickness="0" BorderBrush="#FF336699">
<ItemsPresenter/>
</Border>
</ControlTemplate>
</ListBox.Template>
</ListBox>
</StackPanel>
</GroupBox>
</StackPanel>
</Grid>
</Window>

Well, let me try to explain in plain and simple English :)
First, you should have your classes something like this:
public class Foo{
public ObservableCollection<MyParentObject> ListToBind {get;set;}
.... (rest of properties)
}
public class MyParentObject{
public ObservableCollection<MyChildObject> ChildListToBind {get;set;}
.... (rest of properties)
}
Then in your XAML you can have something like this:
And then as Window or UserControl Resources you have:
<DataTemplate x:key="listItemTemplate">
<Grid>
<ListBox ItemsSource={Binding ChildListToBind}" ItemTemplate="........"/>
</Grid>
</DataTemplate>
This is not perfect code...but hope it gives you head start to what you want.
Regards,

How to display tooltip value in WPF?

In WPF, I created a rectangle like this:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:s="clr-namespace:DiagramDesigner"
xmlns:c="clr-namespace:DiagramDesigner.Controls"
x:Class="GeoOvwSample.RectangleGeometryRoundedCornerExample"
>
<Brush x:Key="ItemStroke">#FFD69436</Brush>
<LinearGradientBrush x:Key="ItemBrush" StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStop Color="#FAFBE9" Offset="0" />
<GradientStop Color="Orange" Offset="1" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<Brush x:Key="ItemStroke1">#ACADCD</Brush>
<LinearGradientBrush x:Key="ItemBrush1" StartPoint="0,0" EndPoint="0,1" >
<GradientStop Color="#FEFEFE" Offset="0"/>
<GradientStop Color="#BDBEDE" Offset="1"/>
</LinearGradientBrush>
<Style x:Key="FlowChartRectangleStyle" TargetType="Rectangle">
<Setter Property="Fill" Value="{StaticResource ItemBrush}"/>
<Setter Property="Stroke" Value="{StaticResource ItemStroke}"/>
<Setter Property="StrokeThickness" Value="1"/>
<Setter Property="StrokeLineJoin" Value="Round"/>
<Setter Property="Stretch" Value="Fill"/>
<Setter Property="IsHitTestVisible" Value="False"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
</Style>
<Style x:Key="Data" TargetType="Rectangle" BasedOn="{StaticResource FlowChartRectangleStyle}">
</Style>
<Style x:Key="Data_DragThumb" TargetType="Rectangle" BasedOn="{StaticResource Data}">
<Setter Property="IsHitTestVisible" Value="true"/>
<Setter Property="Height" Value="300"/>
<Setter Property="Width" Value="200"/>
<Setter Property="Tag" Value="DataShape" />
</Style>
<s:Toolbox x:Key="FlowChartStencils" ItemSize="100,90" SnapsToDevicePixels="True"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ItemsControl.Items>
<Rectangle Style="{StaticResource Data}" ToolTip="DataTest" StrokeThickness="2">
<s:DesignerItem.DragThumbTemplate>
<ControlTemplate>
<Rectangle Style="{StaticResource Data_DragThumb}" x:Name="DataShape" Tag="DataShapeTag" />
</ControlTemplate>
</s:DesignerItem.DragThumbTemplate>
</Rectangle>
</ItemsControl.Items>
</s:Toolbox>
</ResourceDictionary>
This displays a rectangle on the panel, and I can select and drag it in my GUI. Now I want to create a kind of textblock on the shape so that it displays its tooltip value, and thus the tooltip value appears together with the shape all together. I tried to create the textblock and bind it with the rectangle shape but somehow my code is not correct. How to do it? Or is there a simpler method? Thank you.

You can simply add the TextBlock into any container control with (but after) the Rectangle element and then data bind the value of the Rectangle.ToolTip to the TextBlock.Text property. Try something like this:
<StackPanel>
<Rectangle Name="Rectangle" Style="{StaticResource Data}" ToolTip="DataTest"
StrokeThickness="2" />
<TextBlock Text="{Binding ToolTip, ElementName=Rectangle}" />
</StackPanel>

WPF Chart Toolkit - Change area series color's opacity

I need the area series charting to look like:
I succeeded in hiding the two axis and changing the colors to gradient brush.
I still need help on changing the opacity so the green one will be "behind" the orange one.
Also - How do I change the little points on the graph?
How do I change the background to be transparent?
How to hide the chart title?
Right now it looks like this:
Any help will be very appreciated!
Here is my xaml code:
<LinearGradientBrush x:Key="GreenGradientBrush" StartPoint="0.5,0" EndPoint="0.5,1">
<LinearGradientBrush.GradientStops>
<GradientStop Color="#77b31a" Offset="0.75"></GradientStop>
<GradientStop Color="#85d805" Offset="0.45"></GradientStop>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="OrangeGradientBrush" StartPoint="0.5,0" EndPoint="0.5,1">
<LinearGradientBrush.GradientStops>
<GradientStop Color="#fff92900" Offset="0.75"></GradientStop>
<GradientStop Color="#ffff6115" Offset="0.45"></GradientStop>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<Style x:Key="GreenAreaSeriesStyle" TargetType="Control">
<Setter Property="Background" Value="{StaticResource GreenGradientBrush}" />
<Setter Property="Opacity" Value="1"></Setter>
</Style>
<Style x:Key="OrangeAreaSeriesStyle" TargetType="Control">
<Setter Property="Background" Value="{StaticResource OrangeGradientBrush}" />
<Setter Property="Opacity" Value="1"></Setter>
</Style>
<datavis:ResourceDictionaryCollection x:Key="MyPalette">
<ResourceDictionary>
<Style x:Key="DataPointStyle" BasedOn="{StaticResource GreenAreaSeriesStyle}" TargetType="Control" >
</Style>
</ResourceDictionary>
<ResourceDictionary>
<Style x:Key="DataPointStyle" BasedOn="{StaticResource OrangeAreaSeriesStyle}" TargetType="Control" >
</Style>
</ResourceDictionary>
</datavis:ResourceDictionaryCollection>
<Style x:Key ="PerformanceChartMajorTickMarkStyle" TargetType="Line">
<Setter Property="Visibility" Value="Collapsed" />
</Style>
</Window.Resources>
<charting:Chart Palette="{StaticResource MyPalette}" HorizontalAlignment="Left" Margin="39,38,0,0" Name="chart1" Title="Chart Title" VerticalAlignment="Top" Width="815" Height="598" OverridesDefaultStyle="False">
<charting:Chart.LegendStyle>
<Style TargetType="datavis:Legend">
<Setter Property="Width" Value="0" />
</Style>
</charting:Chart.LegendStyle>
<charting:AreaSeries Name="Green" DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding}" IsSelectionEnabled="True" >
<charting:AreaSeries.IndependentAxis>
<charting:CategoryAxis Orientation="X" Visibility="Hidden"/>
</charting:AreaSeries.IndependentAxis>
<charting:AreaSeries.DependentRangeAxis>
<charting:LinearAxis Orientation="Y" Visibility="Hidden"/>
</charting:AreaSeries.DependentRangeAxis>
</charting:AreaSeries>
<charting:AreaSeries Name="Orange" DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding}" IsSelectionEnabled="True">
<charting:AreaSeries.IndependentAxis>
<charting:CategoryAxis Orientation="X" Visibility="Hidden"/>
</charting:AreaSeries.IndependentAxis>
<charting:AreaSeries.DependentRangeAxis>
<charting:LinearAxis Orientation="Y" Visibility="Hidden"/>
</charting:AreaSeries.DependentRangeAxis>
</charting:AreaSeries>
</charting:Chart>

I posted a similar question and got the following answer, which really helped me.
<ch:Chart Margin="56,21,50,72" Title="MyChart" DataContext="{Binding ElementName=Window, Mode=OneWay}" Style="{StaticResource controlStyle}" >
<ch:AreaSeries Name="DefaultArea" ItemsSource="{Binding Path=Key}" IndependentValueBinding="{Binding Key}" DependentValueBinding="{Binding Value}" Opacity="1" Title="111111" >
<ch:AreaSeries.Style>
<Style TargetType="ch:AreaSeries">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ch:AreaSeries">
<Canvas x:Name="PlotArea">
<Path Data="{TemplateBinding Geometry}" StrokeThickness="3" Fill="Pink" Style="{TemplateBinding PathStyle}" Opacity="1" />
</Canvas>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ch:AreaSeries.Style>
</ch:AreaSeries>
<ch:AreaSeries Name="PersonnelArea" ItemsSource="{Binding Path=Key}" IndependentValueBinding="{Binding Key}" DependentValueBinding="{Binding Value}" Opacity="1" >
<ch:AreaSeries.Style>
<Style TargetType="ch:AreaSeries">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ch:AreaSeries">
<Canvas x:Name="PlotArea">
<Path Data="{TemplateBinding Geometry}" StrokeThickness="3" Fill="Yellow" Style="{TemplateBinding PathStyle}" Opacity="1" />
</Canvas>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ch:AreaSeries.Style>
</ch:AreaSeries>
</ch:Chart>
You can also set the style as Ressource in XAML and then assign it dynamically in the code behind.
Here my original question with the Answer:
WPF AreaSeries: How to change background opacity?

How to customise combobox button look in WPF

Just wondering if anyone knows how to change the look of the button on a wpf combobox?
In case you are wondering I just want to change the shape of it and the background.
Thanks.

You can easily modify the ControlTemplate or style of controls using Expression Blend.
Here is one example which will use the Simple Style for the ComboBox and i have modified the Toggle button Color to red.
<LinearGradientBrush x:Key="NormalBrush" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#EEE" Offset="0.0"/>
<GradientStop Color="#CCC" Offset="1.0"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="NormalBorderBrush" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#CCC" Offset="0.0"/>
<GradientStop Color="#444" Offset="1.0"/>
</LinearGradientBrush>
<!-- LightBrush is used for content areas such as Menu, Tab Control background -->
<LinearGradientBrush x:Key="LightBrush" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFF" Offset="0.0"/>
<GradientStop Color="#EEE" Offset="1.0"/>
</LinearGradientBrush>
<!-- MouseOverBrush is used for MouseOver in Button, Radio Button, CheckBox -->
<LinearGradientBrush x:Key="MouseOverBrush" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFF" Offset="0.0"/>
<GradientStop Color="#AAA" Offset="1.0"/>
</LinearGradientBrush>
<!-- PressedBrush is used for Pressed in Button, Radio Button, CheckBox -->
<LinearGradientBrush x:Key="PressedBrush" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#BBB" Offset="0.0"/>
<GradientStop Color="#EEE" Offset="0.1"/>
<GradientStop Color="#EEE" Offset="0.9"/>
<GradientStop Color="#FFF" Offset="1.0"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="PressedBorderBrush" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#444" Offset="0.0"/>
<GradientStop Color="#888" Offset="1.0"/>
</LinearGradientBrush>
<!-- SelectedBackgroundBrush is used for the Selected item in ListBoxItem, ComboBoxItem-->
<SolidColorBrush x:Key="SelectedBackgroundBrush" Color="#DDD"/>
<!-- Disabled Brushes are used for the Disabled look of each control -->
<SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888"/>
<SolidColorBrush x:Key="DisabledBackgroundBrush" Color="#EEE"/>
<SolidColorBrush x:Key="DisabledBorderBrush" Color="#AAA"/>
<!-- Used for background of ScrollViewer, TreeView, ListBox, Expander, TextBox, Tab Control -->
<SolidColorBrush x:Key="WindowBackgroundBrush" Color="#FFF"/>
<!-- DefaultedBorderBrush is used to show KeyBoardFocus -->
<LinearGradientBrush x:Key="DefaultedBorderBrush" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#777" Offset="0.0"/>
<GradientStop Color="#000" Offset="1.0"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="SolidBorderBrush" Color="#888"/>
<SolidColorBrush x:Key="LightBorderBrush" Color="#AAA"/>
<SolidColorBrush x:Key="LightColorBrush" Color="#DDD"/>
<!-- Used for Checkmark, Radio button, TreeViewItem, Expander ToggleButton glyphs -->
<SolidColorBrush x:Key="GlyphBrush" Color="#444"/>
<Style x:Key="test" TargetType="{x:Type ComboBox}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid>
<!-- The ToggleButton is databound to the ComboBox itself to toggle IsDropDownOpen -->
<ToggleButton Grid.Column="2" Template="{DynamicResource ToggleButtonControlTemplate1}" x:Name="ToggleButton" Focusable="false" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press"/>
<ContentPresenter HorizontalAlignment="Left" Margin="3,3,23,3" x:Name="ContentSite" VerticalAlignment="Center" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" IsHitTestVisible="False"/>
<!-- The TextBox must be named PART_EditableTextBox or ComboBox will not recognize it -->
<TextBox Visibility="Hidden" Template="{DynamicResource ComboBoxTextBox}" HorizontalAlignment="Left" Margin="3,3,23,3" x:Name="PART_EditableTextBox" Style="{x:Null}" VerticalAlignment="Center" Focusable="True" Background="Transparent" IsReadOnly="{TemplateBinding IsReadOnly}"/>
<!-- The Popup shows the list of items in the ComboBox. IsOpen is databound to IsDropDownOpen which is toggled via the ComboBoxToggleButton -->
<Popup IsOpen="{TemplateBinding IsDropDownOpen}" Placement="Bottom" x:Name="Popup" Focusable="False" AllowsTransparency="True" PopupAnimation="Slide">
<Grid MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{TemplateBinding ActualWidth}" x:Name="DropDown" SnapsToDevicePixels="True">
<Border x:Name="DropDownBorder" Background="{DynamicResource WindowBackgroundBrush}" BorderBrush="{DynamicResource SolidBorderBrush}" BorderThickness="1"/>
<ScrollViewer Margin="4,6,4,6" Style="{DynamicResource SimpleScrollViewer}" SnapsToDevicePixels="True" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" CanContentScroll="True">
<!-- The StackPanel is used to display the children by setting IsItemsHost to be True -->
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained"/>
</ScrollViewer>
</Grid>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<!-- This forces the DropDown to have a minimum size if it is empty -->
<Trigger Property="HasItems" Value="false">
<Setter Property="MinHeight" Value="95" TargetName="DropDownBorder"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource DisabledForegroundBrush}"/>
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
</Trigger>
<Trigger Property="AllowsTransparency" SourceName="Popup" Value="true">
<Setter Property="CornerRadius" Value="4" TargetName="DropDownBorder"/>
<Setter Property="Margin" Value="0,2,0,0" TargetName="DropDownBorder"/>
</Trigger>
<Trigger Property="IsEditable" Value="true">
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Visibility" Value="Visible" TargetName="PART_EditableTextBox"/>
<Setter Property="Visibility" Value="Hidden" TargetName="ContentSite"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ControlTemplate x:Key="ToggleButtonControlTemplate1" TargetType="{x:Type ToggleButton}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="20"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.ColumnSpan="2" HorizontalAlignment="Stretch" x:Name="Rectangle" VerticalAlignment="Stretch" Width="Auto" Height="Auto" RadiusX="5" RadiusY="5" Fill="{DynamicResource NormalBrush}" Stroke="{DynamicResource NormalBorderBrush}"/>
<Rectangle Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" Height="Auto" RadiusX="5" RadiusY="5" Fill="{DynamicResource WindowBackgroundBrush}" Stroke="{DynamicResource NormalBorderBrush}"/>
<Path Grid.Column="1" HorizontalAlignment="Center" x:Name="Arrow" VerticalAlignment="Center" Fill="Red" Data="M 0 0 L 4 4 L 8 0 Z"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Fill" Value="{DynamicResource MouseOverBrush}" TargetName="Rectangle"/>
</Trigger>
<Trigger Property="IsChecked" Value="true">
<Setter Property="Fill" Value="{DynamicResource PressedBrush}" TargetName="Rectangle"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Fill" Value="{DynamicResource DisabledBackgroundBrush}" TargetName="Rectangle"/>
<Setter Property="Stroke" Value="{DynamicResource DisabledBorderBrush}" TargetName="Rectangle"/>
<Setter Property="Foreground" Value="{DynamicResource DisabledForegroundBrush}"/>
<Setter Property="Fill" Value="{DynamicResource DisabledForegroundBrush}" TargetName="Arrow"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
To change the Shape or background of the Toggle Button in the example you have to modify the ControlsTemplate "ToggleButtonControlTemplate1".

Use control templates for that.