WPF之自定义"消息框式"的窗体

原文 http://www.cnblogs.com/ListenFly/archive/2013/02/19/2917744.html

<Window x:Class="mumu_nonRectangularwindow.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" SizeToContent="WidthAndHeight"
    MouseLeftButtonDown="Window_MouseLeftButtonDown">
    <!--窗口的形状都绘制在Canvas面板里面-->
    <Canvas Width="200" Height="200" >
        <!--窗口的轮廓-->
        <Path Stroke="DarkGray" StrokeThickness="2">
            <Path.Fill>
                <LinearGradientBrush StartPoint="0.2,0" EndPoint="0.8,1" >
                    <GradientStop Color="White"  Offset="0"></GradientStop>
                    <GradientStop Color="White"  Offset="0.45"></GradientStop>
                    <GradientStop Color="LightBlue" Offset="0.9"></GradientStop>
                    <GradientStop Color="Gray" Offset="1"></GradientStop>
                </LinearGradientBrush>
            </Path.Fill>
            <Path.Data>
                <PathGeometry>
                    <PathFigure StartPoint="40,20" IsClosed="True">
                        <LineSegment Point="160,20"></LineSegment>
                        <ArcSegment Point="180,40" Size="20,20" SweepDirection="Clockwise"></ArcSegment>
                        <LineSegment Point="180,80"></LineSegment>
                        <ArcSegment Point="160,100" Size="20,20" SweepDirection="Clockwise"></ArcSegment>
                        <LineSegment Point="90,100"></LineSegment>
                        <LineSegment Point="90,150"></LineSegment>
                        <LineSegment Point="60,100"></LineSegment>
                        <LineSegment Point="40,100"></LineSegment>
                        <ArcSegment Point="20,80" Size="20,20" SweepDirection="Clockwise"></ArcSegment>
                        <LineSegment Point="20,40"></LineSegment>
                        <ArcSegment Point="40,20" Size="20,20" SweepDirection="Clockwise"></ArcSegment>
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
        </Path>
        <!--“拖拽我！”的标签-->
        <Label Width="200" Height="120" FontSize="15" HorizontalContentAlignment="Center" VerticalContentAlignment="Center">Drag Me</Label>
        <!--关闭按钮-->
        <Button Canvas.Left="155" Canvas.Top="30" Click="Button_Click">
            <Button.Template>
                <ControlTemplate>
                    <Canvas>
                        <Rectangle Width="15" Height="15" Stroke="Black" RadiusX="3" RadiusY="3">
                            <Rectangle.Fill>
                                <SolidColorBrush x:Name="myAnimatedBrush" Color="Red" />
                            </Rectangle.Fill>
                        </Rectangle>
                        <Line X1="3" Y1="3" X2="12" Y2="12" Stroke="White" StrokeThickness="2"></Line>
                        <Line X1="12" Y1="3" X2="3" Y2="12" Stroke="White" StrokeThickness="2"></Line>
                    </Canvas>
                </ControlTemplate>
            </Button.Template>
        </Button>
    </Canvas>
</Window>

界面代码如上,后台代码如下:

 private void Window_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            this.DragMove();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            this.Close();
        }

后台代码比较简单,一个是自定义关闭按钮的事件,一个为鼠标左键按下事件(按下后可拖动窗体)。
效果图如下：

可是会发现,可预期的效果有点不一样,因为预期的是自定义的窗体,而不是依赖于窗体的自定义图形,所以还需要如下的设置

Background="Transparent" AllowsTransparency="True" WindowStyle="None"

设置窗体背景色为透明;同时设置AllowsTransparency为true，表示窗口的客户区支持透明色;同时删除最小化最大化和关闭按钮，所以设置WindowsStyle为None,最终的效果
如下：

可以拖动窗体,同时也可以按下红叉关闭窗体,最重要是他的确是一个不规则的自定义窗体.

其实自定义窗体的实现原理很简单,由一个Path和一个Button(通过模板绘制出红叉),Path绘制出了消息框的图形，Button实现了关闭功能。