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 ==可用寬度/高度的一半，依此類推。

希望這可以幫助。