How to convert xaml paths to a button control

Question

I'm a newbie with expression blend. I have a canvas with 9 paths and I want to convert the first 4 paths to a button, and the rest 5 paths to another button?

I found a way to convert only 1 path to a button not a number of paths.

Answer 1

The XAML below is a quick (and ugly) example of using 4 paths and 1 rectangle to make a style for a button with a custom look.

<Style x:Key="btnFromPaths" TargetType="{x:Type Button}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate  TargetType="{x:Type Button}">
                <Grid>
                    <Rectangle Width="200" Height="40" Fill="#FF87DECD" StrokeThickness="2" Stroke="#FF000000"/>
                    <Path Fill="#FF8A8A8A" StrokeThickness="2" Stroke="#FF000000" >
                        <Path.Data>
                            <PathGeometry Figures="m 60 30 a 30 30 0 1 1 -60 0 30 30 0 1 1 60 0 z" FillRule="nonzero"/>
                        </Path.Data>
                    </Path>
                    <Path Fill="#FFAA0000" StrokeThickness="2" Stroke="#FF000000">
                        <Path.Data>
                            <PathGeometry Figures="m 200 30 a 30 30 0 1 1 -60 0 30 30 0 1 1 60 0 z" FillRule="nonzero"/>
                        </Path.Data>
                    </Path>
                    <Path Fill="#FF808000" StrokeThickness="2" Stroke="#FF000000" >
                        <Path.Data>
                            <PathGeometry Figures="m 60 50 a 30 30 0 1 1 -60 0 30 30 0 1 1 60 0 z" FillRule="nonzero"/>
                        </Path.Data>
                    </Path>
                    <Path Fill="#FF00AAD4" StrokeThickness="2" Stroke="#FF000000" >
                        <Path.Data>
                            <PathGeometry Figures="m 200 50 a 30 30 0 1 1 -60 0 30 30 0 1 1 60 0 z" FillRule="nonzero"/>
                        </Path.Data>
                    </Path>
                    <ContentPresenter HorizontalAlignment="Center"
                                      VerticalAlignment="Center"
                                      SnapsToDevicePixels="True"
                                      Margin="5,1"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Applying this style to any button will then override the default control template for that button, for example:

<Button Content="My Button Text"
        Style="{StaticResource btnFromPaths}"/>

This syntax requires that your button style is stored in a Resource Dictionary that is accessible to your project.