WPF自由​​格式边框控制

Question

我必须开发一个wpf控件，该控件应具有与众所周知的边框相同的行为。 控件的形状应为新的部分。 每条可定义的闭合路径均应用于定义控件的外观。

我需要帮助来实现这一目标。 目前我不知道如何将矩形（??）与封闭的路径互换。

任何帮助将不胜感激。

Answer 1

编辑这里直接回答您的问题。 我们将编写一个ContentControl派生类，它具有非常灵活的border形式。 这个想法的基础在于OpacityMask 。

如果您想进一步了解这种方法，请看克里斯·卡瓦纳（Chris Cavanagh）的圆角解决方案示例。

步骤1 。 创建自定义控件FreeFormContentControl：

FreeFormContentControl.cs

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace WpfApplication5
{
  public class FreeFormContentControl : ContentControl
  {
    public Geometry FormGeometry
    {
      get { return (Geometry)GetValue(FormGeometryProperty); }
      set { SetValue(FormGeometryProperty, value); }
    }

    public static readonly DependencyProperty FormGeometryProperty =
      DependencyProperty.Register("FormGeometry", typeof(Geometry), typeof(FreeFormContentControl), new UIPropertyMetadata(null));

    static FreeFormContentControl()
    {
      DefaultStyleKeyProperty.OverrideMetadata(
        typeof(FreeFormContentControl),
        new FrameworkPropertyMetadata(typeof(FreeFormContentControl))
        );
    }
  }
}

主题\\ Generic.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:WpfApplication5">
  <Style TargetType="{x:Type local:FreeFormContentControl}">
    <Setter Property="FormGeometry"
            Value="M0,0 L1,0 1,1 0,1z" />
    <Setter Property="Background"
            Value="Black" />
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type local:FreeFormContentControl}">
          <Grid>
            <Path Name="mask"
                  Data="{TemplateBinding FormGeometry}"
                  Fill="{TemplateBinding Background}" />
            <Grid>
              <Grid.OpacityMask>
                <VisualBrush Visual="{Binding ElementName=mask}" />
              </Grid.OpacityMask>
              <ContentPresenter />
            </Grid>
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>
</ResourceDictionary>

有关自定义控件的更多信息，请参见CodeProject 。

第2步 。 用法。 现在，您可以将任何内容放入此控件中。 它的默认形状是矩形。 因此，以下代码将导致常规StackPanel UI：

<Window x:Class="WpfApplication5.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:cc="clr-namespace:WpfApplication5"
        Title="Window1"
        Height="300"
        Width="300">
  <Grid>
    <cc:FreeFormContentControl>
      <StackPanel>
        <Button Content="Any" />
        <Button Content="Content" />
        <TextBlock Text="Goes" />
        <TextBox Text="Here" />
      </StackPanel>
    </cc:FreeFormContentControl>
  </Grid>
</Window>

但是，如果定义自定义FormGeometry，则将获得自定义形状。 例如，以下表单几何在菱形内部提供了内部控件：

<cc:FreeFormContentControl FormGeometry="M0,0.5 L0.5,0 1,0.5 0.5,1z">

要从XAML阅读有关几何定义的更多信息，请阅读MSDN上的相应部分： 路径标记语法 。

这里要提到的最后一件事是，您不必指定或计算FormGeomtry的具体像素值。 网格使这一技巧成为可能。 因此，将其视为百分比。 即1 ==全宽或全高。 0.5 ==可用宽度/高度的一半，依此类推。

希望这可以帮助。