Not able to use XAML extracted from Adobe Illustrator in WPF - wpf

I've created a design in AdobeIllustrator. Then I opened design in Microsoft Expression Blend, and got entire XAML code of the design.
I tried to apply the XAML and create custom button with the same shape as in my original design. This is what I did:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="ShutdownButton" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Canvas>
<Path Stretch="Fill" Width="48.901" Height="48.901" Data="F1M1499.9043,24.47363C1492.73633,24.47363,1486.90576,30.3046899999999,1486.90576,37.47119C1486.90576,37.47119,1486.90576,60.37646,1486.90576,60.37646C1486.90576,67.54395,1492.73633,73.375,1499.9043,73.375C1499.9043,73.375,1522.80811,73.375,1522.80811,73.375C1529.97607,73.375,1535.80713,67.54395,1535.80713,60.37646C1535.80713,60.37646,1535.80713,37.47119,1535.80713,37.47119C1535.80713,30.3046899999999,1529.97607,24.47363,1522.80811,24.47363C1522.80811,24.47363,1499.9043,24.47363,1499.9043,24.47363z" Canvas.Left="1486.906" Canvas.Top="30.395">
<Path.Fill>
<LinearGradientBrush EndPoint="-0.282,0.5" StartPoint="1.225,0.5">
<GradientStop Color="#FF80A6CE" Offset="0"/>
<GradientStop Color="#FF80A6CE" Offset="0.0056199999526143074"/>
<GradientStop Color="#FF35567B" Offset="0.0730300024151802"/>
<GradientStop Color="#FFE3E5E9" Offset="0.5"/>
<GradientStop Color="#FFBDCEDB" Offset="0.61798000335693359"/>
<GradientStop Color="sc#1, 0.481651038, 0.5958579, 0.699703157" Offset="0.72800544642086606"/>
<GradientStop Color="sc#1, 0.423206866, 0.5500373, 0.6810892" Offset="0.76080161280657421"/>
<GradientStop Color="sc#1, 0.3457467, 0.489308178, 0.65641886" Offset="0.78334873384059733"/>
<GradientStop Color="sc#1, 0.253189534, 0.4167429, 0.6269403" Offset="0.80115865841833056"/>
<GradientStop Color="sc#1, 0.201556265, 0.376262128, 0.610495567" Offset="0.8089900016784668"/>
<GradientStop Color="#FF7CA5CD" Offset="0.8089900016784668"/>
<GradientStop Color="#FF224F5E" Offset="1"/>
</LinearGradientBrush>
</Path.Fill>
</Path>
</Canvas>
<Canvas>
<Path Stretch="Fill" Width="41.629" Height="41.629" Data="F1M1499.9043,28.10986C1494.74219,28.10986,1490.54199,32.30908,1490.54199,37.47119C1490.54199,37.47119,1490.54199,60.37646,1490.54199,60.37646C1490.54199,65.5385699999999,1494.74219,69.7387699999999,1499.9043,69.7387699999999C1499.9043,69.7387699999999,1522.80811,69.7387699999999,1522.80811,69.7387699999999C1527.97021,69.7387699999999,1532.1709,65.5385699999999,1532.1709,60.37646C1532.1709,60.37646,1532.1709,37.47119,1532.1709,37.47119C1532.1709,32.30908,1527.97021,28.10986,1522.80811,28.10986C1522.80811,28.10986,1499.9043,28.10986,1499.9043,28.10986z" Canvas.Left="1490.542" Canvas.Top="34.032">
<Path.Fill>
<LinearGradientBrush EndPoint="0.5,1.175" StartPoint="0.5,-0.157">
<GradientStop Color="#FF80A6CE" Offset="0"/>
<GradientStop Color="#FF80A6CE" Offset="0.0056199999526143074"/>
<GradientStop Color="#FF35567B" Offset="0.0730300024151802"/>
<GradientStop Color="#FFE3E5E9" Offset="0.5"/>
<GradientStop Color="#FFBDCEDB" Offset="0.61798000335693359"/>
<GradientStop Color="sc#1, 0.481651038, 0.5958579, 0.699703157" Offset="0.72800544642086606"/>
<GradientStop Color="sc#1, 0.423206866, 0.5500373, 0.6810892" Offset="0.76080161280657421"/>
<GradientStop Color="sc#1, 0.3457467, 0.489308178, 0.65641886" Offset="0.78334873384059733"/>
<GradientStop Color="sc#1, 0.253189534, 0.4167429, 0.6269403" Offset="0.80115865841833056"/>
<GradientStop Color="sc#1, 0.201556265, 0.376262128, 0.610495567" Offset="0.8089900016784668"/>
<GradientStop Color="#FF7CA5CD" Offset="0.8089900016784668"/>
<GradientStop Color="#FF224F5E" Offset="1"/>
</LinearGradientBrush>
</Path.Fill>
</Path>
</Canvas>
<Canvas>
<Path Fill="Black" Stretch="Fill" Width="37.588" Height="37.589" Data="F1M1499.9043,30.12988C1495.85596,30.12988,1492.56201,33.4233400000001,1492.56201,37.47119C1492.56201,37.47119,1492.56201,60.37646,1492.56201,60.37646C1492.56201,64.4248,1495.85596,67.71875,1499.9043,67.71875C1499.9043,67.71875,1522.80811,67.71875,1522.80811,67.71875C1526.85742,67.71875,1530.15039,64.4248,1530.15039,60.37646C1530.15039,60.37646,1530.15039,37.47119,1530.15039,37.47119C1530.15039,33.4233400000001,1526.85742,30.12988,1522.80811,30.12988C1522.80811,30.12988,1499.9043,30.12988,1499.9043,30.12988z" Canvas.Left="1492.562" Canvas.Top="36.052"/>
</Canvas>
<Canvas>
<Path Stretch="Fill" Width="36.78" Height="36.78" Data="F1M1499.9043,30.5341800000001C1496.07813,30.5341800000001,1492.9668,33.646,1492.9668,37.47119C1492.9668,37.47119,1492.9668,60.37646,1492.9668,60.37646C1492.9668,64.20264,1496.07813,67.3144500000001,1499.9043,67.3144500000001C1499.9043,67.3144500000001,1522.80811,67.3144500000001,1522.80811,67.3144500000001C1526.63379,67.3144500000001,1529.74658,64.20264,1529.74658,60.37646C1529.74658,60.37646,1529.74658,37.47119,1529.74658,37.47119C1529.74658,33.646,1526.63379,30.5341800000001,1522.80811,30.5341800000001C1522.80811,30.5341800000001,1499.9043,30.5341800000001,1499.9043,30.5341800000001z" Canvas.Left="1492.967" Canvas.Top="36.456">
<Path.Fill>
<RadialGradientBrush Center="0.509,-0.259" GradientOrigin="0.509,-0.259" RadiusX="1.572" RadiusY="1.572">
<GradientStop Color="#FFFEFEFE" Offset="0"/>
<GradientStop Color="sc#1, 0.91495055, 0.5010311, 0.5039547" Offset="0.0692620569139719"/>
<GradientStop Color="#FFEC1B23" Offset="0.2921299934387207"/>
<GradientStop Color="#FF9E1218" Offset="0.64607000350952148"/>
<GradientStop Color="#FF141D2D" Offset="1"/>
</RadialGradientBrush>
</Path.Fill>
</Path>
</Canvas>
<Canvas>
<Path Stretch="Fill" Width="36.78" Height="36.78" Data="F1M1499.9043,30.5341800000001C1496.07813,30.5341800000001,1492.9668,33.646,1492.9668,37.47119C1492.9668,37.47119,1492.9668,60.37646,1492.9668,60.37646C1492.9668,64.20264,1496.07813,67.3144500000001,1499.9043,67.3144500000001C1499.9043,67.3144500000001,1522.80811,67.3144500000001,1522.80811,67.3144500000001C1526.63379,67.3144500000001,1529.74658,64.20264,1529.74658,60.37646C1529.74658,60.37646,1529.74658,37.47119,1529.74658,37.47119C1529.74658,33.646,1526.63379,30.5341800000001,1522.80811,30.5341800000001C1522.80811,30.5341800000001,1499.9043,30.5341800000001,1499.9043,30.5341800000001z" Canvas.Left="1492.967" Canvas.Top="36.456">
<Path.Fill>
<RadialGradientBrush Center="0.509,-0.259" GradientOrigin="0.509,-0.259" RadiusX="1.572" RadiusY="1.572">
<GradientStop Color="#FFFEFEFE" Offset="0"/>
<GradientStop Color="sc#1, 0.91495055, 0.5010311, 0.5039547" Offset="0.0692620569139719"/>
<GradientStop Color="#FFEC1B23" Offset="0.2921299934387207"/>
<GradientStop Color="#FF9E1218" Offset="0.64607000350952148"/>
<GradientStop Color="#FF141D2D" Offset="1"/>
</RadialGradientBrush>
</Path.Fill>
</Path>
</Canvas>
<Canvas>
<Path Stretch="Fill" Width="34.356" Height="34.357" Data="F1M1528.53418,60.37646C1528.53418,63.5385699999999,1525.97168,66.10303,1522.80811,66.10303C1522.80811,66.10303,1499.9043,66.10303,1499.9043,66.10303C1496.74219,66.10303,1494.17773,63.5385699999999,1494.17773,60.37646C1494.17773,60.37646,1494.17773,37.47119,1494.17773,37.47119C1494.17773,34.30908,1496.74219,31.7456099999999,1499.9043,31.7456099999999C1499.9043,31.7456099999999,1522.80811,31.7456099999999,1522.80811,31.7456099999999C1525.97168,31.7456099999999,1528.53418,34.30908,1528.53418,37.47119C1528.53418,37.47119,1528.53418,60.37646,1528.53418,60.37646z" Canvas.Left="1494.178" Canvas.Top="37.667">
<Path.Fill>
<RadialGradientBrush Center="0.526,1.261" GradientOrigin="0.526,1.261" RadiusX="1.188" RadiusY="1.187">
<GradientStop Color="#FFEC1B23" Offset="0"/>
<GradientStop Color="#FFEC1B23" Offset="0.2921299934387207"/>
<GradientStop Color="#FFCD2123" Offset="0.64607000350952148"/>
<GradientStop Color="#FF8F2224" Offset="1"/>
</RadialGradientBrush>
</Path.Fill>
</Path>
</Canvas>
<Canvas>
<Path Fill="#FFFEFEFE" Stretch="Fill" Width="1.961" Height="9.576" Data="F1M1510.37646,38.4262699999999C1510.37646,38.4262699999999,1510.37646,48.0019500000001,1510.37646,48.0019500000001C1510.37646,48.0019500000001,1512.3374,48.0019500000001,1512.3374,48.0019500000001C1512.3374,48.0019500000001,1512.3374,38.4262699999999,1512.3374,38.4262699999999C1512.3374,38.4262699999999,1510.37646,38.4262699999999,1510.37646,38.4262699999999z" Canvas.Left="1510.376" Canvas.Top="44.348"/>
</Canvas>
<Canvas>
<Path Fill="#FFFEFEFE" Stretch="Fill" Width="18.806" Height="18.429" Data="F1M1513.9707,40.9926800000001C1513.9707,40.9926800000001,1513.9707,43.05762,1513.9707,43.05762C1516.78809,44.1196299999999,1518.79883,46.8349599999999,1518.79883,50.0180700000001C1518.79883,54.12256,1515.46094,57.46191,1511.35693,57.46191C1507.25195,57.46191,1503.91309,54.12256,1503.91309,50.0180700000001C1503.91309,46.8349599999999,1505.92578,44.1196299999999,1508.74316,43.05762C1508.74316,43.05762,1508.74316,40.9926800000001,1508.74316,40.9926800000001C1504.82715,42.12842,1501.95361,45.74072,1501.95361,50.0180700000001C1501.95361,55.20361,1506.17236,59.42139,1511.35693,59.42139C1516.5415,59.42139,1520.75977,55.20361,1520.75977,50.0180700000001C1520.75977,45.74072,1517.88623,42.12842,1513.9707,40.9926800000001z" Canvas.Left="1501.954" Canvas.Top="46.914"/>
</Canvas>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I saved this in Resource Dictionary file and included dictionary in App.xaml.
When I try to apply Style on my WPF application with
...
I don't get the desired design. Actually, the button is not visible at all.
Can someone help me with the issue?


