Question

我创建了一个带圆角和白色背景的Button。但是我需要按钮周围的边框看起来像所附屏幕截图中的按钮：

我为按钮开发了这段代码：

<Button Cursor="Hand" x:Name="login" BorderBrush="Transparent" Background="White" Foreground="Black" FontSize="24" Margin="42,305,0,0" VerticalAlignment="Top" HorizontalAlignment="Left"
                Content="LOG IN" Grid.Column="1" FontWeight="Bold" Click="login_Click" RenderTransformOrigin="0.844,0.439" Width="101">
    <Button.Effect>
        <DropShadowEffect BlurRadius="15" ShadowDepth="0"/>
    </Button.Effect>
    <Button.Resources>
        <Style TargetType="{x:Type Border}">
            <Setter Property="CornerRadius" Value="10"/>
            <Setter Property="Padding" Value="10,2,10,3"/>
            <Setter Property="Background" Value="White"/>
        </Style>
    </Button.Resources>
</Button>

请提出你的建议。

Answer 1

您可以在Border附近放置一个LinearGradientBrush Button。以下示例标记应该为您提供以下想法：

<Border CornerRadius="10" Padding="2" Grid.Column="1" Width="101" RenderTransformOrigin="0.844,0.439"
                VerticalAlignment="Top" HorizontalAlignment="Left" Margin="42,305,0,10">
    <Border.Background>
        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
            <GradientStop Color="LightBlue" Offset="0" />
            <GradientStop Color="Blue" Offset="0.75" />
        </LinearGradientBrush>
    </Border.Background>
    <Button Cursor="Hand" x:Name="login" BorderBrush="Transparent" Background="White" Foreground="Black" FontSize="24"
                    Content="LOG IN" FontWeight="Bold">
        <Button.Resources>
            <Style TargetType="{x:Type Border}">
                <Setter Property="CornerRadius" Value="10"/>
            </Style>
        </Button.Resources>
    </Button>
</Border>

Answer 2

我开发了带有边框的按钮代码，如附图所示，请找到下面的代码。

 <Border BorderBrush="red" BorderThickness="1" Margin="10,139,36,156" CornerRadius="10">
            <Border.Background>
                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                    <GradientStop Color="LightCyan" Offset="0.0" />
                    <GradientStop Color="LightBlue" Offset="0.5" />

                </LinearGradientBrush>
            </Border.Background>

            <StackPanel Margin="10,10,10,0" Height="39" VerticalAlignment="Top">
                <Button Cursor="Hand" x:Name="lgin" BorderBrush="Transparent" Background="White" Foreground="Black" FontSize="24" VerticalAlignment="Top" HorizontalAlignment="Left"
                    Content="LOG IN" FontWeight="Bold" Click="login_Click" RenderTransformOrigin="0.844,0.439" Width="101" Height="39">

                    <Button.Resources>
                        <Style TargetType="{x:Type Border}">

                            <Setter Property="CornerRadius" Value="10"/>
                            <Setter Property="Padding" Value="10,2,10,3"/>
                            <Setter Property="Background" Value="White"/>
                        </Style>

                    </Button.Resources>
                    <Button.Effect>
                        <DropShadowEffect BlurRadius="15" ShadowDepth="0"/>
                    </Button.Effect>

                </Button>
            </StackPanel>
        </Border>

输出图片如下，

在WPF中添加带边框的按钮

2 个答案: