I am working on slider control of wpf, i want background design of slider control filled according to my attached image, please help me how i can fill the background with same gradient in wpf ?
<UserControl.Resources>
<Style x:Key="SliderRepeatButton" TargetType="RepeatButton">
<Setter Property="Focusable" Value="false" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RepeatButton">
<Border Height="10">
<Border.Background>
<ImageBrush ImageSource="darblue_tab.png"></ImageBrush>
</Border.Background>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="SliderRepeatButton1" TargetType="RepeatButton">
<Setter Property="Focusable" Value="false" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RepeatButton">
<Border SnapsToDevicePixels="True" Background="Green" Height="10"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="SliderThumb" TargetType="Thumb">
<Setter Property="Focusable" Value="false" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Ellipse Height="20" Width="20">
<Ellipse.Fill>
<ImageBrush ImageSource="darblue_tab.png"></ImageBrush>
</Ellipse.Fill>
</Ellipse>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ControlTemplate x:Key="Slider" TargetType="Slider">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Track Grid.Row="1" x:Name="PART_Track" >
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource SliderRepeatButton1}" Command="Slider.DecreaseLarge" />
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource SliderThumb}" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource SliderRepeatButton}" Command="Slider.IncreaseLarge" />
</Track.IncreaseRepeatButton>
</Track>
</Grid>
</ControlTemplate>
<Style x:Key="Horizontal_Slider" TargetType="Slider">
<Setter Property="Focusable" Value="False"/>
<Style.Triggers>
<Trigger Property="Orientation" Value="Horizontal">
<Setter Property="Template" Value="{StaticResource Slider}" />
</Trigger>
</Style.Triggers>
</Style>
</UserControl.Resources>
<Slider Style="{StaticResource Horizontal_Slider}" VerticalAlignment="Center" Value="500" Width="300" Margin="50,0,50,0"></Slider>
You have to include RelativeTransform to get striped background in lineargradient brush.Please try below code for Background brush
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1" SpreadMethod="Repeat">
<GradientStop Color="#FF00AEEF" Offset="0"/>
<GradientStop Color="#FF00AEEF" Offset="0.5"/>
<GradientStop Color="#FF8BD6F0" Offset="0.5"/>
<GradientStop Color="#FF8BD6F0" Offset="1"/>
<LinearGradientBrush.RelativeTransform>
<ScaleTransform ScaleX="0.075" ScaleY="0.010"/>
</LinearGradientBrush.RelativeTransform>
</LinearGradientBrush>
I am currently using wpf with a gridview inside a listview. I am able to change the GridViewColumnHeader using the code below. However i tried to change the colour/disable for the hover over option using the same <ListView.Resources> tag but it does not work. It is currently giving me the default mouse over color light blue which i do not want.
<ListView Margin="10,53,10,65" Name="listView" Background=" black" Foreground="White" BorderThickness="0">
<ListView.Resources>
<Style TargetType="GridViewColumnHeader">
<Setter Property="Background" Value="Black" />
<Setter Property="Foreground" Value="White" />
</Style>
</ListView.Resources>
<ListView.View>
<GridView x:Name="gridView" >
<GridView.Columns>
<GridViewColumn Width="120" DisplayMemberBinding="{Binding Time}" >
<GridViewColumn.Header>
<GridViewColumnHeader Tag="Time" Click="lvUsersColumnHeader_Click">Accessed Time</GridViewColumnHeader>
</GridViewColumn.Header>
</GridViewColumn>
<GridViewColumn Header="Username" Width="100" DisplayMemberBinding="{Binding UserName}" ></GridViewColumn>
<GridViewColumn Header="Location" Width="250" DisplayMemberBinding="{Binding Address}" ></GridViewColumn>
<GridViewColumn Header="File Accessed" Width="100" DisplayMemberBinding="{Binding FileName}" ></GridViewColumn>
<GridViewColumn Header="Remarks" Width="155" DisplayMemberBinding="{Binding Remarks}" ></GridViewColumn>
</GridView.Columns>
</GridView>
</ListView.View>
</ListView>
To override the default behavior of any control (for example ListView), you must define ControlTemplate and there are triggers to set the properties. For example like this:
<Style x:Key="{x:Type GridViewColumnHeader}" TargetType="{x:Type GridViewColumnHeader}">
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GridViewColumnHeader}">
<Grid>
....
Without it, the system will take the triggers (and the rest of the behavior) of the default theme, which have their own styles and templates.
To verify this, you can download an example of the style / template for any control on MSDN. Example of style for ListView is available here.
Note: Just put the content in Resources. It is better to put styles into the file App.xaml or in ResourceDictionary.
Your example with the style of MSDN (a bit large, so you have to decide yourself what to delete and what to leave in style):
<ListView Margin="10,53,10,65" Name="gridview1" Background="Black" Foreground="White" BorderThickness="0">
<ListView.Resources>
<Color x:Key="WindowColor">#FFE8EDF9</Color>
<Color x:Key="ContentAreaColorLight">#FFC5CBF9</Color>
<Color x:Key="ContentAreaColorDark">#FF7381F9</Color>
<Color x:Key="DisabledControlLightColor">#FFE8EDF9</Color>
<Color x:Key="DisabledControlDarkColor">#FFC5CBF9</Color>
<Color x:Key="DisabledForegroundColor">#FF888888</Color>
<Color x:Key="SelectedBackgroundColor">#FFC5CBF9</Color>
<Color x:Key="SelectedUnfocusedColor">#FFDDDDDD</Color>
<Color x:Key="ControlLightColor">White</Color>
<Color x:Key="ControlMediumColor">#FF7381F9</Color>
<Color x:Key="ControlDarkColor">#FF211AA9</Color>
<Color x:Key="ControlMouseOverColor">#FF3843C4</Color>
<Color x:Key="ControlPressedColor">#FF211AA9</Color>
<Color x:Key="GlyphColor">#FF444444</Color>
<Color x:Key="GlyphMouseOver">sc#1, 0.004391443, 0.002428215, 0.242281124</Color>
<!--Border colors-->
<Color x:Key="BorderLightColor">#FFCCCCCC</Color>
<Color x:Key="BorderMediumColor">#FF888888</Color>
<Color x:Key="BorderDarkColor">#FF444444</Color>
<Color x:Key="PressedBorderLightColor">#FF888888</Color>
<Color x:Key="PressedBorderDarkColor">#FF444444</Color>
<Color x:Key="DisabledBorderLightColor">#FFAAAAAA</Color>
<Color x:Key="DisabledBorderDarkColor">#FF888888</Color>
<Color x:Key="DefaultBorderBrushDarkColor">Black</Color>
<!--Control-specific resources.-->
<Color x:Key="HeaderTopColor">#FFC5CBF9</Color>
<Color x:Key="DatagridCurrentCellBorderColor">Black</Color>
<Color x:Key="SliderTrackDarkColor">#FFC5CBF9</Color>
<Color x:Key="NavButtonFrameColor">#FF3843C4</Color>
<LinearGradientBrush x:Key="MenuPopupBrush" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="{DynamicResource ControlLightColor}" Offset="0" />
<GradientStop Color="{DynamicResource ControlMediumColor}" Offset="0.5" />
<GradientStop Color="{DynamicResource ControlLightColor}" Offset="1" />
</LinearGradientBrush>
<LinearGradientBrush x:Key="ProgressBarIndicatorAnimatedFill" StartPoint="0,0" EndPoint="1,0">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#000000FF" Offset="0" />
<GradientStop Color="#600000FF" Offset="0.4" />
<GradientStop Color="#600000FF" Offset="0.6" />
<GradientStop Color="#000000FF" Offset="1" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<Style x:Key="GridViewColumnHeaderGripper" TargetType="Thumb">
<Setter Property="Width" Value="18" />
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="{DynamicResource BorderLightColor}" Offset="0.0" />
<GradientStop Color="{DynamicResource BorderDarkColor}" Offset="1.0" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Border Padding="{TemplateBinding Padding}" Background="Transparent">
<Rectangle HorizontalAlignment="Center" Width="1" Fill="{TemplateBinding Background}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0" />
<GradientStop Color="White" Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="{x:Type GridViewColumnHeader}" TargetType="GridViewColumnHeader">
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridViewColumnHeader">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="HeaderBorder">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMouseOverColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed" />
<VisualState x:Name="Disabled" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="HeaderBorder" BorderThickness="0,1,0,1" Padding="2,0,2,0">
<Border.BorderBrush>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="{DynamicResource BorderLightColor}" Offset="0.0" />
<GradientStop Color="{DynamicResource BorderDarkColor}" Offset="1.0" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.BorderBrush>
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="{DynamicResource ControlLightColor}" Offset="0.0" />
<GradientStop Color="{DynamicResource ControlMediumColor}" Offset="1.0" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
<ContentPresenter x:Name="HeaderContent" Margin="0,0,0,1" RecognizesAccessKey="True" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Border>
<Thumb x:Name="PART_HeaderGripper" HorizontalAlignment="Right" Margin="0,0,-9,0" Style="{StaticResource GridViewColumnHeaderGripper}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Role" Value="Floating">
<Setter Property="Opacity" Value="0.7" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridViewColumnHeader">
<Canvas Name="PART_FloatingHeaderCanvas">
<Rectangle Fill="#60000000" Width="{TemplateBinding ActualWidth}" Height="{TemplateBinding ActualHeight}" />
</Canvas>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="Role" Value="Padding">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridViewColumnHeader">
<Border Name="HeaderBorder" BorderThickness="0,1,0,1">
<Border.Background>
<SolidColorBrush Color="{DynamicResource ControlLightColor}" />
</Border.Background>
<Border.BorderBrush>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="{DynamicResource BorderLightColor}" Offset="0.0" />
<GradientStop Color="{DynamicResource BorderDarkColor}" Offset="1.0" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.BorderBrush>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</ListView.Resources>
<ListView.View>
<GridView x:Name="gridView">
<GridView.Columns>
<GridViewColumn Width="120" DisplayMemberBinding="{Binding Time}" >
<GridViewColumn.Header>
<GridViewColumnHeader Tag="Time">Accessed Time</GridViewColumnHeader>
</GridViewColumn.Header>
</GridViewColumn>
<GridViewColumn Header="Username" Width="100" DisplayMemberBinding="{Binding UserName}" ></GridViewColumn>
<GridViewColumn Header="Location" Width="250" DisplayMemberBinding="{Binding Address}" ></GridViewColumn>
<GridViewColumn Header="File Accessed" Width="100" DisplayMemberBinding="{Binding FileName}" ></GridViewColumn>
<GridViewColumn Header="Remarks" Width="155" DisplayMemberBinding="{Binding Remarks}" ></GridViewColumn>
</GridView.Columns>
</GridView>
</ListView.View>
</ListView>
I have custom ContentControl called TabItem
public class TabItem : ContentControl
I have set the ContentTemplate to a dynamic resource coming from a resource dictionary
<TabItem Header="Search" Content="{Binding Path=SearchRibbon}" ContentTemplate="{DynamicResource SearchRibbonTemplate}" />
Using this approach I am utilizing the MVVM design pattern and the Content property successfuly binds to the viewmodel's... and the program builds successfuly and runs but without the content from within the datatemplate that the contenttemplate should be pulling in.
<DataTemplate x:Key="SearchRibbonTemplate">
<ItemsControl ItemsSource="{Binding}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TabGroupBox Header="{Binding Path=DisplayName}" Width="100">
<TabButton Width="100" Icon="{Binding Path=TemplateResource}" LargeIcon="{Binding Path=TemplateResource}" Command="{Binding Path=Commands}" />
</TabGroupBox>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
If I use a content control as it is, this approach has always worked. Why wouldn't a custom contentcontrol not work with the ContentTemplate property?
Cheers.
EDIT
<Style x:Key="RibbonTabItemStyle" TargetType="{x:Type Ribbon_Framework:TabItem}">
<Style.Triggers>
<Trigger Property="Group" Value="{x:Null}">
<Setter Property="BorderBrush" Value="{StaticResource RibbonTopBorderBrush}" />
</Trigger>
<Trigger Property="Selector.IsSelected" Value="False">
<Setter Property="Foreground" Value="{StaticResource TabItemFontBrush}" />
</Trigger>
</Style.Triggers>
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="Height" Value="31" />
<Setter Property="IsMinimized" Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Ribbon_Framework:RibbonTabControl}}, Path=IsMinimized, Mode=OneWay, FallbackValue=False}" />
<Setter Property="IsOpen" Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Ribbon_Framework:RibbonTabControl}}, Path=IsDropDownOpen, Mode=OneWay, FallbackValue=True}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Ribbon_Framework:TabItem}">
<Grid x:Name="grid" Background="#00000000" Height="24" VerticalAlignment="Top" Margin="0,7,0,0">
<Border x:Name="border3" Margin="2,0,0,1" BorderThickness="1,0" Grid.ColumnSpan="2">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#CCFFFFFF" Offset="0" />
<GradientStop Offset="1" Color="#7FFFFFFF" />
</LinearGradientBrush>
</Border.BorderBrush>
<Border x:Name="border4" BorderBrush="{Binding Group.BorderBrush, RelativeSource={RelativeSource TemplatedParent}}" BorderThickness="1,0">
<Border.OpacityMask>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0" />
<GradientStop Color="#00000000" Offset="0.981" />
</LinearGradientBrush>
</Border.OpacityMask>
<Border Background="{Binding Group.Background, RelativeSource={RelativeSource TemplatedParent}}" BorderThickness="0" Margin="0">
<Border.OpacityMask>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#59000000" Offset="0" />
<GradientStop Color="#00000000" Offset="1" />
</LinearGradientBrush>
</Border.OpacityMask>
<Rectangle x:Name="rectangle4" Fill="#3FD2D2D2" StrokeThickness="0">
<Rectangle.OpacityMask>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#7F000000" Offset="0" />
<GradientStop Color="#00000000" Offset="1" />
</LinearGradientBrush>
</Rectangle.OpacityMask>
</Rectangle>
</Border>
</Border>
</Border>
<Grid x:Name="selectedGrid" Visibility="Collapsed" Margin="2,0,0,0" Grid.ColumnSpan="1">
<Rectangle x:Name="rectangle" Fill="{StaticResource ActiveTabBackgroundBrush}" Stroke="{x:Null}" StrokeThickness="0" Margin="0" VerticalAlignment="Bottom" Height="1" />
<Rectangle x:Name="rectangle1" Fill="{StaticResource ActiveTabBackgroundBrush}" Stroke="{x:Null}" StrokeThickness="0" Margin="1.8,0" VerticalAlignment="Bottom" Height="1.2" />
<Rectangle x:Name="rectangle2" Fill="{StaticResource ActiveTabBackgroundBrush}" Stroke="{x:Null}" StrokeThickness="0" Margin="2,0" VerticalAlignment="Bottom" Height="2" />
<Border x:Name="border" Margin="1,0,1,2" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,0" VerticalAlignment="Stretch" CornerRadius="2,2,0,0" Background="{StaticResource ActiveTabBackgroundBrush}">
<Border x:Name="border_Copy3" Margin="0" BorderThickness="1,1,1,0" VerticalAlignment="Stretch" CornerRadius="2,2,0,0" Background="{x:Null}" BorderBrush="{StaticResource ActiveTabBackgroundBrush}">
<Border x:Name="border_Copy4" Margin="0,0,-2,-1" BorderThickness="0" VerticalAlignment="Stretch" CornerRadius="2,2,0,0" Background="{Binding Group.Background, RelativeSource={RelativeSource TemplatedParent}}" BorderBrush="{x:Null}">
<Border.OpacityMask>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#3F000000" Offset="0" />
<GradientStop Color="#00000000" Offset="0.59" />
</LinearGradientBrush>
</Border.OpacityMask>
</Border>
</Border>
</Border>
<Border x:Name="border1" HorizontalAlignment="Left" Margin="0" VerticalAlignment="Bottom" Width="2" Height="2" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,0,1,1" CornerRadius="0,0,2,0" />
<Border x:Name="border2" HorizontalAlignment="Right" Margin="0" VerticalAlignment="Bottom" Width="2" Height="2" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,0,0,1" CornerRadius="0,0,0,2" />
<Rectangle x:Name="rectangle3" StrokeThickness="0" Margin="7,-7,7,0" VerticalAlignment="Top" Height="14" IsHitTestVisible="False">
<Rectangle.Fill>
<RadialGradientBrush Center="0.498,0.501" GradientOrigin="0.498,0.501" RadiusY="0.464">
<GradientStop Color="#7FFFFFFF" Offset="0" />
<GradientStop Offset="1" />
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
<Grid x:Name="hoverGrid" Margin="2,0,0,0" Visibility="Collapsed" Grid.ColumnSpan="1">
<Border x:Name="border_Copy" Margin="1,0,1,1" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,0" VerticalAlignment="Stretch" CornerRadius="2,2,0,0" Background="{x:Null}">
<Border.OpacityMask>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#CC000000" Offset="0" />
<GradientStop Color="#F7FFFFFF" Offset="0.985" />
</LinearGradientBrush>
</Border.OpacityMask>
<Border x:Name="border_Copy1" Margin="0" BorderBrush="{StaticResource ActiveTabBackgroundBrush}" BorderThickness="1,1,1,0" VerticalAlignment="Stretch" CornerRadius="2,2,0,0" Background="{x:Null}">
<Border.OpacityMask>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#CCFFFFFF" Offset="0" />
<GradientStop Color="#F7FFFFFF" Offset="1" />
</LinearGradientBrush>
</Border.OpacityMask>
<Border x:Name="border_Copy2" Margin="0" BorderBrush="{x:Null}" BorderThickness="0" VerticalAlignment="Stretch" CornerRadius="2,2,0,0" Background="{StaticResource ActiveTabBackgroundBrush}">
<Border.OpacityMask>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#7FFFFFFF" Offset="0.004" />
<GradientStop Offset="0.5" />
</LinearGradientBrush>
</Border.OpacityMask>
</Border>
</Border>
</Border>
</Grid>
<Grid x:Name="focusedGrid" Margin="2,0,0,0" Visibility="Collapsed" Grid.ColumnSpan="1">
<Grid.OpacityMask>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0" />
<GradientStop Offset="1" Color="#19FFFFFF" />
</LinearGradientBrush>
</Grid.OpacityMask>
<Border x:Name="border_Copy5" Margin="1,0,1,1" BorderThickness="1,1,1,0" VerticalAlignment="Stretch" CornerRadius="2,2,0,0" Background="{StaticResource ButtonHoverOuterBackgroundBrush}" BorderBrush="{StaticResource ButtonHoverOuterBorderBrush}">
<Border x:Name="border_Copy6" Margin="0" BorderBrush="{StaticResource ButtonHoverInnerBorderBrush}" BorderThickness="1,1,1,0" VerticalAlignment="Stretch" CornerRadius="2,2,0,0" Background="{StaticResource ButtonHoverInnerBackgroundBrush}" />
</Border>
</Grid>
<Border x:Name="PART_ContentContainer" HorizontalAlignment="Stretch" Margin="6,2,4,2" VerticalAlignment="Stretch" Padding="15,0,0,0" Grid.ColumnSpan="1">
<Label x:Name="contentPresenter" AutomationProperties.Name="{TemplateBinding Header}" AutomationProperties.AutomationId="{TemplateBinding Name}" Content="{TemplateBinding Header}" Margin="0, -3, 0,0" HorizontalAlignment="Center" VerticalAlignment="Center" Height="Auto" />
</Border>
<Grid x:Name="separatorGrid" Margin="0" Visibility="Collapsed" HorizontalAlignment="Right" Width="2" Grid.Column="1">
<Rectangle x:Name="separatorRectangle1" Fill="{StaticResource RibbonTopBorderBrush}" Stroke="{StaticResource RibbonTopBorderBrush}" Margin="0,0,1,0" HorizontalAlignment="Right" Width="1" Opacity="1" Visibility="Visible">
<Rectangle.OpacityMask>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#00000000" Offset="0" />
<GradientStop Color="#E5FFFFFF" Offset="0.382" />
</LinearGradientBrush>
</Rectangle.OpacityMask>
</Rectangle>
<Rectangle x:Name="separatorRectangle2" Fill="{StaticResource ActiveTabBackgroundBrush}" Stroke="{StaticResource ActiveTabBackgroundBrush}" HorizontalAlignment="Right" Margin="0" Width="1" Opacity="1" Visibility="Visible">
<Rectangle.OpacityMask>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#00000000" Offset="0" />
<GradientStop Color="#BFFFFFFF" Offset="0.329" />
</LinearGradientBrush>
</Rectangle.OpacityMask>
</Rectangle>
</Grid>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" TargetName="contentPresenter" Value="0.5" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="HasRightGroupBorder" Value="False" />
<Condition Property="HasLeftGroupBorder" Value="True" />
</MultiTrigger.Conditions>
<Setter Property="BorderThickness" TargetName="border3" Value="1,0,0,0" />
<Setter Property="BorderThickness" TargetName="border4" Value="1,0,0,0" />
<Setter Property="Margin" TargetName="rectangle4" Value="0" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="HasLeftGroupBorder" Value="False" />
<Condition Property="HasRightGroupBorder" Value="True" />
</MultiTrigger.Conditions>
<Setter Property="BorderThickness" TargetName="border4" Value="0,0,1,0" />
<Setter Property="BorderThickness" TargetName="border3" Value="0,0,1,0" />
<Setter Property="Margin" TargetName="rectangle4" Value="0" />
<Setter Property="Margin" TargetName="border3" Value="0,0,0,1" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="HasLeftGroupBorder" Value="False" />
<Condition Property="HasRightGroupBorder" Value="False" />
</MultiTrigger.Conditions>
<Setter Property="BorderThickness" TargetName="border4" Value="0,0,0,0" />
<Setter Property="BorderThickness" TargetName="border3" Value="0,0,0,0" />
<Setter Property="Margin" TargetName="rectangle4" Value="0" />
<Setter Property="Margin" TargetName="border3" Value="0,0,0,1" />
</MultiTrigger>
<Trigger Property="Group" Value="{x:Null}">
<Setter Property="Visibility" TargetName="border3" Value="Collapsed" />
<Setter Property="Margin" TargetName="separatorGrid" Value="-1,0,0,1" />
<Setter Property="Visibility" TargetName="border_Copy3" Value="Collapsed" />
<Setter Property="Visibility" TargetName="rectangle3" Value="Collapsed" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelected" Value="True" />
<Condition Property="IsMinimized" Value="False" />
</MultiTrigger.Conditions>
<Setter Property="Visibility" TargetName="selectedGrid" Value="Visible" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True" />
<Condition Property="Selector.IsSelected" Value="False" />
<Condition Property="IsMinimized" Value="False" />
</MultiTrigger.Conditions>
<Setter Property="Visibility" TargetName="hoverGrid" Value="Visible" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True" />
<Condition Property="IsMinimized" Value="True" />
<Condition Property="IsOpen" Value="False" />
</MultiTrigger.Conditions>
<Setter Property="Visibility" TargetName="hoverGrid" Value="Visible" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelected" Value="True" />
<Condition Property="IsMinimized" Value="True" />
<Condition Property="IsOpen" Value="True" />
</MultiTrigger.Conditions>
<Setter Property="Visibility" TargetName="hoverGrid" Value="Visible" />
<Setter Property="Background" TargetName="grid" Value="#00000000" />
</MultiTrigger>
<Trigger Property="IsSeparatorVisible" Value="True">
<Setter Property="Visibility" TargetName="separatorGrid" Value="Visible" />
<Setter Property="Margin" TargetName="PART_ContentContainer" Value="6,2" />
<Setter Property="Margin" TargetName="hoverGrid" Value="2,0" />
<Setter Property="Margin" TargetName="selectedGrid" Value="2,0" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Indent" Value="12" />
<Setter Property="Foreground" Value="{StaticResource TabItemSelectedFontBrush}" />
<Setter Property="FontFamily" Value="{StaticResource DefaultFontFamily}" />
<Setter Property="FontSize" Value="{StaticResource DefaultFontSize}" />
<Setter Property="Margin" Value="0" />
<Setter Property="BorderBrush" Value="{Binding Group.BorderBrush, RelativeSource={RelativeSource Self}}" />
<Setter Property="FocusVisualStyle" Value="{StaticResource ControlStyleEmptyFocus}" />
</Style>
My guess would be that you did not define a default style for the control in Themes/Generic.xaml which should set the Template of the control to at least contain a ContentPresenter.
e.g.
<Style TargetType="local:TabItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:TabItem">
<!-- Usually there is also a Border which template binds the Margin, Padding, etc. -->
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
After correspondence with one of the developers that build the Fluent Ribbon library that I'm revamping, he noted that in order to achieve this design it will take more then just modifying the ContentPresenter and a full rework would be necessary. This being the case, he had suggested that building a list of ViewModels that derrive from each other's control will provide the design I am look for.
Thanks for everyones answers, but the difficult way seems to be the easy way in this scenario.
Cheers.
I tried using the ProgressBar style from the silverlight toolkit TwilightBlue theme in WPF. It doesn't throw any errors but the progress bar doesn't fill. The style is as follows.
<!-- ProgressBar -->
<Style TargetType="ProgressBar">
<Setter Property="Foreground" Value="{StaticResource TextBrush}" />
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFB4B4B4" />
<GradientStop Color="#FFFFFFFF" Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderThickness" Value="0.75,0.75,1.5,1.5" />
<Setter Property="Maximum" Value="100" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="BorderBrush" Value="{StaticResource PrimaryBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ProgressBar">
<Grid x:Name="Root">
<Grid.RowDefinitions>
<RowDefinition Height="0.5*" />
<RowDefinition Height="0.5*" />
</Grid.RowDefinitions>
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Determinate" />
<vsm:VisualState x:Name="Indeterminate">
<Storyboard RepeatBehavior="Forever">
<ObjectAnimationUsingKeyFrames Duration="00:00:00" Storyboard.TargetName="IndeterminateRoot" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="00:00:00" Storyboard.TargetName="DeterminateRoot" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="IndeterminateGradientFill" Storyboard.TargetProperty="(Shape.Fill).(LinearGradientBrush.Transform).(TransformGroup.Children)[0].X">
<SplineDoubleKeyFrame KeyTime="0" Value="0" />
<SplineDoubleKeyFrame KeyTime="00:00:.5" Value="20" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Border CornerRadius="4" x:Name="White" BorderBrush="#FFFFFFFF" BorderThickness="1.2" Grid.RowSpan="2">
<Border.Background>
<RadialGradientBrush>
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.35" ScaleY="1.35" />
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#FFFFFFFF" Offset="0" />
<GradientStop Color="#FFFFFFFF" Offset="1" />
</RadialGradientBrush>
</Border.Background>
</Border>
<Border x:Name="ProgressBarTrack" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1.2,1.2,1.2,1.2" CornerRadius="4,4,4,4" Grid.RowSpan="2" Opacity="0.65" />
<Grid x:Name="ProgressBarRootGrid" Grid.RowSpan="2">
<Rectangle Margin="{TemplateBinding BorderThickness}" x:Name="ProgressBarRootGradient" Canvas.ZIndex="1" Stroke="#FFFFFFFF" StrokeThickness="1" RadiusX="4" RadiusY="4" Opacity="0.65">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.7,1.263" StartPoint="0.699999988079071,0">
<GradientStop Color="{StaticResource PrimaryColor}" Offset="0.312" />
<GradientStop Color="{StaticResource SecondaryColor}" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Grid x:Name="IndeterminateRoot" Visibility="Collapsed">
<Rectangle Margin="{TemplateBinding BorderThickness}" x:Name="IndeterminateSolidFill" Opacity="1" RenderTransformOrigin="0.5,0.5" Fill="{TemplateBinding Foreground}" Stroke="#FF448DCA" StrokeThickness="0" RadiusX="4" RadiusY="4" />
<Rectangle Margin="{TemplateBinding BorderThickness}" x:Name="IndeterminateGradientFill" Opacity="0.7" StrokeThickness="1" RadiusX="4" RadiusY="4">
<Rectangle.Fill>
<LinearGradientBrush MappingMode="Absolute" SpreadMethod="Repeat" EndPoint="0,1" StartPoint="20,1">
<LinearGradientBrush.Transform>
<TransformGroup>
<TranslateTransform X="0" />
<SkewTransform AngleX="-30" />
</TransformGroup>
</LinearGradientBrush.Transform>
<GradientStop Color="#FFFFFFFF" Offset="0" />
<GradientStop Color="#00FFFFFF" Offset=".25" />
<GradientStop Color="#FFFFFFFF" Offset="0.85" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
<Grid Margin="1" x:Name="DeterminateRoot">
<Rectangle HorizontalAlignment="Left" Margin="{TemplateBinding BorderThickness}" x:Name="ProgressBarIndicator" StrokeThickness="0.5" RadiusX="4" RadiusY="4" Fill="{StaticResource PrimaryBrush}" />
</Grid>
</Grid>
<Border BorderBrush="#7FFFFFFF" BorderThickness="1" CornerRadius="3.5" x:Name="InnerBorder" Margin="1" Grid.RowSpan="2" />
<Border CornerRadius="3.5" x:Name="Shadow" Margin="2" Opacity="0.2" Grid.RowSpan="2">
<Border.OpacityMask>
<RadialGradientBrush>
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<TranslateTransform X="0" Y="-0.5" />
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#00FFFFFF" Offset="0.3" />
<GradientStop Color="#FFFFFFFF" Offset="1" />
</RadialGradientBrush>
</Border.OpacityMask>
<Border.Background>
<RadialGradientBrush>
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.75" ScaleY="2.25" />
<TranslateTransform Y="0.65" />
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#00000000" Offset="0.55" />
<GradientStop Color="#4C000000" Offset="1" />
</RadialGradientBrush>
</Border.Background>
</Border>
<Border Margin="1" CornerRadius="4,4,40,40" x:Name="Highlight" Opacity="0.8" RenderTransformOrigin="0.5,1">
<Border.Background>
<RadialGradientBrush>
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.25" ScaleY="2" />
<TranslateTransform Y="-0.6" />
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#BFFFFFFF" Offset="0" />
<GradientStop Color="#4CFFFFFF" Offset="1" />
</RadialGradientBrush>
</Border.Background>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Are the WPF and Silverlight progressbars different? Why doesn't this work?
There are two issues I see here:
1. Your brush for the Foreground may not be defined. When you run this under the debugger, look for binding errors in the Output window.
Try this changing
<Setter Property="Foreground" Value="{StaticResource TextBrush}" />
to
<Setter Property="Foreground" Value="Black" />
If other parts are not showing up, you may have other undefined brushes.
2. Your names may not match the PART names expected in WPF. Here is a custom progress bar style for WPF that may be a better starting point:
<Style x:Key="ProgressBar-sterling" TargetType="{x:Type ProgressBar}">
<Setter Property="Foreground" Value="{x:Null}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Border Background="#00E6E6E6" BorderBrush="#FFA6A6A6" BorderThickness="1" SnapsToDevicePixels="True" >
<DockPanel x:Name="PART_Track" LastChildFill="false">
<Border x:Name="PART_Indicator" HorizontalAlignment="Left" SnapsToDevicePixels="True">
<Grid Margin="1">
<Rectangle Fill="#FF737373" SnapsToDevicePixels="True" />
<Rectangle x:Name="Overlay" IsHitTestVisible="False" Opacity="0.4" SnapsToDevicePixels="True">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Transparent" Offset="1"/>
<GradientStop Color="#FFFFFFFF" Offset="0"/>
<GradientStop Color="#FFFFFFFF" Offset="0.124"/>
<GradientStop Color="Transparent" Offset="0.72"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
</Border>
</DockPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
One thing I would do it to create a sample Silverlight application and very any SL styles you import work in SL before trying to port them to WPF. Also, Expression Blend provides example styles in both the Simple and SketchFlow styles and can make creating custom styles from existing controls much easier.
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.