Ok, I must have done something wrong when pasting generated xaml.
Here is a working version:
<Path Fill="Black" Stretch="Fill" Width="37.588" Height="37.589" Data="F1M1499.9043,30.12988C1495.85596,30.12988,1492.56201,33.4233400000001,1492.56201,37.47119C1492.56201,37.47119,1492.56201,60.37646,1492.56201,60.37646C1492.56201,64.4248,1495.85596,67.71875,1499.9043,67.71875C1499.9043,67.71875,1522.80811,67.71875,1522.80811,67.71875C1526.85742,67.71875,1530.15039,64.4248,1530.15039,60.37646C1530.15039,60.37646,1530.15039,37.47119,1530.15039,37.47119C1530.15039,33.4233400000001,1526.85742,30.12988,1522.80811,30.12988C1522.80811,30.12988,1499.9043,30.12988,1499.9043,30.12988z" Canvas.Left="1492.562" Canvas.Top="36.052"/>
<Path Stretch="Fill" Width="36.78" Height="36.78" Data="F1M1499.9043,30.5341800000001C1496.07813,30.5341800000001,1492.9668,33.646,1492.9668,37.47119C1492.9668,37.47119,1492.9668,60.37646,1492.9668,60.37646C1492.9668,64.20264,1496.07813,67.3144500000001,1499.9043,67.3144500000001C1499.9043,67.3144500000001,1522.80811,67.3144500000001,1522.80811,67.3144500000001C1526.63379,67.3144500000001,1529.74658,64.20264,1529.74658,60.37646C1529.74658,60.37646,1529.74658,37.47119,1529.74658,37.47119C1529.74658,33.646,1526.63379,30.5341800000001,1522.80811,30.5341800000001C1522.80811,30.5341800000001,1499.9043,30.5341800000001,1499.9043,30.5341800000001z" Canvas.Left="1492.967" Canvas.Top="36.456">
<Path.Fill>
<RadialGradientBrush Center="0.509,-0.259" GradientOrigin="0.509,-0.259" RadiusX="1.572" RadiusY="1.572">
<GradientStop Color="#FFFEFEFE" Offset="0"/>
<GradientStop Color="sc#1, 0.91495055, 0.5010311, 0.5039547" Offset="0.0692620569139719"/>
<GradientStop Color="#FFEC1B23" Offset="0.2921299934387207"/>
<GradientStop Color="#FF9E1218" Offset="0.64607000350952148"/>
<GradientStop Color="#FF141D2D" Offset="1"/>
</RadialGradientBrush>
</Path.Fill>
</Path>
<Path Stretch="Fill" Width="34.356" Height="34.357" Data="F1M1528.53418,60.37646C1528.53418,63.5385699999999,1525.97168,66.10303,1522.80811,66.10303C1522.80811,66.10303,1499.9043,66.10303,1499.9043,66.10303C1496.74219,66.10303,1494.17773,63.5385699999999,1494.17773,60.37646C1494.17773,60.37646,1494.17773,37.47119,1494.17773,37.47119C1494.17773,34.30908,1496.74219,31.7456099999999,1499.9043,31.7456099999999C1499.9043,31.7456099999999,1522.80811,31.7456099999999,1522.80811,31.7456099999999C1525.97168,31.7456099999999,1528.53418,34.30908,1528.53418,37.47119C1528.53418,37.47119,1528.53418,60.37646,1528.53418,60.37646z" Canvas.Left="1494.178" Canvas.Top="37.667">
<Path.Fill>
<RadialGradientBrush Center="0.526,1.261" GradientOrigin="0.526,1.261" RadiusX="1.188" RadiusY="1.187">
<GradientStop Color="#FFEC1B23" Offset="0"/>
<GradientStop Color="#FFEC1B23" Offset="0.2921299934387207"/>
<GradientStop Color="#FFCD2123" Offset="0.64607000350952148"/>
<GradientStop Color="#FF8F2224" Offset="1"/>
</RadialGradientBrush>
</Path.Fill>
</Path>
<Path Fill="#FFFEFEFE" Stretch="Fill" Width="1.961" Height="9.576" Data="F1M1510.37646,38.4262699999999C1510.37646,38.4262699999999,1510.37646,48.0019500000001,1510.37646,48.0019500000001C1510.37646,48.0019500000001,1512.3374,48.0019500000001,1512.3374,48.0019500000001C1512.3374,48.0019500000001,1512.3374,38.4262699999999,1512.3374,38.4262699999999C1512.3374,38.4262699999999,1510.37646,38.4262699999999,1510.37646,38.4262699999999z" Canvas.Left="1510.376" Canvas.Top="44.348"/>
<Path Fill="#FFFEFEFE" Stretch="Fill" Width="18.806" Height="18.429" Data="F1M1513.9707,40.9926800000001C1513.9707,40.9926800000001,1513.9707,43.05762,1513.9707,43.05762C1516.78809,44.1196299999999,1518.79883,46.8349599999999,1518.79883,50.0180700000001C1518.79883,54.12256,1515.46094,57.46191,1511.35693,57.46191C1507.25195,57.46191,1503.91309,54.12256,1503.91309,50.0180700000001C1503.91309,46.8349599999999,1505.92578,44.1196299999999,1508.74316,43.05762C1508.74316,43.05762,1508.74316,40.9926800000001,1508.74316,40.9926800000001C1504.82715,42.12842,1501.95361,45.74072,1501.95361,50.0180700000001C1501.95361,55.20361,1506.17236,59.42139,1511.35693,59.42139C1516.5415,59.42139,1520.75977,55.20361,1520.75977,50.0180700000001C1520.75977,45.74072,1517.88623,42.12842,1513.9707,40.9926800000001z" Canvas.Left="1501.954" Canvas.Top="46.914"/>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" RecognizesAccessKey="True"/>
</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>
But, one more thing that I'm interested in is this:
Is there a way to set a font style property when defining new style? Just like I set Width and Height?

