Question

<Style x:Key="tests" TargetType="{x:Type RadioButton}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <ToggleButton Background="{Binding Background, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}" IsChecked="{Binding IsChecked, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                          Content="{Binding Content, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"/>
                    </ControlTemplate>
                </Setter.Value> 
            </Setter>
        </Style>

我使用上面的代码来自定义切换按钮功能，但我想将切换按钮显示为圆角。

Answer 1

要获得带圆角的切换按钮，您可以执行以下操作：

右键单击按钮，然后选择编辑模板＆gt; 创建副本
为你的风格命名
在资源代码中搜索边框模板，并将角半径设置为33 （CornerRadius =＆＃34; 33＆＃34;）

希望这会有所帮助..！

Answer 2

在最新版本的UWP中，ToggleButton公开了CornerRadius属性（感谢@Clint Rutkas）。

否则：

<ToggleButton
  Background="Transparent"
  FontSize="16"
  IsChecked="{Binding IsEnabled, Mode=TwoWay}"
  IsTabStop="False"
  ToolTipService.ToolTip="Press to enable/disable metronome (Space)">
  <ToggleButton.KeyboardAccelerators>
    <KeyboardAccelerator Key="Space" />
    <KeyboardAccelerator Key="P" />
  </ToggleButton.KeyboardAccelerators>
  <ToggleButton.Resources>
    <x:String x:Key="Play">&#xF5B0;</x:String>
    <x:String x:Key="Stop">&#xE73C;</x:String>
    <Style TargetType="ToggleButton">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="ToggleButton">
            <Grid>
              <Border
                    x:Name="border"
                    Width="56"
                    Height="56"
                    Padding="2"
                    Background="{TemplateBinding Background}"
                    BorderBrush="{ThemeResource ButtonBorderThemeBrush}"
                    BorderThickness="1"
                    CornerRadius="28">
              <FontIcon x:Name="icon" Glyph="{StaticResource Play}" />
            </Border>
              <VisualStateManager.VisualStateGroups>
                <VisualStateGroup>
                  <VisualState>
                    <VisualState.StateTriggers>
                      <StateTrigger IsActive="{Binding IsEnabled}" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                      <Setter Target="icon.Glyph" Value="{StaticResource Stop}" />
                      <Setter Target="icon.FontSize" Value="30" />
                      <Setter 
                        Target="icon.Foreground"
                        Value="{ThemeResource SystemColorHighlightTextColor}" />
                      <Setter 
                        Target="border.Background" 
                        Value="{ThemeResource SystemColorHighlightColor}" />
                    </VisualState.Setters>
                  </VisualState>
                </VisualStateGroup>
              </VisualStateManager.VisualStateGroups>
            </Grid>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </ToggleButton.Resources>
</ToggleButton>

UWP中切换按钮的圆角

2 个答案: