I wanna create Close/Maximize/Minimize Buttons for my app. So I wrote this piece of Style:
<Style x:Key="CloseButton" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation
Storyboard.TargetName="BackgroundColor1" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)"
Duration="0"
To="#FFFF1111"/>
<ColorAnimation
Storyboard.TargetName="BackgroundColor2" Storyboard.TargetProperty="(Shape.Stroke).(GradientBrush.GradientStops)[0].(GradientStop.Color)"
Duration="0"
To="#FFFF1111"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Ellipse Name="BackgroundColor1" Margin="4,0,0,0" Width="18" Height="18">
<Ellipse.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="{StaticResource ColorBorder}" Offset="0.2"/>
<GradientStop Color="WhiteSmoke" Offset=".9"/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Name="BackgroundColor2" Margin="4,0,0,0" Width="18" Height="18">
<Ellipse.Stroke>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="{StaticResource ColorBorder}" Offset="1"/>
<GradientStop Color="WhiteSmoke" Offset="0"/>
</LinearGradientBrush>
</Ellipse.Stroke>
</Ellipse>
<Ellipse Margin="4,0,0,8" Width="7" Height="7">
<Ellipse.Fill>
<LinearGradientBrush StartPoint="1,0" EndPoint="0,1">
<GradientStop Color="WhiteSmoke" Offset="0"/>
<GradientStop Color="Transparent" Offset="0.7"/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Margin="4,0,0,0" Width="18" Height="18" StrokeThickness="2" StrokeLineJoin="Round">
<Ellipse.Stroke>
<LinearGradientBrush StartPoint="1,0" EndPoint="1,1">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="Transparent" Offset="1"/>
</LinearGradientBrush>
</Ellipse.Stroke>
</Ellipse>
<Ellipse Margin="4,0,0,0" Width="18" Height="18" StrokeThickness="1" StrokeLineJoin="Round">
<Ellipse.Stroke>
<LinearGradientBrush StartPoint="1,0" EndPoint="1,1">
<GradientStop Color="#FF333333" Offset="1"/>
<GradientStop Color="Transparent" Offset="0.5"/>
</LinearGradientBrush>
</Ellipse.Stroke>
</Ellipse>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Right now I have 3 duplicate of this Style, With changes in MouseOver color, like this:
<ColorAnimation Storyboard.TargetName="BackgroundColor1" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)"
<!-- Just "To" Color changes is each button -->
To="#FFFF1111"/>
But I wanna just bind this color to Button Background color, So that I don't have to have 3 duplicate Style. I did some RelativeSource Binding but didn't work.
Q1: How can i Bind this Gradient to button Background?
Q2: Is there any other Type of controller that could do this AND have color properties?
Thanks in advance.
Edit: Transition code:
<VisualStateGroup.Transitions>
<VisualTransition To="MouseOver" GeneratedDuration="0:0:0.2"/>
<VisualTransition From="MouseOver" GeneratedDuration="0:0:0.2"/>
</VisualStateGroup.Transitions>
If it were me I would probably do it something more like below so you could pass in Brush, Color, ColorName etc easier instead of swap out GradientStop's and just deal with one whole object at a time. Since Fill will only accept Color. Brush and Fill are different beasts. ;)
Something like;
Style;
<Style x:Key="CloseButton2" TargetType="{x:Type Button}">
<Setter Property="Background" Value="Red"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<!-- Left this here in case you want to use it later for something. Just set Visibility. -->
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}" SnapsToDevicePixels="true" Visibility="Collapsed">
<ContentPresenter x:Name="contentPresenter" Focusable="False"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"
RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<!-- Your new magic. -->
<Border x:Name="buttonLight" Opacity="0"
Background="{TemplateBinding Background}" CornerRadius="50"
Width="18" Height="18" Margin="4,0,0,0"/>
<Ellipse Name="BackgroundColor1" Margin="4,0,0,0" Width="18" Height="18">
<Ellipse.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="Transparent" Offset="0.2"/>
<GradientStop Color="WhiteSmoke" Offset=".9"/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Name="BackgroundColor2" Margin="4,0,0,0" Width="18" Height="18">
<Ellipse.Stroke>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="Transparent" Offset="1"/>
<GradientStop Color="WhiteSmoke" Offset="0"/>
</LinearGradientBrush>
</Ellipse.Stroke>
</Ellipse>
<Ellipse Margin="4,0,0,8" Width="7" Height="7">
<Ellipse.Fill>
<LinearGradientBrush StartPoint="1,0" EndPoint="0,1">
<GradientStop Color="WhiteSmoke" Offset="0"/>
<GradientStop Color="Transparent" Offset="0.7"/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Margin="4,0,0,0" Width="18" Height="18" StrokeThickness="2" StrokeLineJoin="Round">
<Ellipse.Stroke>
<LinearGradientBrush StartPoint="1,0" EndPoint="1,1">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="Transparent" Offset="1"/>
</LinearGradientBrush>
</Ellipse.Stroke>
</Ellipse>
<Ellipse Margin="4,0,0,0" Width="18" Height="18" StrokeThickness="1" StrokeLineJoin="Round">
<Ellipse.Stroke>
<LinearGradientBrush StartPoint="1,0" EndPoint="1,1">
<GradientStop Color="#FF333333" Offset="1"/>
<GradientStop Color="Transparent" Offset="0.5"/>
</LinearGradientBrush>
</Ellipse.Stroke>
</Ellipse>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Opacity" TargetName="buttonLight" Value="1"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Then, instance examples;
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
<Button Style="{DynamicResource CloseButton2}"/>
<Button Background="Green"
Style="{DynamicResource CloseButton2}" Margin="0,10"/>
<Button Background="Blue"
Style="{DynamicResource CloseButton2}"/>
</StackPanel>
Hope this helps, cheers.
MORE INFORMATION;
You can absolutely still apply your transition, for this; you would just delete the triggers (this part in the previous example);
<!-- DELETE THIS PART -->
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Opacity" TargetName="buttonLight" Value="1"/>
</Trigger>
</ControlTemplate.Triggers>
Then just plop in your VisualStateManager somewhere inside of the Grid which I prefer to do at the top right under the <Grid> tag;
<!-- Invoke VisualStateManager to handle it instead of Trigger as requested. -->
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition To="MouseOver" GeneratedDuration="0:0:0.2"/>
<VisualTransition From="MouseOver" GeneratedDuration="0:0:0.2"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="buttonLight"
Duration="0:0:1">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed"/>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
...and that's it, you're done, and still have the color functionalities etc. :)
Related
I have a custom button style I built in Expression blend. I am using Caliburn Micro and want to be able to turn the FlashSafetyButton storyboard on and off from the viewModel for a button.
It seems like there should be an obvious way to do this but I'm missing it. I was thinking maybe I could make a custom VisualState and control that but it seems even less clear how to do that.
Maybe someone could show me how to use triggers for this?
In view
<Button x:Name="PopulateRuns" Content="Search for Runs within Range" Margin="5" Style="{DynamicResource SafetySystemButton}" >
In style
<ResourceDictionary...>
<Style x:Key="SafetySystemButton" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<ControlTemplate.Resources>
***<Storyboard x:Key="FlashSafetyButton">
<DoubleAnimationUsingKeyFrames RepeatBehavior="Forever" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Offset)" Storyboard.TargetName="ellipse">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.25"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>***
</ControlTemplate.Resources>
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
...
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Unfocused"/>
<VisualState x:Name="Focused">
<Storyboard>...</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Ellipse HorizontalAlignment="Center" Margin="0" Stroke="Black" VerticalAlignment="Center" StrokeThickness="0" MinWidth="70" MinHeight="70">
<Ellipse.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF5C5A5A" Offset="0.208"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse HorizontalAlignment="Center" Margin="1" Stroke="Black" VerticalAlignment="Center" StrokeThickness="0" Fill="#FF5BA5B4" MinWidth="60" MinHeight="60"/>
<Ellipse x:Name="ellipse" HorizontalAlignment="Center" Margin="1" Stroke="Black" VerticalAlignment="Center" StrokeThickness="0" MinWidth="60" MinHeight="60">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="#FFFCFDFD"/>
<GradientStop Color="#7F236172" Offset="1"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True"/>
<Trigger Property="IsDefaulted" Value="True"/>
<Trigger Property="IsMouseOver" Value="True"/>
<Trigger Property="IsPressed" Value="True"/>
<Trigger Property="IsEnabled" Value="False"/>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Resource dictionary entries should be defined here. -->
</ResourceDictionary>
I am reading a book on WPF as I'm trying to learn it.
There is an example of a button below. This makes sense apart from one line, below.
<ContentControl Margin=”2” Content=”{TemplateBinding Content}”/>
The book says the below,
Figure 14.9 shows what two Buttons look like with this new control template applied.
One Button has simple “OK” text content, and the other has an Image. In both cases, the content is reflected in the new visuals as expected.
However I can't see how to get an image to show on the button? I have drawn a triangle below that I want to be in the centre of the button but I can't get it to appear.
My drawing
<Polygon x:Key="playTriangle" Stroke="Black" Fill="Black">
<Polygon.Points>
<Point X="10" Y="40"/>
<Point X="40" Y="25"/>
<Point X="10" Y="10"/>
</Polygon.Points>
</Polygon>
Book Example
<ControlTemplate x:Key="buttonTemplatePlay" TargetType="{x:Type RibbonButton}">
<Grid Height="60" Width ="60">
<Ellipse x:Name="outerCircle">
<Ellipse.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="Blue"/>
<GradientStop Offset="1" Color="Red"/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Margin="5">
<Ellipse.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="White"/>
<GradientStop Offset="1" Color="Transparent"/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Viewbox>
<ContentControl Margin="5" Content="{TemplateBinding Content}"/>
</Viewbox>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="outerCircle" Property="Fill" Value="Green"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX=".9" ScaleY=".9"/>
</Setter.Value>
</Setter>
<Setter Property="RenderTransformOrigin" Value=".5,.5"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
You should set the polygon (or any other content for that matter) as the button's content:
<RibbonButton>
<RibbonButton.Content>
<Polygon Stroke="Black" Fill="Black">
<Polygon.Points>
<Point X="10" Y="40"/>
<Point X="40" Y="25"/>
<Point X="10" Y="10"/>
</Polygon.Points>
</Polygon>
</RibbonButton.Content>
</RibbonButton>
Note that I removed the x:Key="playTriangle" attribute
If the polygon is defined in a resource dictionary, you should reference it using StaticResourceExtension instead:
<RibbonButton Content={StaticResource ResourceKey=playTriangle}" />
One way or another, the key point is that you should use RibbonButton.Content property to set content of the button.
I am using the following template to style the repeat buttons for text-box's scroll bar:
<Style x:Key="ScrollBarLineButton" TargetType="{x:Type RepeatButton}">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Focusable" Value="false" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<!--HERE WE ADJUST PROPERTIES ON TOP AND BOTTOM BUTTONS -->
<Border x:Name="Border" CornerRadius="4,4,0,0" BorderThickness="0" >
<Border.BorderBrush>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="{DynamicResource BorderMediumColor}" 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>
<!--HERE WE SET THE KEYS COLOR-->
<GradientStop Color="White"/>
<GradientStop Color="White" Offset="0" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver" />
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlPressedColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Arrow" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="#79B0D4" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Path x:Name="Arrow" HorizontalAlignment="Center" VerticalAlignment="Center" Data="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}" >
<Path.Fill>
<!--HERE WE SET THE ARROW COLOR-->
<SolidColorBrush Color="#79B0D4"/>
</Path.Fill>
</Path>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
However, this template modifies both, top and bottom button at the same time. Is there a way to somehow 'unlink' two buttons, and then, for instance change only corners on top button, or the size of only the top button?
I have tried to make a button style in wpf. But I have faced to issue.
1) Button Inside Style want to Half of the Oval.
2) Button Border with Gold Color & #872234 Color
My XAML CODE-
<Window x:Class="Kiosk_Testing.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ClipToBounds="False">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<!-- the background for the button -->
<Rectangle RadiusX="20" RadiusY="30" Grid.RowSpan="2">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
<LinearGradientBrush.GradientStops>
<GradientStop Color="#872234" Offset="0"/>
<GradientStop Color="#872234" Offset="0.9"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<!-- the "gel" hilight at the top of the button -->
<Rectangle RadiusX="20" RadiusY="30" Margin="5">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
<LinearGradientBrush.GradientStops>
<GradientStop Color="#C53550" Offset="0.1"/>
<GradientStop Color="#C43551" Offset="0.5"/>
<GradientStop Color="#C43551" Offset="0.9"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<!-- place for the content inside the button to be displayed -->
<ContentPresenter Grid.RowSpan="2"
x:Name="PrimaryContent"
HorizontalAlignment="Center" VerticalAlignment="Center"
Margin="{TemplateBinding Padding}"
Content="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}"
/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="gold" />
</Style>
</Window.Resources>
<Grid>
<Button BorderThickness="50" HorizontalAlignment="Center" Content="Button" FontSize="26" FontFamily="Times New Roman" VerticalAlignment="Center" Width="163" Height="58" Margin="146,168,194,85">
<Button.BorderBrush>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
<LinearGradientBrush.GradientStops>
<GradientStop Color="Gold" Offset="0.1"/>
<GradientStop Color="#C43551" Offset="0.5"/>
<GradientStop Color="Gold" Offset="0.9"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Button.BorderBrush>
</Button>
</Grid>
</Window>
If using Border instead of Rectangle an option for you, then you can use the below Border XAML to replace your Rectangle XAML:
<Border Margin="5" CornerRadius="14,14,4,4">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
<LinearGradientBrush.GradientStops>
<GradientStop Color="#C53550" Offset="0.1"/>
<GradientStop Color="#C43551" Offset="0.5"/>
<GradientStop Color="#C43551" Offset="0.9"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
</Border>
You could tweak the CornerRadius property to get the desired rounded corners.
Complete Style:
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ClipToBounds="False">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<!-- the background for the button -->
<Rectangle RadiusX="20" RadiusY="30" Grid.RowSpan="2">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
<LinearGradientBrush.GradientStops>
<GradientStop Color="#872234" Offset="0"/>
<GradientStop Color="#872234" Offset="0.9"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<!-- the "gel" hilight at the top of the button -->
<Border Margin="5" CornerRadius="14,14,4,4">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
<LinearGradientBrush.GradientStops>
<GradientStop Color="#C53550" Offset="0.1"/>
<GradientStop Color="#C43551" Offset="0.5"/>
<GradientStop Color="#C43551" Offset="0.9"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
</Border>
<!-- place for the content inside the button to be displayed -->
<ContentPresenter Grid.RowSpan="2"
x:Name="PrimaryContent"
HorizontalAlignment="Center" VerticalAlignment="Center"
Margin="{TemplateBinding Padding}"
Content="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}"
/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="gold" />
</Style>
And resulting graphic:
UPDATE
I guess, you wanted your button to have the Golden color border as well. Updated Style with Golden Border:
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border BorderThickness="2" CornerRadius="28" BorderBrush="GoldenRod">
<Border BorderThickness="2" CornerRadius="27">
<Border.BorderBrush>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5" >
<LinearGradientBrush.GradientStops>
<GradientStop Color="Gold" Offset="0"/>
<GradientStop Color="Wheat" Offset="0.6"/>
<GradientStop Color="Gold" Offset="0.9"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.BorderBrush>
<Border BorderThickness="2" CornerRadius="26" BorderBrush="Gold">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ClipToBounds="False">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<!-- the background for the button -->
<Rectangle RadiusX="20" RadiusY="30" Grid.RowSpan="2">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
<LinearGradientBrush.GradientStops>
<GradientStop Color="#872234" Offset="0"/>
<GradientStop Color="#872234" Offset="0.9"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<!-- the "gel" hilight at the top of the button -->
<Border Margin="5" CornerRadius="14,14,4,4">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
<LinearGradientBrush.GradientStops>
<GradientStop Color="#C53550" Offset="0.1"/>
<GradientStop Color="#C43551" Offset="0.5"/>
<GradientStop Color="#C43551" Offset="0.9"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
</Border>
<!-- place for the content inside the button to be displayed -->
<ContentPresenter Grid.RowSpan="2"
x:Name="PrimaryContent"
HorizontalAlignment="Center" VerticalAlignment="Center"
Margin="{TemplateBinding Padding}"
Content="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}"
/>
</Grid>
</Border>
</Border>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="gold" />
</Style>
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.