Related

How to change the colour of progressbar in WPF without loosing its style?

I want to change the colour of progress bar in WPF. When I change the colour, it loses its style. How can one change colour keeping windows default style?

Override the control template for the progress bar
This generates XAML code like:
<ProgressBar.Resources>
<ControlTemplate x:Key="ProgressBarControlTemplate1" TargetType="{x:Type ProgressBar}">
<Grid x:Name="TemplateRoot" SnapsToDevicePixels="True">
<Rectangle Fill="{TemplateBinding Background}" RadiusY="2" RadiusX="2"/>
<Border CornerRadius="2" Margin="1">
<Border.Background>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#50FFFFFF" Offset="0.5385"/>
<GradientStop Color="Transparent" Offset="0.5385"/>
</LinearGradientBrush>
</Border.Background>
</Border>
<Border BorderBrush="#80FFFFFF" BorderThickness="1,0,1,1" Margin="1">
<Border.Background>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#80FFFFFF" Offset="0.05"/>
<GradientStop Color="Transparent" Offset="0.25"/>
</LinearGradientBrush>
</Border.Background>
</Border>
<Rectangle x:Name="PART_Track" Margin="1"/>
<Decorator x:Name="PART_Indicator" HorizontalAlignment="Left" Margin="1">
<Grid x:Name="Foreground">
<Rectangle x:Name="Indicator" Fill="{TemplateBinding Foreground}"/>
<Grid x:Name="Animation" ClipToBounds="True">
<Rectangle x:Name="PART_GlowRect" HorizontalAlignment="Left" Margin="-100,0,0,0" Width="100">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="1,0" StartPoint="0,0">
<GradientStop Color="Transparent" Offset="0"/>
<GradientStop Color="#60FFFFFF" Offset="0.4"/>
<GradientStop Color="#60FFFFFF" Offset="0.6"/>
<GradientStop Color="Transparent" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
<Grid x:Name="Overlay">
<Grid.ColumnDefinitions>
<ColumnDefinition MaxWidth="15"/>
<ColumnDefinition Width="0.1*"/>
<ColumnDefinition MaxWidth="15"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Rectangle x:Name="LeftDark" Margin="1,1,0,1" RadiusY="1" RadiusX="1" Grid.RowSpan="2">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="1,0" StartPoint="0,0">
<GradientStop Color="#0C000000" Offset="0"/>
<GradientStop Color="#20000000" Offset="0.3"/>
<GradientStop Color="#00000000" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle x:Name="RightDark" Grid.Column="2" Margin="0,1,1,1" RadiusY="1" RadiusX="1" Grid.RowSpan="2">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="1,0" StartPoint="0,0">
<GradientStop Color="#00000000" Offset="0"/>
<GradientStop Color="#20000000" Offset="0.7"/>
<GradientStop Color="#0C000000" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle x:Name="LeftLight" Grid.Column="0" Grid.Row="2">
<Rectangle.Fill>
<RadialGradientBrush RadiusY="1" RadiusX="1">
<RadialGradientBrush.RelativeTransform>
<MatrixTransform Matrix="1,0,0,1,0.5,0.5"/>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#60FFFFC4" Offset="0"/>
<GradientStop Color="#00FFFFC4" Offset="1"/>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle x:Name="CenterLight" Grid.Column="1" Grid.Row="2">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0,0" StartPoint="0,1">
<GradientStop Color="#60FFFFC4" Offset="0"/>
<GradientStop Color="#00FFFFC4" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle x:Name="RightLight" Grid.Column="2" Grid.Row="2">
<Rectangle.Fill>
<RadialGradientBrush RadiusY="1" RadiusX="1">
<RadialGradientBrush.RelativeTransform>
<MatrixTransform Matrix="1,0,0,1,-0.5,0.5"/>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#60FFFFC4" Offset="0"/>
<GradientStop Color="#00FFFFC4" Offset="1"/>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Border x:Name="Highlight1" Grid.ColumnSpan="3" Grid.RowSpan="2">
<Border.Background>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#90FFFFFF" Offset="0.5385"/>
<GradientStop Color="Transparent" Offset="0.5385"/>
</LinearGradientBrush>
</Border.Background>
</Border>
<Border x:Name="Highlight2" Grid.ColumnSpan="3" Grid.RowSpan="2">
<Border.Background>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#80FFFFFF" Offset="0.05"/>
<GradientStop Color="Transparent" Offset="0.25"/>
</LinearGradientBrush>
</Border.Background>
</Border>
</Grid>
</Grid>
</Decorator>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Orientation" Value="Vertical">
<Setter Property="LayoutTransform" TargetName="TemplateRoot">
<Setter.Value>
<RotateTransform Angle="-90"/>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsIndeterminate" Value="True">
<Setter Property="Visibility" TargetName="LeftDark" Value="Collapsed"/>
<Setter Property="Visibility" TargetName="RightDark" Value="Collapsed"/>
<Setter Property="Visibility" TargetName="LeftLight" Value="Collapsed"/>
<Setter Property="Visibility" TargetName="CenterLight" Value="Collapsed"/>
<Setter Property="Visibility" TargetName="RightLight" Value="Collapsed"/>
<Setter Property="Visibility" TargetName="Indicator" Value="Collapsed"/>
</Trigger>
<!--<Trigger Property="IsIndeterminate" Value="False">
<Setter Property="Background" TargetName="Animation" Value="#80B5FFA9"/>
</Trigger>-->
</ControlTemplate.Triggers>
</ControlTemplate>
</ProgressBar.Resources>
Do the changes in template in case you need to change defaults
Define a data trigger and use setter to change the "foreground" property

