CODEWITHSUNDEEP
c#wpfbutton
user3044300
user3044300

Reputation: 45

WPF how to set circle button

I know how to set the default button as square grey button, but how to change it into circle button dynamically?

I have tried to set as default button but it doesn't display circle button

example : 

 Button btnb = new Button();
 btnb.Name = "b" + a.Key.ToString();
 btnb.MinHeight = 100;
 btnb.MinWidth = 100;

Upvotes: 2

Views: 4118

Answers (4)

Arash.Zandi
Arash.Zandi

Reputation: 1597

I know that it is too late but a useful link is Here in markheath.net

Upvotes: 0

Notts90
Notts90

Reputation: 255

This can be done entirely using XAML which is a lot nicer then doing it in code behind. This example is based on the Windows 10 default template (details on getting and using that here).

This sets a new control template for the buttons based on the default Windows 10 template. The only change is in the definition of the border, which now has CornerRadius="1000" added to it.

<Window.Resources>
    <Style x:Key="CircleButton" TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ButtonBase}">
                    <Border x:Name="border" CornerRadius="1000" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                        <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="Button.IsDefaulted" Value="True">
                            <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" TargetName="border" Value="#FFBEE6FD"/>
                            <Setter Property="BorderBrush" TargetName="border" Value="#FF3C7FB1"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter Property="Background" TargetName="border" Value="#FFC4E5F6"/>
                            <Setter Property="BorderBrush" TargetName="border" Value="#FF2C628B"/>
                        </Trigger>
                        <Trigger Property="ToggleButton.IsChecked" Value="True">
                            <Setter Property="Background" TargetName="border" Value="#FFBCDDEE"/>
                            <Setter Property="BorderBrush" TargetName="border" Value="#FF245A83"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Background" TargetName="border" Value="#FFF4F4F4"/>
                            <Setter Property="BorderBrush" TargetName="border" Value="#FFADB2B5"/>
                            <Setter Property="Foreground" Value="#FF838383"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

<StackPanel>
    <Button Width="50" Height="50" Margin="10" Style="{StaticResource CircleButton}"/>
    <Button Width="50" Height="50" Margin="10" Style="{StaticResource CircleButton}"/>
    <Button Width="50" Height="50" Margin="10" Style="{StaticResource CircleButton}"/>
</StackPanel>

To use the style, use something like this...

<StackPanel>
    <Button Width="50" Height="50" Margin="10" Style="{StaticResource CircleButton}"/>
    <Button Width="50" Height="50" Margin="10" Style="{StaticResource CircleButton}"/>
    <Button Width="50" Height="50" Margin="10" Style="{StaticResource CircleButton}"/>
</StackPanel>

Which produces...

Screenshot of three circles produced by the example code

Upvotes: 0

Sampath
Sampath

Reputation: 1211

You need to change button style dynamically. Put your button style seperate resource file and when you need assign that style dynamically.

In your XAML File define style..

<Window.Resources>      
<Style x:Key="RoundButtonStyleKey" TargetType="{x:Type Button}">
//Your Style goes here..
</Style>
</Window.Resources>

Code behind search style and assign it...

Button btnb = new Button();

 btnb.Name = "b" + a.Key.ToString();
 btnb.MinHeight = 100;
 btnb.MinWidth = 100;
 btnbStyle = (Style)(this.Resources["RoundButtonStyleKey"]);

Upvotes: 0

Sheridan
Sheridan

Reputation: 69959

You can define a ControlTemplate for your Button, but it's so much simpler to do in XAML than in C#. Creating one in code is far more complicated:

ControlTemplate circleButtonTemplate = new ControlTemplate(typeof(Button));

// Create the circle
FrameworkElementFactory circle = new FrameworkElementFactory(typeof(Ellipse));
circle.SetValue(Ellipse.FillProperty, Brushes.LightGreen);
circle.SetValue(Ellipse.StrokeProperty, Brushes.Black);
circle.SetValue(Ellipse.StrokeThicknessProperty, 1.0);

// Create the ContentPresenter to show the Button.Content
FrameworkElementFactory presenter = new FrameworkElementFactory(typeof(ContentPresenter));
presenter.SetValue(ContentPresenter.ContentProperty, new TemplateBindingExtension(Button.ContentProperty));
presenter.SetValue(ContentPresenter.HorizontalAlignmentProperty, HorizontalAlignment.Center);
presenter.SetValue(ContentPresenter.VerticalAlignmentProperty, VerticalAlignment.Center);

// Create the Grid to hold both of the elements
FrameworkElementFactory grid = new FrameworkElementFactory(typeof(Grid));
grid.AppendChild(circle);
grid.AppendChild(presenter);

// Set the Grid as the ControlTemplate.VisualTree
circleButtonTemplate.VisualTree = grid;

// Set the ControlTemplate as the Button.Template
CircleButton.Template = circleButtonTemplate;

And the XAML:

<Button Name="CircleButton" Content="Click Me" Width="150" Height="150" />

Upvotes: 4

Related Questions