立体感按钮

tech2026-04-09  1

<Style TargetType="ToggleButton">

    <Setter Property="Template">

        <Setter.Value>

            <ControlTemplate TargetType="ToggleButton">

                <Border BorderBrush="#EFEFEF" BorderThickness="6" CornerRadius="35">

                    <Border.Background>

                        <LinearGradientBrush StartPoint="0.5, 0" EndPoint="0.5, 1">

                            <GradientStop Offset="0" Color="#E24E59" />

                            <GradientStop Offset="0.1" Color="#FA5A62" />

                            <GradientStop Offset="0.9" Color="#FA5A62" />

                            <GradientStop Offset="1" Color="#E24E59" />

                        </LinearGradientBrush>

                    </Border.Background>

                    <Grid>

                        <Grid.ColumnDefinitions>

                            <ColumnDefinition Width="auto" />

                            <ColumnDefinition Width="*" />

                        </Grid.ColumnDefinitions>

                        <Grid Width="110" Margin="0" HorizontalAlignment="Left">

                            <Border Margin="-0.5" CornerRadius="32">

                                <Border.Effect>

                                    <DropShadowEffect BlurRadius="20" Direction="270" Opacity="0.6" ShadowDepth="2"

                                                      Color="Brown" />

                                </Border.Effect>

                                <Border.Background>

                                    <LinearGradientBrush StartPoint="0.5, 0" EndPoint="0.5, 1">

                                        <GradientStop Offset="0" Color="#F7F7F7" />

                                        <GradientStop Offset="1" Color="#D2D2D2" />

                                    </LinearGradientBrush>

                                </Border.Background>

                            </Border>

                            <Border Width="30" Height="30" Margin="0,0,10,0" HorizontalAlignment="Right"

                                    BorderThickness="5" CornerRadius="100">

                                <Border.Background>

                                    <RadialGradientBrush GradientOrigin="0.5, 0.5">

                                        <GradientStop Offset="0" Color="#FA5A62" />

                                        <GradientStop Offset="0.55" Color="#FA5A62" />

                                        <GradientStop Offset="1" Color="#E24E59" />

                                    </RadialGradientBrush>

                                </Border.Background>

                                <Border.BorderBrush>

                                    <LinearGradientBrush StartPoint="0.5, 0" EndPoint="0.5, 1">

                                        <GradientStop Offset="0" Color="#CBD5D1" />

                                        <GradientStop Offset="1" Color="#EFEFE1" />

                                    </LinearGradientBrush>

                                </Border.BorderBrush>

                            </Border>

                        </Grid>

                        <TextBlock Grid.Column="1" Text="OFF" HorizontalAlignment="Center" VerticalAlignment="Center"

                                   Foreground="#BE3A3A"/>

                    </Grid>

                </Border>

            </ControlTemplate>

        </Setter.Value>

    </Setter>

</Style>

1

2

3

4

5

<Grid Background="#222222">

    <Viewbox Width="400">

        <ToggleButton Width="190" Height="70" />

    </Viewbox>

</Grid>

最新回复(0)