CODEWITHSUNDEEP
c#wpfxamlbutton
Sagotharan
Sagotharan

Reputation: 2626

Can't get the border in WPF circular button (XAML)

In my project I have created a circular button. in that i have faced tow problems

1) border want red and gold color but I got only gold color border.

2) I have used arrow as content. but it not looking good.

below picture explain My MODEL and What I get in my project.

enter image description here

MY XAML 

<Window.Resources>
        <Style TargetType="{x:Type Button}" x:Key="roundButton">
            <Style.Resources>
                <RadialGradientBrush x:Key="roundButtonStroke">
                    <GradientStop Color="red" Offset="0.5" />
                    <GradientStop Color="Gold" Offset="1" />
                </RadialGradientBrush>

                <LinearGradientBrush x:Key="roundButtonBackground" StartPoint="0,0" EndPoint="1,1">
                    <GradientStop Color="Gold" Offset="0.0" />
                    <GradientStop Color="#FEFFD2" Offset="0.5" />
                    <GradientStop Color="Gold" Offset="1.1" />
                </LinearGradientBrush>                
            </Style.Resources>

            <Setter Property="Foreground" Value="Black" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" >
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*" />
                                <RowDefinition Height="7*" />
                                <RowDefinition Height="7*" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="5*" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Ellipse x:Name="bgEllipse" Grid.ColumnSpan="3" Grid.RowSpan="3" Fill="{StaticResource roundButtonBackground}" StrokeThickness="5" Stroke="{StaticResource roundButtonStroke}" />
                            <ContentPresenter Grid.RowSpan="3" Grid.ColumnSpan="3" HorizontalAlignment="Center" VerticalAlignment="Center" RecognizesAccessKey="True" />                            
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>        
        <Button Width="100" Height="100" Foreground="#CD3234" FontSize="44" Content="->" Style="{StaticResource roundButton}" ></Button>
    </Grid>

Upvotes: 3

Views: 2154

Answers (1)

Sebastian Edelmeier
Sebastian Edelmeier

Reputation: 4157

First, you should draw two ellipses to achieve that, one with a solid red stroke and solid gold background and a slightly smaller one with the same stroke and your linear gradient background.

Sample:

<Grid Width="100" Height="100">
    <Ellipse Stroke="Red" StrokeThickness="1" Fill="Gold"></Ellipse>
    <Ellipse Stroke="Red" StrokeThickness="1" Margin="5">
        <Ellipse.Fill>
            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                <GradientStop Color="Gold" Offset="0.0" />
                <GradientStop Color="#FEFFD2" Offset="0.5" />
                <GradientStop Color="Gold" Offset="1.1" />
            </LinearGradientBrush>
        </Ellipse.Fill>
    </Ellipse>
</Grid>

As for the arrow, you could either put in a wingdings arrow, bitmap image or some sort of xaml geometry.

Wingdings sample:

<Button Style="{DynamicResource RoundGoldenButton}">
 <TextBlock VerticalAlignment="Center" 
                       HorizontalAlignment="Center"
                       Foreground="Red"
                       FontFamily="WingDings">à</TextBlock>
</Button>

This will give you the following: enter image description here

Upvotes: 5

Related Questions