【WPF】自定义TitleBar控件实现

1.界面布局

<UserControl
    x:Class="Controls.UserControls.TitleBarControl"
    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:local="clr-namespace:Controls.UserControls"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    MinWidth="100"
    d:DesignHeight="60"
    d:DesignWidth="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type local:TitleBarControl}}, Path=MyWidth}"
    Background="Transparent"
    mc:Ignorable="d">
    <Border Background="Transparent">
        <DockPanel>
            <Border
                Margin="5,1,0,1"
                Background="#F5F5F5"
                CornerRadius="7" />
            <Canvas
                Height="40"
                Margin="0,0,0,0"
                DockPanel.Dock="Top">
                <Border
                    Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type local:TitleBarControl}}, Path=MyWidth}"
                    Height="40"
                    MinWidth="100"
                    Background="White"
                    CornerRadius="20 0 0 20">
                    <Border.Effect>
                        <DropShadowEffect
                            BlurRadius="20"
                            Direction="180"
                            Opacity="0.5"
                            ShadowDepth="0"
                            Color="Black" />
                    </Border.Effect>

                    <Border
                        Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type local:TitleBarControl}}, Path=MyWidth}"
                        MinWidth="100"
                        Margin="8,6,0,6"
                        Background="#0c8918"
                        CornerRadius="13 0 0 13">
                        <Label
                            Margin="10,0,0,0"
                            VerticalContentAlignment="Center"
                            Content="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type local:TitleBarControl}}, Path=MyContent}"
                            FontSize="20"
                            FontWeight="Bold"
                            Foreground="White" />
                    </Border>
                </Border>
            </Canvas>
        </DockPanel>
    </Border>
</UserControl>

2.后台实现

/// <summary>
/// TitleBarControl.xaml 的交互逻辑
/// </summary>
public partial class TitleBarControl : UserControl
{
    //定义依赖项属性
    public static readonly DependencyProperty BackgroundBrushProperty =
        DependencyProperty.Register("MyBackground", typeof(string), typeof(UserControl), new PropertyMetadata(""));
    public static readonly DependencyProperty WidthUserControlProperty =
       DependencyProperty.Register("MyWidth", typeof(string), typeof(UserControl), new PropertyMetadata(""));
    public static readonly DependencyProperty HeightUserControlProperty =
         DependencyProperty.Register("MyHeight", typeof(string), typeof(UserControl), new PropertyMetadata(""));
    public static readonly DependencyProperty ContentUserControlProperty =
       DependencyProperty.Register("MyContent", typeof(string), typeof(UserControl), new PropertyMetadata(""));

    private string MyBackground
    {
        get { return (string)GetValue(BackgroundBrushProperty); }
        set { SetValue(BackgroundBrushProperty, value); }
    }

    public string MyWidth
    {
        get { return (string)GetValue(WidthUserControlProperty); }
        set { SetValue(WidthUserControlProperty, value); }
    }

    private int MyHeight
    {
        get { return (int)GetValue(HeightUserControlProperty); }
        set { SetValue(HeightUserControlProperty, value); }
    }

    public string MyContent
    {
        get { return (string)GetValue(ContentUserControlProperty); }
        set { SetValue(ContentUserControlProperty, value); }
    }

    public TitleBarControl()
    {
        InitializeComponent();
    }
}

3.实现效果