更改 wpf 切换按钮的背景大小

Question

我们有一个使用 XAML 使用 wpf 设计的普通切换按钮。

但是我们希望实现以下按钮设计，其中背景填充圆形开关：

这是否可以在不创建自定义按钮的情况下实现，并通过某种方式增加背景大小以使其与中间的圆形开关大小几乎相同。

我们设计的切换按钮的样式：

<ToggleButton x:Name="btn_Rly_1" Content="0" Height="24.4" Margin="54.78,31.355,0,0" VerticalAlignment="Top" Width="56.107" Unchecked="un" Checked="btn_test_Checked" Background="#d7568d" HorizontalAlignment="Left" />

Answer 1

我为

ToggleButton

写了一个样式，希望它能解决你的问题。

<ToggleButton Content="14" IsChecked="False" Padding="2">
    <ToggleButton.Style>
        <Style TargetType="{x:Type ToggleButton}">
            <Setter Property="OverridesDefaultStyle" Value="True" />
            <Setter Property="FocusVisualStyle" Value="{x:Null}" />
            <Setter Property="Background" Value="LightGray" />
            <Setter Property="Width" Value="180" />
            <Setter Property="Height" Value="90" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <!-- Root Container -->
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition />
                                <RowDefinition />
                            </Grid.RowDefinitions>
                            <!-- Used to determine the value of Border.CornerRadius. -->
                            <Rectangle x:Name="PART_OuterRadius" Grid.Row="0" />
                            <Border Background="{TemplateBinding Background}"
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    CornerRadius="{Binding Path=ActualHeight, ElementName=PART_OuterRadius}"
                                    Padding="{TemplateBinding Padding}"
                                    SnapsToDevicePixels="True"
                                    Grid.RowSpan="2">
                                <Grid>
                                    <Grid>
                                        <Grid.RowDefinitions>
                                            <RowDefinition />
                                            <RowDefinition />
                                        </Grid.RowDefinitions>
                                        <Rectangle x:Name="PART_InnerRadius" Grid.RowSpan="2" />
                                    </Grid>
                                    <Grid x:Name="PART_Button"
                                            Width="{Binding Path=ActualHeight, ElementName=PART_InnerRadius}"
                                            Height="{Binding Path=ActualHeight, ElementName=PART_InnerRadius}"
                                            HorizontalAlignment="Left">
                                        <Ellipse Fill="White" />
                                        <!-- Scale the content and limit its size within a circular area. -->
                                        <Viewbox>
                                            <ContentPresenter Margin="5" />
                                        </Viewbox>
                                    </Grid>
                                </Grid>
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter Property="HorizontalAlignment" Value="Right" TargetName="PART_Button" />
                                <Setter Property="Background" Value="LimeGreen" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ToggleButton.Style>
</ToggleButton>