Not able to use XAML extracted from Adobe Illustrator in WPF

Question

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"&gt;
<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?

Answer 1

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?