Gradient with a Shape

I need to create a background for an element that looks like the following
Is it possible to implement this with gradients or some other technique or will I have to use an image file?
It is only the background that I am having trouble with, not the drop shadow effect.

If you want to do it with just one Element, then something like;
<Border Width="300" Height="75"
BorderThickness="3"
CornerRadius="5">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
<GradientStop Color="#FFC4C3C3" Offset="0.429"/>
<GradientStop Color="#FFE9E9E9" Offset="0.652"/>
</LinearGradientBrush>
</Border.Background>
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFE9E9E9" Offset="0"/>
<GradientStop Color="#FFB9B6B6" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
<Border.Effect>
<DropShadowEffect Direction="280" Color="#FF515050" BlurRadius="2"/>
</Border.Effect>
</Border>
If you want your curve in the gradient, then something like;
<Grid Width="300" Height="75">
<Border
BorderThickness="3"
CornerRadius="5">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
<GradientStop Color="#FFC4C3C3" Offset="0.429"/>
<GradientStop Color="#FFE9E9E9" Offset="0.652"/>
</LinearGradientBrush>
</Border.Background>
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFE9E9E9" Offset="0"/>
<GradientStop Color="#FFB9B6B6" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
<Border.Effect>
<DropShadowEffect Direction="280" Color="#FF515050" BlurRadius="2"/>
</Border.Effect>
</Border>
<Path Data="M0,0 L300,0 L300,40.768158 L296.83832,41.189522 C253.5976,46.794456 203.45944,50.000004 150,50.000004 C96.540565,50.000004 46.402409,46.794456 3.1617098,41.189522 L0,40.768158 z" Fill="#FFDADADA" Margin="3" Height="50" VerticalAlignment="Top" Stretch="Fill" UseLayoutRounding="False"/>
</Grid>
You'll of course need to play with your colors and sizes to get exactly what you want but this should hopefully be a good place to start for you. Cheers

