c# - WPF XAML - 创建一个带有边框、路径和文本相互叠加的按钮，所有样式都由按钮控制

Question

我正在尝试创建一个 Button，它有一个 Border(圆角)，它有一个 Path 向量覆盖它和Path 上面有一些来自 Label 的文本。

我创建了触发器，当您将鼠标悬停在该 Button 上时，所有这些嵌套元素的样式都会发生变化。

问题我不确定在哪里放置标签文本，因为我仍然需要从后面的代码访问它以获取和设置它的文本值，但我还需要触发或将其颜色绑定(bind)到我无法访问的边框颜色从 Template 内部或外部来实现这一切。

也许我需要使用不同的布局结构？尽管到目前为止，除了 Label

大部分都工作正常

xaml 文件中的代码

<Grid>
    <Button x:Name="btn" Width="70" Height="70" Background="#FF474747">
        <Button.Template>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border x:Name="border1" BorderBrush="Gray" BorderThickness="3" CornerRadius="2" Background="#FF272727">
                    <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="pth"  Opacity="1" Fill="#FF515151" Stretch="Fill" HorizontalAlignment="Center" VerticalAlignment="Center">
                        <Path.Data>
                            <PathGeometry Figures="m 18.16782 0 -7.64541 5.81323 0 61.04669 L 0 66.85992 0 70 l 61.43133 0 0 -3.14008 -20.17455 0 0 -55.87557 L 18.16782 0 Z m -4.15996 15.70413 23.54902 0 0 1.69254 -20.74683 1.78854 0 15.00717 20.74683 1.78792 0 1.69254 -23.54902 0 0 -21.96871 z m 11.2761 5.08198 a 5.793155 5.793155 0 0 1 5.79266 5.79266 5.793155 5.793155 0 0 1 -5.79266 5.79328 5.793155 5.793155 0 0 1 -5.79328 -5.79328 5.793155 5.793155 0 0 1 5.79328 -5.79266 z" FillRule="evenodd"/>
                        </Path.Data>
                    </Path>
                </Border>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter TargetName="border1" Property="BorderBrush"  Value="#FFDE2029"/>
                        <Setter TargetName="pth" Property="Fill" Value="#FFAAAAAA"/>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="true">
                        <Setter TargetName="border1" Property="BorderBrush"  Value="#FFFF445D"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Button.Template>
    </Button>

    <Label x:Name="lblText" Content="Ab" HorizontalAlignment="Right" VerticalAlignment="Top" FontFamily="Arial"  Foreground="{Binding BorderBrush, ElementName=btn}" FontSize="22" />
</Grid>

Answer 1

使用 Grid 并将 Lable 和 Path 放入其中并更改 Binding:

 <Window x:Class="Test1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:Test1"
    mc:Ignorable="d"
    Title="MainWindow" Name="window"
    xmlns:PresentationOptions="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options">

<Grid>
    <Button x:Name="btn" Tag="ABC" Width="70" Height="70" Background="#FF474747">
        <Button.Template>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border x:Name="border1" BorderBrush="Red" BorderThickness="3" CornerRadius="2" Background="#FF272727">
                    <Grid>
                        <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="pth"  Opacity="1" Fill="#FF515151" Stretch="Fill" HorizontalAlignment="Center" VerticalAlignment="Center">
                            <Path.Data>
                                <PathGeometry Figures="m 18.16782 0 -7.64541 5.81323 0 61.04669 L 0 66.85992 0 70 l 61.43133 0 0 -3.14008 -20.17455 0 0 -55.87557 L 18.16782 0 Z m -4.15996 15.70413 23.54902 0 0 1.69254 -20.74683 1.78854 0 15.00717 20.74683 1.78792 0 1.69254 -23.54902 0 0 -21.96871 z m 11.2761 5.08198 a 5.793155 5.793155 0 0 1 5.79266 5.79266 5.793155 5.793155 0 0 1 -5.79266 5.79328 5.793155 5.793155 0 0 1 -5.79328 -5.79328 5.793155 5.793155 0 0 1 5.79328 -5.79266 z" FillRule="evenodd"/>
                            </Path.Data>
                        </Path>
                        <Label x:Name="lblText" HorizontalAlignment="Right" VerticalAlignment="Top" FontFamily="Arial"  
                               Content="{Binding Path=Tag, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Border}}"
                               Foreground="{Binding Path=BorderBrush, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Border}}" FontSize="22" />
                    </Grid>
                </Border>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter TargetName="border1" Property="BorderBrush"  Value="#FFDE2029"/>
                        <Setter TargetName="pth" Property="Fill" Value="#FFAAAAAA"/>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="true">
                        <Setter TargetName="border1" Property="BorderBrush"  Value="#FFFF445D"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Button.Template>
    </Button>
</Grid>
</Window>

public MainWindow()
{
     InitializeComponent();
        Tag = "ABC";
}

请注意，您可以以类似的模式绑定(bind)内容属性。