Silverlight:创建圆形按钮模板 [英] Silverlight: Creating a round button template

问题描述

我决定尝试制作一个圆形按钮，因此使用表达式混合，我在我的 xaml 上放置了一个按钮控件.然后我通过选择编辑控制部件(模板)"->编辑副本"从它创建了一个模板.我试图设计它，使按钮的左侧和右侧始终是完美的半圆，这样无论按钮长得多高或多宽，角半径都将最大为宽度的一半或长度的一半按钮，取决于哪个较小.这样，如果按钮拉高，顶部和底部将是完美的半圆，如果按钮拉宽，则左右将是完美的半圆.可以这样做吗?

I decided to try making a circular button, so using expression blend, I dropped a button control on my xaml. I then created a template from it by choosing "Edit Control Parts (Template)" -> "Edit a Copy". I am trying to design it so that the left and right sides of the button were always perfect semi circles, so that no matter how tall or wide the button grew, the corner radius would max out at either half the width or half the length of the button, depending on which was smaller. That way, if the button was stretched tall, the top and buttom would be perfect half circles, and if the button was stretched wide, the left and right would be perfect half circles. Is it possible to do this?

推荐答案

这很接近，但要使其成为完美的圆形边缘则更难.我是通过制作圆形而不是带有圆润曲线的矩形来制作的.看看这是否有帮助:

This is close, but making it a perfectly round edge is harder. I've made it by making the round shape, not a rectangle with rouneded 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>

这篇关于Silverlight:创建圆形按钮模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！