Extracting Text from WPF

i have some xaml files that include text, this text is in paterns, like this paths and canvas
i need a way to convert them to row text; thank you
<Path Data="M603.0815,627.8994C590.7485,627.8994,580.7505,617.9014,580.7505,605.5674C580.7505,593.2354,590.7485,583.2374,603.0815,583.2374C615.4145,583.2374,625.4115,593.2354,625.4115,605.5674C625.4115,617.9014,615.4145,627.8994,603.0815,627.8994z" Height="45.677" Canvas.Left="504.149" StrokeStartLineCap="Flat" Stretch="Fill" StrokeEndLineCap="Flat" Stroke="White" StrokeThickness="1.015" StrokeMiterLimit="4" StrokeLineJoin="Miter" Canvas.Top="482.064" Width="45.676"/>
<Canvas Height="45.311" Canvas.Left="500.553" Opacity="0.7599949836730957" Canvas.Top="478.508" Width="45.309">
<Canvas Height="45.311" Canvas.Left="0" Canvas.Top="0" Width="45.309">
<Canvas.Clip>
<PathGeometry Figures="M584.42,624.485 C574.056,614.12 574.055,597.314 584.42,586.948 C594.786,576.583 611.591,576.583 621.956,586.948 z" FillRule="Nonzero">
<PathGeometry.Transform>
<MatrixTransform Matrix="1,0,0,1,-576.646606445313,-579.174255371094"/>
</PathGeometry.Transform>
</PathGeometry>
</Canvas.Clip>
<Path Data="F1M584.42,624.485C574.056,614.12,574.055,597.314,584.42,586.948C594.786,576.583,611.591,576.583,621.956,586.948z" Height="45.311" Canvas.Left="0" Stretch="Fill" Canvas.Top="0" Width="45.309">
<Path.Fill>
<LinearGradientBrush EndPoint="0.562,0.679" StartPoint="0.454,0.215">
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Path.Fill>
<Path.OpacityMask>
<LinearGradientBrush EndPoint="0.562,0.679" StartPoint="0.454,0.215">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="sc#0.6782913, 0, 0, 0" Offset="0.080963134765625"/>
<GradientStop Color="sc#0.4013089, 0, 0, 0" Offset="0.18010848760604858"/>
<GradientStop Color="sc#0.178047657, 0, 0, 0" Offset="0.31294554471969604"/>
<GradientStop Color="sc#0.02753514, 0, 0, 0" Offset="0.54220128059387207"/>
<GradientStop Color="sc#0, 0, 0, 0" Offset="1"/>
<GradientStop Color="sc#0, 0, 0, 0" Offset="1"/>
</LinearGradientBrush>
</Path.OpacityMask>
</Path>
</Canvas>
</Canvas>
<Path Data="F1M232.805,421.572C229.604,421.572,226.683,422.892,224.564,425.017L224.564,425.017C222.448,427.145,221.128,430.081,221.128,433.312L221.128,433.312L221.128,439.382L221.128,472.247C221.128,475.478,222.446,478.415,224.566,480.544L224.566,480.544C226.683,482.667,229.599,483.987,232.807,483.987L232.807,483.987L327.873,483.987C331.076,483.987,333.995,482.667,336.113,480.544L336.113,480.544C338.232,478.415,339.548,475.478,339.548,472.247L339.548,472.247L339.548,453.323L339.548,447.284L339.548,433.312C339.548,430.081,338.233,427.145,336.111,425.017L336.111,425.017C333.995,422.892,331.078,421.572,327.873,421.572L327.873,421.572z M222.652,460.445L222.652,433.312C222.652,430.513,223.792,427.968,225.632,426.124L225.632,426.124C227.471,424.275,230.009,423.128,232.805,423.128L232.805,423.128L327.873,423.128C330.667,423.128,333.206,424.275,335.048,426.124L335.048,426.124C336.883,427.968,338.026,430.513,338.026,433.312L338.026,433.312L338.026,447.284L338.024,453.323L338.024,472.247C338.024,475.046,336.884,477.591,335.047,479.434L335.047,479.434C333.206,481.285,330.667,482.43,327.873,482.43L327.873,482.43L232.807,482.43C230.011,482.43,227.471,481.285,225.63,479.434L225.63,479.434C223.792,477.591,222.652,475.046,222.652,472.247L222.652,472.247z" Height="62.415" Canvas.Left="145.034" Stretch="Fill" Canvas.Top="320.906" Width="118.42">
<Path.Fill>
<LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1">
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="White" Offset="0.080001801252365112"/>
<GradientStop Color="#FF878687" Offset="0.69325298070907593"/>
<GradientStop Color="sc#1, 0.307234675, 0.303684026, 0.307234675" Offset="0.88050458675388654"/>
<GradientStop Color="sc#1, 0.448453128, 0.445626259, 0.448453128" Offset="0.92941428201599052"/>
<GradientStop Color="sc#1, 0.6357934, 0.6339267, 0.6357934" Offset="0.96216528915308075"/>
<GradientStop Color="sc#1, 0.859842, 0.8591236, 0.859842" Offset="0.98765014041117993"/>
<GradientStop Color="White" Offset="1"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Path.Fill>
</Path>
<Canvas Height="57.274" Canvas.Left="147.674" Opacity="0.5" Canvas.Top="323.477" Width="113.02">
<Canvas Height="57.274" Canvas.Left="0" Opacity="0.38999900221824646" Canvas.Top="0" Width="113.02">
<Path Data="M336.788,456.73L336.788,434.419C336.788,428.765,332.133,424.143,326.449,424.143L320.519,424.143L305.105,424.143L234.111,424.143C228.425,424.143,223.769,428.765,223.769,434.419L223.769,456.73L223.768,439.382L223.768,471.14C223.768,476.795,228.422,481.417,234.107,481.417L240.037,481.417L255.451,481.417L326.444,481.417C332.128,481.417,336.783,476.795,336.783,471.14L336.783,439.382z" Height="57.274" Canvas.Left="0" Stretch="Fill" Canvas.Top="0" Width="113.02">
<Path.Fill>
<LinearGradientBrush EndPoint="-0.039,0.5" StartPoint="1.213,0.5">
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="#FFC5C5C5" Offset="0.69325298070907593"/>
<GradientStop Color="sc#1, 0.5962005, 0.5962005, 0.5962005" Offset="0.88050458675388654"/>
<GradientStop Color="sc#1, 0.678514, 0.678514, 0.678514" Offset="0.92941428201599052"/>
<GradientStop Color="sc#1, 0.787711, 0.787711, 0.787711" Offset="0.96216528915308075"/>
<GradientStop Color="sc#1, 0.9183046, 0.9183046, 0.9183046" Offset="0.98765014041117993"/>
<GradientStop Color="White" Offset="1"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Path.Fill>
</Path>
</Canvas>
</Canvas>
<Canvas Height="46.997" Canvas.Left="147.674" Canvas.Top="323.477" Width="113.02">
<Canvas.Clip>
<PathGeometry Figures="M320.519,424.143 L305.105,424.143 L234.112,424.143 C228.425,424.143 223.769,428.765 223.769,434.419 L223.769,434.419 L223.769,456.731 L223.768,439.382 L223.768,471.14 C243.672,458.167 336.788,434.419 336.788,434.419 L336.788,434.419 C336.788,428.765 332.133,424.143 326.449,424.143 L326.449,424.143 z" FillRule="Nonzero">
<PathGeometry.Transform>
<MatrixTransform Matrix="1,0,0,1,-223.768005371094,-424.143005371094"/>
</PathGeometry.Transform>
</PathGeometry>
</Canvas.Clip>
<Path Data="F1M320.519,424.143L305.105,424.143L234.112,424.143C228.425,424.143,223.769,428.765,223.769,434.419L223.769,434.419L223.769,456.731L223.768,439.382L223.768,471.14C243.672,458.167,336.788,434.419,336.788,434.419L336.788,434.419C336.788,428.765,332.133,424.143,326.449,424.143L326.449,424.143z" Height="46.997" Canvas.Left="0" Stretch="Fill" Canvas.Top="0" Width="113.02">
<Path.Fill>
<LinearGradientBrush EndPoint="-0.039,0.5" StartPoint="1.213,0.5">
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Path.Fill>
<Path.OpacityMask>
<LinearGradientBrush EndPoint="-0.039,0.5" StartPoint="1.213,0.5">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="sc#0.5, 0, 0, 0" Offset="0.22740978002548218"/>
<GradientStop Color="sc#0, 0, 0, 0" Offset="1"/>
</LinearGradientBrush>
</Path.OpacityMask>
</Path>
</Canvas>

