CODEWITHSUNDEEP
c#wpfxaml
arun d
arun d

Reputation: 229

Add button with border in WPF

I have created a Button with rounded corners and white background. But I need borders surrounding the button to look like the button in the attached screenshot:

enter image description here

I have developed this code for the 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>

Please give your suggestion.

Upvotes: 3

Views: 16831

Answers (2)

arun d
arun d

Reputation: 229

I developed the code for button with border as same in attached image please find the below code.

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

out put image as belowenter image description here,

Upvotes: 0

mm8
mm8

Reputation: 169370

You could put a Border with a LinearGradientBrush around the Button. The following sample markup should give you the idea:

<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

Upvotes: 7

Related Questions