如何使按钮形状成为 WPF 中的自定义路径？答案

【问题标题】：How do I make a button shape a custom Path in WPF?如何使按钮形状成为 WPF 中的自定义路径？
【发布时间】：2014-10-29 14:58:08
【问题描述】：

我有一个使用下面的 ControlTemplate 的按钮。

<ControlTemplate x:Key="ControlTemplate" TargetType="{x:Type Button}">
        <Grid>
            <Path x:Name="ButtonPath" Fill="{Binding IsSelected, Converter={StaticResource ArrowBackgroundColorConverter}, UpdateSourceTrigger=PropertyChanged}"  
                  Data="{Binding Converter={StaticResource ArrowPathSelector}}" Stretch="UniformToFill" Margin="0 0 -35 0"></Path>
            <TextBlock Grid.Column="0" Grid.Row="0" FontFamily="{StaticResource ApplicationFont}" FontSize="{StaticResource Heading3}" HorizontalAlignment="Center" Margin="35 0 0 0" VerticalAlignment="Center" Text="{Binding Title}" Foreground="White"/>
        </Grid>
    </ControlTemplate>

但是当我在我的应用程序中单击按钮时，它不是概述路径而是原始按钮。

我不知道如何让按钮反映路径本身。非常感谢任何帮助，谢谢！

【问题讨论】：

你在设置按钮的Template="{StaticResource ControlTemplate}"吗？
是的，我是。问题是当我将鼠标悬停在按钮上或单击它时，轮廓位于矩形按钮上方，我希望它是我正在使用的路径，即箭头。
这没有任何意义。如果您要覆盖按钮的Template，则没有任何东西可以给它一个矩形轮廓——它来自您要替换的原始模板。您是否将其嵌入到 另一个 按钮中？您能否验证正在应用模板，例如，路径是否显示？
是的，路径出现了。
等等，你指的是普通按钮边框的矩形轮廓，还是焦点矩形（表示键盘焦点的虚线矩形）？

标签： wpf button path shape

【解决方案1】：

如果你想改变焦点矩形的形状（虚线边框表示键盘焦点），你需要创建一个自定义的FocusVisualStyle，它会绘制一个与你的按钮内容形状相同的虚线路径：

<Style x:Key="ButtonFocusRectangle" TargetType="Control">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate>
        <Path Stroke="Black"
              StrokeDashArray="2 2"  
              Data="M 0,0 50,50 100,0 Z"
              Stretch="UniformToFill"
              Margin="0 0 -35 0" />
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

然后，在按钮上设置FocusVisualStyle="{StaticResource ButtonFocusRectangle}"。请注意，为按钮定义自定义 Style 并让它为您应用 Template 和 FocusVisualStyle 可能会更简洁。

或者，您可以通过设置FocusVisualStyle="{x:Null}" 完全摆脱焦点视觉效果。您可能会选择这样做，并简单地在您的常规 Template 中绘制一个焦点提示，例如，使用 IsKeyboardFocused 触发器更改路径的笔划。

顺便说一句，您可能希望在两个模板的路径上将Stretch 设置为Uniform。 UniformToFill 会导致剪辑。

【讨论】：

【解决方案2】：

您是否尝试过将路径和文本块放在相反的位置：

<ControlTemplate x:Key="ControlTemplate" TargetType="{x:Type Button}">
    <Grid>
        <TextBlock Grid.Column="0" Grid.Row="0" FontFamily="{StaticResource ApplicationFont}" FontSize="{StaticResource Heading3}" HorizontalAlignment="Center" Margin="35 0 0 0" VerticalAlignment="Center" Text="{Binding Title}" Foreground="White"/>
        <Path x:Name="ButtonPath" Fill="{Binding IsSelected, Converter={StaticResource ArrowBackgroundColorConverter}, UpdateSourceTrigger=PropertyChanged}"  
              Data="{Binding Converter={StaticResource ArrowPathSelector}}" Stretch="UniformToFill" Margin="0 0 -35 0"></Path>
    </Grid>
</ControlTemplate>

【讨论】：