WPF XAML - Erstellen einer Schaltfläche mit Rahmen, Pfad und Text überlagert, alle Stile durch die Schaltfläche gesteuert

Question

Ich versuche, eine Button zu erstellen, die eine Border (abgerundete Ecken) hat, die einen Path Vektor überlagert hat und Die Path hat etwas Text von Label oben drauf.

Ich habe Auslöser erstellt, die, wenn Sie den Mauszeiger über diesen Button bewegen, den Stil aller verschachtelten Elemente ändern.

Das Problem Ich bin mir nicht sicher, wo das Label Text zu platzieren, da ich immer noch Zugriff auf sie aus dem Code müssen hinter erhalten und es Textwert gesetzt, aber ich muss auch seine Farbe auslösen oder zu binden die Borders-Farbe, auf die ich nicht von innerhalb der Template oder außerhalb zugreifen kann, um dies alles funktionieren zu lassen.

Vielleicht muss ich eine andere Layoutstruktur verwenden? Obwohl die meisten davon mit Ausnahme des Label

Code in XAML-Datei

<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

Verwenden Sie ein Gitter so weit in Ordnung arbeiten und darin sowohl Lable und Pfad setzen und die Bindung ändern:

<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"; 
} 

Beachten Sie, dass Sie die Inhaltseigenschaft in einem ähnlichen Muster binden können.