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>
Related
I'm trying to create a template for my buttons that have:
Border corner radius
Background as gradient
Change border color on hover
So far I got here:
<Window.Resources>
<Style TargetType="Button" x:Key="aimDark">
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="Margin" Value="5,5,5,0" />
<Setter Property="Height" Value="20" />
<Setter Property="Foreground" Value="#0e0e0e" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border
CornerRadius="4"
BorderBrush="#000000"
BorderThickness="1">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#006d23" Offset="0" />
<GradientStop Color="#006d23" Offset="0.05" />
<GradientStop Color="#00c741" Offset="0.45" />
<GradientStop Color="#00c741" Offset="1" />
</LinearGradientBrush>
</Border.Background>
<RenderOptions.EdgeMode>Aliased</RenderOptions.EdgeMode>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Button Content="Test" Name="btn01" Style="{StaticResource aimDark}" />
</Grid>
The Problem:
First my Content in the button doesn't appear, in fact there isn't text been render in my button.
And I don't know how to change only the border color in the Hover Event.
In ControlTemplate you should specify ContentPresenter to display the Content of a Button.
<Window.Resources>
<Style TargetType="Button" x:Key="aimDark">
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="Margin" Value="5,5,5,0" />
<Setter Property="Height" Value="20" />
<Setter Property="Foreground" Value="#0e0e0e" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border
CornerRadius="4"
BorderBrush="#000000"
BorderThickness="1">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#006d23" Offset="0" />
<GradientStop Color="#006d23" Offset="0.05" />
<GradientStop Color="#00c741" Offset="0.45" />
<GradientStop Color="#00c741" Offset="1" />
</LinearGradientBrush>
</Border.Background>
<RenderOptions.EdgeMode>Aliased</RenderOptions.EdgeMode>
<ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
The template that you created does not have a ContentPresenter, and that's required in order to show the content (text or other). I suggest you start from the default Button template and make changes as you need.
You need a ContentPresenter to make the content of the button appear.
Also if you define a name in ControlTemplate>Border you can modify it when a action is trigger like this:
<Style x:Key="mylayout" TargetType="Button">
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="Margin" Value="5,5,5,0" />
<Setter Property="Height" Value="20" />
<Setter Property="Foreground" Value="#949494" />
<Setter Property="Background" Value="the_gradient" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border CornerRadius="4" BorderBrush="#000000" BorderThickness="1" Background="{TemplateBinding Background}" Name="border">
<ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" TargetName="border" Value="#e9eceb" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I have a WPF program with a tabItems interfaces set on the left hand side.
What I want is that the tabItem keeps the colour as in the following picture:
Please notice where is the mouse pointer. When there the tabItem is coloured.
When going in another part of the interface on the right the tabItem looses the colour and gets embossed:
I am not sure if it helps posting my xaml file helps.
Basically I noticed that when the arrow goes on a datagrid on the right the tabItem is coloured when going on the free space it isn't.
Please notice that I don't want the tabItem to be of a particular colour, it has to follow the system palette and so to be in the correct system colour.
Thank you for any help.
Here is an Article from Microsoft describing how to use ColorTemplate with Triggers to solve your issue.
Here is the example from article in case in the future the link is down for some reason:
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<Border
Name="Border"
Margin="0,0,-4,0"
Background="{StaticResource LightBrush}"
BorderBrush="{StaticResource SolidBorderBrush}"
BorderThickness="1,1,1,1"
CornerRadius="2,12,0,0" >
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="12,2,12,2"
RecognizesAccessKey="True"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Panel.ZIndex" Value="100" />
<Setter TargetName="Border" Property="Background" Value="{StaticResource WindowBackgroundBrush}" />
<Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Border" Property="Background" Value="{StaticResource DisabledBackgroundBrush}" />
<Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" />
<Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Resources:
<LinearGradientBrush x:Key="LightBrush" StartPoint="0,0" EndPoint="0,1">
<GradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#FFF" Offset="0.0"/>
<GradientStop Color="#EEE" Offset="1.0"/>
</GradientStopCollection>
</GradientBrush.GradientStops>
</LinearGradientBrush>
...
<SolidColorBrush x:Key="SolidBorderBrush" Color="#888" />
...
<SolidColorBrush x:Key="WindowBackgroundBrush" Color="#FFF" />
...
<SolidColorBrush x:Key="DisabledBackgroundBrush" Color="#EEE" />
...
<SolidColorBrush x:Key="DisabledBorderBrush" Color="#AAA" />
...
<SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888" />
I have this style for a button:
<Style x:Key="ButtonStyle1" TargetType="{x:Type local:ButtonExt}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:ButtonExt}">
<Grid Name="grid" Margin="0,0,0,0">
<Rectangle Name="rectangle" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0.5">
<GradientStop Offset="1" Color="{DynamicResource button_background_gradient1}" />
<GradientStop Offset="0" Color="#FF004F96" />
</LinearGradientBrush>
</Rectangle.Fill>
<Rectangle.Effect>
<DropShadowEffect BlurRadius="3" Opacity="0.4" ShadowDepth="6" />
</Rectangle.Effect>
</Rectangle>
<Rectangle Width="0.7" Margin="0,0,43,1" HorizontalAlignment="Right" VerticalAlignment="Stretch" Stroke="#FF434343">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0.5">
<GradientStop Offset="0" Color="#FFF7F7F7" />
<GradientStop Offset="1" Color="#FFD6D6D6" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True" />
<Trigger Property="IsDefaulted" Value="True" />
<Trigger Property="Button.IsPressed" Value="True">
<Setter TargetName="grid" Property="Margin" Value="2,2,-1,-1" />
<Setter TargetName="rectangle" Property="Effect" Value="{x:Null}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True"/>
<Trigger Property="IsPressed" Value="True" />
<Trigger Property="IsEnabled" Value="False"/>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and another style based on this style:
<Style x:Key="ButtonStyle2" BasedOn="{StaticResource ButtonStyle1}">
<Setter Property="Rectangle.Fill">
<Setter.Value>
In the first style, I have two rectangles. In the second style, which is based on style 1, I would like to change the property of just one rectangle (which I named it "rectangle"). How can I do that?
Expose a property for the rectangle's fill in the ButtonEx class.
In the template, use {TemplateBinding} to bind the Fill to this new property.
In the derived style, set a new value to this property.
How to change column header's background color when using WPF datagrid? Need to modify xaml directly?
Use a style with a setter targeted at DataGridColumnHeader:
<DataGrid>
<DataGrid.Resources>
<Style BasedOn="{StaticResource {x:Type DataGridColumnHeader}}" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Background" Value="Blue" />
</Style>
</DataGrid.Resources>
</DataGrid>
Try this:
<windows.Resources>
<LinearGradientBrush x:Key="HeaderBrush" StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#FF6B8E95" Offset="0"/>
<GradientStop Color="#FF14A7C1" Offset="1"/>
<GradientStop Color="#FF1E424E" Offset="0.509"/>
<GradientStop Color="#FF1D4855" Offset="0.542"/>
<GradientStop Color="#FF1D4855" Offset="0.542"/>
<GradientStop Color="#FF193A44" Offset="0.526"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="HeaderBorderBrush" StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#FF1D1D1D" Offset="0.614"/>
<GradientStop Color="#FF007F96" Offset="0.853"/>
<GradientStop Color="#FF0AEAFA" Offset="1"/>
</LinearGradientBrush>
<Style x:Key="HeaderStyle" TargetType="DataGridColumnHeader">
<Setter Property="Background" Value="{StaticResource HeaderBrush}" />
<Setter Property="Foreground" Value="White" />
<Setter Property="BorderBrush" Value="{StaticResource HeaderBorderBrush}" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="MinWidth" Value="0" />
<Setter Property="MinHeight" Value="30" />
<Setter Property="Cursor" Value="Hand" />
</Style>
</Windows.Resources>
<Grid>
<DataGrid Name="dataGrid1" ColumnHeaderStyle="{StaticResource HeaderStyle}"/>
</Grid>
This is the result:
<DataGridTextColumn Header="ID">
<DataGridTextColumn.HeaderStyle>
<Style TargetType="DataGridColumnHeader">
<Setter Property="Background" Value="Green"/>
</Style>
</DataGridTextColumn.HeaderStyle>
</DataGridTextColumn>
Style style = new Style(typeof(System.Windows.Controls.Primitives
.DataGridColumnHeader));
style.Setters.Add(new Setter(ToolTipService.ToolTipProperty
,"Your tool tip here"));
style.Setters.Add(new Setter { Property = BackgroundProperty, Value
= Brushes.Yellow });
dgExcelSheet.Columns[1].HeaderStyle = style;
I found out that for me, it is not possible to change only background color without loosing other styles (paddig/borders/...)
So i wrote some style which is simillar to original in: aero2.normalcolor.xaml
Style contains mouseover, press and sort effect
Here is result
You can also create your own colors
<!--DATAGRID-->
<LinearGradientBrush x:Key="ThemeDGHeader_Background" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0.42"/>
<GradientStop Color="#FFEAEAEA" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ThemeDGHeader_Border" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFF7F8FA" Offset="0"/>
<GradientStop Color="#FFD5D5D5" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ThemeDGHeader_MouseOver" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFDAF4FF" Offset="0.42"/>
<GradientStop Color="#FFACE2F9" Offset="0.6"/>
<GradientStop Color="#FFA1DCF5" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ThemeDGHeader_Pressed" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFBCE4F9" Offset="0.42"/>
<GradientStop Color="#FF8CD5F7" Offset="0.6"/>
<GradientStop Color="#FF77C6EE" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ThemeDGHeader_Sorted" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFE7F8FF" Offset="0.42"/>
<GradientStop Color="#FFDEF5FF" Offset="0.6"/>
<GradientStop Color="#FFBCE8FB" Offset="1"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="ThemeDGHeader_MouseOverBorder" Color="#FF76C8F0"/>
<SolidColorBrush x:Key="ThemeDGHeader_PressedBorder" Color="#FF7EC2E2"/>
<SolidColorBrush x:Key="ThemeDGHeader_SortedBorder" Color="#FF9DD8F5"/>
<SolidColorBrush x:Key="ThemeDG_Border" Color="#FF688CAF"/>
<!--DATAGRID HEADER-->
<Style x:Key="ColumnHeaderGripperStyle" TargetType="{x:Type Thumb}">
<Setter Property="Width" Value="8"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Cursor" Value="SizeWE"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Border Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type DataGridColumnHeader}" x:Key="DCHS">
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid>
<Border x:Name="BR"
BorderThickness="1,0,1,1"
Padding="0,0,2,0"
BorderBrush="{StaticResource ThemeDGHeader_Border}"
Background="{StaticResource ThemeDGHeader_Background}">
<Border x:Name="BRIN"
CornerRadius="1"
Padding="4,4,4,2"
BorderThickness="0,0,0,0"
BorderBrush="{StaticResource ThemeDGHeader_PressedBorder}"
>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
/>
</Border>
</Border>
<Path x:Name="SortArrow"
HorizontalAlignment="Center" VerticalAlignment="Top"
Width="7" Height="4" Margin="0,1,0,0"
Stretch="Fill"
RenderTransformOrigin="0.5,0.5"
Visibility="Visible"
Data="M0,0 L1,0 0.5,1 z" >
<Path.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0,0">
<GradientStop Color="#FF9DC3D8" Offset="1"/>
<GradientStop Color="#FF7AA8C4" Offset="0.403"/>
<GradientStop Color="#FF4B7085" Offset="0.017"/>
</LinearGradientBrush>
</Path.Fill>
</Path>
<Thumb x:Name="PART_LeftHeaderGripper" HorizontalAlignment="Left" Style="{StaticResource ColumnHeaderGripperStyle}"/>
<Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" Style="{StaticResource ColumnHeaderGripperStyle}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="SortDirection" Value="{x:Null}">
<Setter TargetName="SortArrow" Property="Visibility" Value="Collapsed"/>
</Trigger>
<Trigger Property="SortDirection" Value="Ascending">
<Setter TargetName="SortArrow" Property="Visibility" Value="Visible"/>
<Setter TargetName="SortArrow" Property="RenderTransform">
<Setter.Value>
<TransformGroup>
<ScaleTransform ScaleY="-1"/>
</TransformGroup>
</Setter.Value>
</Setter>
<Setter TargetName="BR" Property="Border.Background" Value="{StaticResource ThemeDGHeader_Sorted}"/>
<Setter TargetName="BR" Property="Border.BorderBrush" Value="{StaticResource ThemeDGHeader_SortedBorder}"/>
</Trigger>
<Trigger Property="SortDirection" Value="Descending">
<Setter TargetName="SortArrow" Property="Visibility" Value="Visible"/>
<Setter TargetName="BR" Property="Border.Background" Value="{StaticResource ThemeDGHeader_Sorted}"/>
<Setter TargetName="BR" Property="Border.BorderBrush" Value="{StaticResource ThemeDGHeader_SortedBorder}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="BR" Property="Border.Background" Value="{StaticResource ThemeDGHeader_MouseOver}"/>
<Setter TargetName="BR" Property="Border.BorderBrush" Value="{StaticResource ThemeDGHeader_MouseOverBorder}"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="BR" Property="Border.Padding" Value="0,0,0,0"/>
<Setter TargetName="BRIN" Property="Border.Background" Value="{StaticResource ThemeDGHeader_Pressed}" />
<Setter TargetName="BRIN" Property="Border.BorderThickness" Value="1,1,1,0"/>
<Setter TargetName="BR" Property="Border.BorderBrush" Value="{StaticResource ThemeDG_Border}"/>
<Setter TargetName="BR" Property="Border.BorderThickness" Value="1,0,1,0"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Using:
<DataGrid ColumnHeaderStyle="{StaticResource DCHS}"/>
try this
<Style.Triggers >
<Trigger Property="SortDirection" Value="Ascending" >
<Setter Property="Background" Value="{StaticResource SelectedSolidColor}" />
</Trigger>
</Style.Triggers>
</Style>
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.