Silverlight:创建圆形按钮模板

3

我决定尝试制作一个圆形按钮,因此在我的XAML中使用Expression Blend放置了一个按钮控件。然后通过选择“编辑控件部分(模板)”->“编辑副本”来创建它的模板。我试图设计它,使得按钮的左右两侧始终是完美的半圆,这样无论按钮增长多高或多宽,其角半径都会达到按钮宽度或长度的一半,取决于哪个更小。这样,如果按钮被拉伸得很高,顶部和底部将是完美的半圆,如果按钮被拉伸得很宽,左右则是完美的半圆。是否有可能做到这一点?

1个回答

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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接