Look how it is done in the Microsoft Sample Application called locbaml.

You might want to consider an XmlDataProvider together with a suitable XPath, or an XslTransform like
<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="text()">
<xsl:copy />
</xsl:template>
</xsl:stylesheet>

silverlight styles

<navigation:Page.Resources>
<Style x:Key="PageBackground" TargetType="Grid">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Color="White" Offset="1"/>
<GradientStop Color="Silver"/>
</LinearGradientBrush>
<Path x:Name="shinePath" Data="M0,0 L0,300 C-5.5,306.5 40,68 215,0 z" Stretch="Fill" Opacity="0.1">
<Path.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" SpreadMethod="Pad">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#00FFFFFF" Offset="0.871"/>
</LinearGradientBrush>
</Path.Fill>
</Path>
</Setter.Value>
</Setter>
</Style>
</navigation:Page.Resources>
error- property 'Value' is set more then once

You've got a single <Setter.Value> element, it can contain only one child elment. Looks to me as though the Path is intended for a different property. Can't think what though Grid doesn't have a property that can accept a path. Do you intend the path to be the content of the Grid?

Vista style window Close button in XP

How can I create a a custom button that looks and feels like Vista close button? Can any one have a template?

This template will helps to make a Vista style Window close button
<Button>
<Button.Template>
<ControlTemplate TargetType="Button">
<Rectangle Width='60' Height='40' x:Name='MyRectangle'>
<Rectangle.Fill>
<LinearGradientBrush x:Key="RedButtonBackground" StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="#F89C8C" />
<GradientStop Offset="0.45" Color="#D47F75" />
<GradientStop Offset="0.45" Color="#C04C3C" />
<GradientStop Offset="1" Color="#C98172" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName='MyRectangle' Property="Fill" >
<Setter.Value>
<LinearGradientBrush x:Key="RedButtonMouseOverBackground" StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="#F89C8C" />
<GradientStop Offset="0.45" Color="#E36A53" />
<GradientStop Offset="0.45" Color="#C72B0E" />
<GradientStop Offset="0.75" Color="#D44310" />
<GradientStop Offset="1" Color="#F5E478" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>

Resources