WPF圆形按钮

Question

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

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

<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，当我单击透明按钮时，命令会触发，但不会触发其他颜色（命令中未达到断点）。感谢您的帮助:)

Answer 1

The button is inside the border and "invisible"

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

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

我没有设置颜色绑定，因为我没有从你的代码中理解它们的使用位置。

        <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获取的。因此，可以在应用模板的地方重新定义它们。

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

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

    <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圆形按钮

WPF round button

c#

wpf

xaml

mvvm-light