WPF 圆形按钮 [英] WPF round button

问题描述

我正在尝试创建一个圆形按钮，该按钮在悬停时显示边框并具有对象绑定颜色.我试图做到这一点，但是当按钮的颜色不是透明时，我无法点击它.你能帮我吗?我是 wpf 的新手，不了解它的所有内容.

I'm trying to create a round button which has a border shown when hovering and has an object binded color. I tried to make this but when thes button's color is other than transparent, I can't click on it. Could you help me pls ? I am new to wpf and don't understand everything about it.

 <Page.Resources>

    <DataTemplate x:Key="Stone">
        <StackPanel DataContext="{Binding}">

            <Border CornerRadius="15" Height="30" Width="30" Margin="0"  >
                <Button Content="{Binding}" Tag="{Binding Name}" Height="30" Width="30" Margin="0" Click="Button_Click" Background="Transparent" BorderThickness="0">
                    <Button.Style>
                        <Style TargetType="Button">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="Button">
                                        <Grid Background="{TemplateBinding Background}">
                                            <VisualStateManager.VisualStateGroups>
                                                <VisualStateGroup x:Name="CommonStates">
                                                    <VisualState x:Name="Normal"/>
                                                    <VisualState x:Name="MouseOver"/>
                                                </VisualStateGroup>
                                            </VisualStateManager.VisualStateGroups>
                                        </Grid>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </Button.Style>
                </Button>
                <Border.Style>
                    <Style TargetType="Border">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding StrColor}" Value="black">
                                <Setter Property="Background" Value="Black"></Setter>
                            </DataTrigger>
                            <DataTrigger Binding="{Binding StrColor}" Value="white">
                                <Setter Property="Background" Value="White"></Setter>
                            </DataTrigger>
                            <DataTrigger Binding="{Binding StrColor}" Value="none">
                                <Setter Property="Background" Value="Transparent"></Setter>
                            </DataTrigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                     <Setter Property="BorderBrush" Value="Gray"/>
                                <Setter Property="BorderThickness" Value="3"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="False">
                                <Setter Property="BorderBrush" Value="Transparent"/>
                                <Setter Property="BorderThickness" Value="0"/>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </Border.Style>
            </Border>             

        </StackPanel>
    </DataTemplate>


    <DataTemplate x:Key="Goban">
        <ItemsControl ItemsSource="{Binding }" ItemTemplate="{DynamicResource Stone}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>
    </DataTemplate>

</Page.Resources>

</Page.Resources>

<StackPanel Name="Goban">
    <ItemsControl  Height="570" Margin="20" x:Name="LstPlateau" ItemsSource="{Binding LstPlateau, Mode=Default}" ItemTemplate="{DynamicResource Goban}">
        <ItemsControl.Background>

            <ImageBrush ImageSource="../Pictures/goban19.png" Stretch="Fill" />
        </ItemsControl.Background>
    </ItemsControl>
</StackPanel>
    

有关更多详细信息，我正在使用 mvvm light，当我单击透明按钮时，命令会触发，但不会触发其他颜色(命令中未到达断点).谢谢你的帮助:)

For more details, i'm using mvvm light and, when I click a transparent button, the command fire but it don't whith other color (breakpoint not reached in the command). Thank you for your help :)

推荐答案

按钮在边框内并且不可见"

The button is inside the border and "invisible"

要获得圆形按钮(或矩形以外的其他形状)，您需要更改按钮本身的模板.

To get a round button (or another shape other than rectangular), you need to change the template of the button itself.

这是一个完整的圆形按钮模板示例.将其记录在资源字典中并在您的按钮中使用.

Here's an example of a FULL circular button template. Record it in a resource dictionary and use it in your button.

我没有设置颜色绑定，因为我从你的代码中不明白它们在哪里使用.

I did not set color bindings, because I did not understand from your code where they are used.

        <SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD"/>
        <SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/>
        <SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/>
        <SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/>
        <SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/>
        <SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/>
        <SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
        <SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/>
        <SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
       <Style x:Key="FocusVisual">
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="ButtonRoundStyle" TargetType="{x:Type Button}">
            <Setter Property="FocusVisualStyle" Value="{DynamicResource FocusVisual}"/>
            <Setter Property="Background" Value="{DynamicResource Button.Static.Background}"/>
            <Setter Property="BorderBrush" Value="{DynamicResource Button.Static.Border}"/>
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Padding" Value="1"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid>
                            <Ellipse x:Name="ellipse"
                                     Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{Binding BorderThickness.Left, RelativeSource={RelativeSource AncestorType=Button}}"
                                     Fill="{TemplateBinding Background}" SnapsToDevicePixels="true">
                            </Ellipse>
                            <ContentPresenter x:Name="contentPresenter" Focusable="False"
                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                              Margin="{TemplateBinding Padding}" RecognizesAccessKey="True"
                                              SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsDefaulted" Value="true">
                                <Setter Property="Stroke" TargetName="ellipse" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="Fill" TargetName="ellipse" Value="{DynamicResource Button.MouseOver.Background}"/>
                                <Setter Property="Stroke" TargetName="ellipse" Value="{DynamicResource Button.MouseOver.Border}"/>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="true">
                                <Setter Property="Fill" TargetName="ellipse" Value="{DynamicResource Button.Pressed.Background}"/>
                                <Setter Property="Stroke" TargetName="ellipse" Value="{DynamicResource Button.Pressed.Border}"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Fill" TargetName="ellipse" Value="{DynamicResource Button.Disabled.Background}"/>
                                <Setter Property="Stroke" TargetName="ellipse" Value="{DynamicResource Button.Disabled.Border}"/>
                                <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{DynamicResource Button.Disabled.Foreground}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

所有的key都是通过DynamicResource获取的.因此，它们可以在应用模板的地方重新定义.

All keys are obtained through DynamicResource. Therefore, they can be redefined at the place where the template is applied.

我编辑了问题，在我的项目中我尝试...

I edited the question, in my project I try ...

用完整的 XAML 代码补充问题后，如果我理解正确，我展示的模式应用如下:

After complementing the question with the complete XAML code, if I understood it correctly, the pattern I showed is applied like this:

    <Button  Content="{Binding}" Tag="{Binding Name}"
                Height="130" Width="130" Margin="0"
                Click="Button_Click">
        <Button.Resources>
            <SolidColorBrush x:Key="Button.MouseOver.Border" Color="Gray"/>
        </Button.Resources>
        <Button.Style>
            <Style TargetType="Button" BasedOn="{StaticResource ButtonRoundStyle}">
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="BorderThickness" Value="0"/>
                <Setter Property="BorderBrush" Value="Transparent"/>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding StrColor}" Value="black">
                        <Setter Property="Background" Value="Black"></Setter>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding StrColor}" Value="white">
                        <Setter Property="Background" Value="White"></Setter>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding StrColor}" Value="none">
                        <Setter Property="Background" Value="Transparent"></Setter>
                    </DataTrigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="BorderThickness" Value="3"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Button.Style>
    </Button>

这篇关于WPF 圆形按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！