Я создал Button с закругленными углами и белым фоном. Но мне нужны границы вокруг кнопки, чтобы она выглядела как кнопка на прикрепленном скриншоте:

enter image description here

Я разработал этот код для кнопки:

<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>

Пожалуйста, дайте ваше предложение.

0
arun d 24 Апр 2017 в 12:56

2 ответа

Лучший ответ

Вы можете поместить 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>

enter image description here

3
mm8 24 Апр 2017 в 10:19

Я разработал код кнопки с рамкой, такой же, как на прилагаемом изображении, пожалуйста, найдите код ниже.

 <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>

Положить изображение, как показано ниже введите описание изображения здесь,

-1
arun d 24 Апр 2017 в 11:04
43585036