Silverlight: creating a round button template

Question

I decided to try making a circular button, so using the blend expression, I reset the control button on my xaml. Then I created a template from it by selecting "Edit Control Parts (Template)" → "Edit Copy". I'm trying to design it so that the left and right sides of the button are always perfect semicircles, so no matter how tall or wide the button is, the angular radius will be maximum half the width or half the length of the button, depending on which it was smaller. Thus, if the button was stretched high, the top and buttom would be ideal half circles, and if the button were stretched wide, the left and right would be ideal half circles. Can this be done?

Answer 1

It's close, but making it a completely round edge is harder. I did this by making a round shape, not a rectangle with jagged curves. See if this helps:

    <Style x:Key="roundButton"
       TargetType="Button">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="Button">
        <Grid>
          <Grid.RowDefinitions>
            <RowDefinition Height="0.479*" />
            <RowDefinition Height="0.521*" />
          </Grid.RowDefinitions>
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0.147*" />
            <ColumnDefinition Width="0.685*" />
            <ColumnDefinition Width="0.168*" />
          </Grid.ColumnDefinitions>
          <vsm:VisualStateManager.VisualStateGroups>
            <vsm:VisualStateGroup x:Name="FocusStates">
              <vsm:VisualState x:Name="Unfocused" />
              <vsm:VisualState x:Name="Focused" />
            </vsm:VisualStateGroup>
            <vsm:VisualStateGroup x:Name="CommonStates">
              <vsm:VisualState x:Name="MouseOver" />
              <vsm:VisualState x:Name="Normal" />
              <vsm:VisualState x:Name="Pressed" />
              <vsm:VisualState x:Name="Disabled" />
            </vsm:VisualStateGroup>
          </vsm:VisualStateManager.VisualStateGroups>
          <Path Margin="-2,8,2,8"
                Grid.Column="1"
                Grid.RowSpan="2"
                Fill="{TemplateBinding Background}"
                Stretch="Fill"
                Stroke="#FF000000"
                Data="M25.999998,0.5 L26.499998,0.55732149 L26.499998,0.50000316 L184.5,0.50000316 L184.5,0.55732256 L185,0.5 C199.0833,0.50000429 210.5,13.483747 210.5,29.500002 C210.5,45.516144 199.0833,58.500004 185,58.500004 L184.5,58.44268 L184.5,58.500004 L26.499998,58.500004 L26.499998,58.44268 L25.999998,58.500004 C11.916747,58.500004 0.5,45.516209 0.5,29.500002 C0.5,13.483672 11.916748,0.50000429 25.999998,0.5 z"
                StrokeThickness="0" />
          <ContentControl FontFamily="{TemplateBinding FontFamily}"
                          FontSize="{TemplateBinding FontSize}"
                          FontStyle="{TemplateBinding FontStyle}"
                          FontWeight="{TemplateBinding FontWeight}"
                          Foreground="#FFFFFFFF"
                          HorizontalContentAlignment="Center"
                          VerticalContentAlignment="Center"
                          Grid.ColumnSpan="3"
                          Grid.RowSpan="2"
                          Content="{TemplateBinding Content}" />
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
  <Setter Property="Background"
          Value="#FFFF0000" />
</Style>