Silverlight：創建一個圓形按鈕模板

Question

我決定嘗試製作一個圓形按鈕，所以使用表達式融合，我在我的xaml上放下了一個按鈕控件。然後我通過選擇「編輯控制部件（模板）」 - >「編輯一個副本」來創建一個模板。我試圖設計它，使得按鈕的左右兩側始終是完美的半圓形，這樣無論按鈕的長度或寬度有多高，拐角半徑都將最大爲半寬或半長該按鈕取決於哪個更小。這樣，如果按鈕被拉高，頂部和臀部將是完美的半個圓圈，並且如果按鈕被拉長，則左側和右側將是完美的半個圓圈。是否有可能做到這一點？

Answer 1

這很接近，但使它成爲一個完美的圓形邊緣更難。我通過製作圓形而不是矩形曲線。看看是否有幫助：

<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>