How do i create a custom button in blend from Expression Blend?

Question

I have created an image in Expression Design that I'm trying to import into Blend to create a button. I'm trying to make the button scale with it's container (most likely a grid) when i resize it in Blend. Unfortunately, the documentation for both products isn't very helpful. The xaml in design looks like the following:

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="Document" Width="61" Height="61" Clip="F1 M 0,0L 61,0L 61,61L 0,61L 0,0">
<Canvas x:Name="MinimizeButtonBase" Width="799.999" Height="600" Canvas.Left="0" Canvas.Top="0">
 <Viewbox x:Name="Group" Width="61" Height="61" Canvas.Left="0" Canvas.Top="0">
  <Canvas Width="61" Height="61">
   <Path x:Name="Path" Width="61" Height="61" Canvas.Left="0" Canvas.Top="3.05176e-005" Stretch="Fill" StrokeLineJoin="Round" Stroke="#B0000000" Data="F1 M 5.5,0.500031L 55.5,0.500031C 58.2614,0.500031 60.5,2.73859 60.5,5.5L 60.5,55.5C 60.5,58.2614 58.2614,60.5 55.5,60.5L 5.5,60.5C 2.73859,60.5 0.5,58.2614 0.5,55.5L 0.5,5.5C 0.5,2.73859 2.73859,0.500031 5.5,0.500031 Z ">
    <Path.Fill>
     <LinearGradientBrush StartPoint="0.561118,0.955553" EndPoint="0.58334,-0.177781">
      <LinearGradientBrush.GradientStops>
       <GradientStop Color="#B0000000" Offset="0"/>
       <GradientStop Color="#B0FFFFFF" Offset="1"/>
      </LinearGradientBrush.GradientStops>
     </LinearGradientBrush>
    </Path.Fill>
   </Path>
   <Path x:Name="Line" Width="49.2547" Height="5" Canvas.Left="5.23578" Canvas.Top="47" Stretch="Fill" StrokeThickness="5" StrokeLineJoin="Round" Stroke="#B0000000" Data="M 7.73578,49.5L 51.9904,49.5"/>
  </Canvas>
 </Viewbox>
</Canvas>

Does anyone know the steps to importing a simple 2 path image in design to making it a button in blend? When I add the following xaml to a resource file in blend, I'm unable to get the button to scale to it's container when resize it after turning it into a control.

Answer 1

The problem comes for the container types you have used and the complexity of the XAML it has produced, the canvas is absolute positioning and shouldn't be used for scale really. To get around this you've then got a view box to mimic scale, but it is not necessary.

I've started a project in Expression 3 and added a user control, pasted your code in there and then worked on it. The position of the lower horizontal path relative to the base of the button wasn't clear, if you need to alter the position and width of it, alter the grid column height and width values appropriately, and keep them as ratio's and not absolute numbers.

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    x:Class="WpfApplication1.UserControl1"
    x:Name="UserControl">

    <Grid x:Name="Document">
         <Grid.ColumnDefinitions>
             <ColumnDefinition Width="1*"/>
             <ColumnDefinition Width="8*"/>
             <ColumnDefinition Width="1*"/>
         </Grid.ColumnDefinitions>
         <Grid.RowDefinitions>
             <RowDefinition Height="8*"/>
             <RowDefinition Height="1*"/>
             <RowDefinition Height="1*"/>
         </Grid.RowDefinitions>
         <Path Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" Grid.RowSpan="3"
               x:Name="Path" 
               Stretch="Fill" StrokeLineJoin="Round" Stroke="#B0000000" 
               Data="F1 M 5.5,0.500031L 55.5,0.500031C 58.2614,0.500031 60.5,2.73859 60.5,5.5L 60.5,55.5C 60.5,58.2614 58.2614,60.5 55.5,60.5L 5.5,60.5C 2.73859,60.5 0.5,58.2614 0.5,55.5L 0.5,5.5C 0.5,2.73859 2.73859,0.500031 5.5,0.500031 Z "> 
             <Path.Fill>                           
                 <LinearGradientBrush StartPoint="0.561118,0.955553" EndPoint="0.58334,-0.177781">         
                     <LinearGradientBrush.GradientStops> 
                         <GradientStop Color="#B0000000" Offset="0"/>                        
                         <GradientStop Color="#B0FFFFFF" Offset="1"/>     
                     </LinearGradientBrush.GradientStops> 
                 </LinearGradientBrush>                    
            </Path.Fill>                     
       </Path>     
       <Path x:Name="Line" Stretch="Fill"
             StrokeThickness="5" StrokeLineJoin="Round" Stroke="#B0000000" 
             Data="M 7.73578,49.5L 51.9904,49.5" 
             Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" />
    </Grid>
</UserControl>

If it is going to become a proper control then you will have to start adding content presentation in one form or another, but that should solve your resize issue.

Edits : I've taken out some additional alignment and margins I had set, since they were not necessary anymore.

Answer 2

The easiest layout container to make things scalable is ViewBox. It is a standard control in WPF, and in Silverlight it is (I think) in the SL toolbox.