WPF如何设置圆形按钮

时间:2013-12-10 08:18:52

标签: c# wpf button

我知道如何将默认按钮设置为方形灰色按钮,但如何将其动态更改为圆形按钮?

我尝试设置为默认按钮,但不显示圆形按钮

示例:

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

3 个答案:

答案 0 :(得分:2)

您可以为ControlTemplate定义Button,但在XAML中比在C#中更简单。在代码中创建一个更复杂:

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;

和XAML:

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

答案 1 :(得分:0)

您需要动态更改按钮样式。放置您的按钮样式单独的资源文件,并在需要动态分配该样式时。

在您的XAML文件中定义样式..

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

搜索样式背后的代码并分配它......

Button btnb = new Button();

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

答案 2 :(得分:0)

这可以完全使用XAML来完成,这比在后面的代码中做的要好得多。本示例基于Windows 10默认模板(获取和使用该here的详细信息)。

这将基于默认的Windows 10模板为按钮设置新的控件模板。唯一的变化是边界的定义,现在边界上添加了CornerRadius="1000"

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

要使用样式,请使用类似以下内容...

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

哪个生产...

Screenshot of three circles produced by the example code