Silverlight:创建一个圆形按钮模板

时间:2008-12-18 17:28:49

标签: silverlight xaml

我决定尝试制作一个圆形按钮,所以使用表达式混合,我在我的xaml上放了一个按钮控件。然后,我通过选择“编辑控件(模板)” - >创建了一个模板。 “编辑副本”。我试图设计它,使按钮的左右两侧始终是完美的半圆形,这样无论按钮长度有多高或多宽,角半径最大都是宽度的一半或长度的一半。按钮,取决于哪个更小。这样,如果按钮拉得很高,顶部和底部就会是完美的半圆,如果按钮拉得很宽,左边和右边都是完美的半圆。有可能这样做吗?

1 个答案:

答案 0 :(得分:2)

这很接近,但是使它成为一个完美的圆形边缘更难。我是通过制作圆形而不是带有曲线的矩形来制作的。看看这是否有帮助:

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