绘图-不规则窗体

WPF实现不规则窗体,方法很多很多多....

本文总结DebugLZQ认为简洁高效的几种方法



实现WPF不规则窗体的几种常用的方法如下:

  1.使用Blend等工具绘制一想要的窗体。这个可以参考xiaowei0705的这篇博文:WPF制作不规则的窗体 。

  2.给window的Clip属性赋Path值。这个可以参考DebugLZQ前面的博文:WPF Effect Clip以及Transform 

  3.使用透明背景的PNG图像。

  4.为Window主容器添加Border

  5.使用Blender制作想要的Path的说明。

  6.其他

本文将要讲述的第一种方法,可以说一点技术含量都没有,基本不用动手编写代码。前提是你得有合适的透明背景的PNG图像。

我们假设你已经完成了PNG图像的制作(当然为了演示的话,down一个也行),那么这个不规则窗体实现如下:

<Window x:Class="WPFSharpWindow.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="412" Width="528"
        AllowsTransparency="True" WindowStyle="None" OpacityMask="White" Background="Transparent">
    <Grid MouseLeftButtonDown="Grid_MouseLeftButtonDown">
        <Image Stretch="Fill" Source="/WPFSharpWindow;component/cow.png" />
    </Grid>
</Window>

解释下这个xaml需要注意的属性设置:

  allowstransparency="True" - 允许透明

  background="Transparent" - 设置背景透明

  windowstyle="None" - 去掉边框

  opacitymask="White" - 设置白色透明

为Gird订阅的MouseLeftButtonDown路由事件,是为了实现窗体的拖动。事件处理如下:

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

实现效果如下:

效果不清楚?再来两张

题外话:越来越发现发到博客园首页的博文质量是越来越差了,很多文章根本没有一点价值,纯垃圾~

真心建议发到首页的博文,希望博文的作者能够花点时间,分享有价值的东西,不要哗众取宠~试想:你发到首页的博文你自己以后都不愿意去看的,何况别人?也希望博客园团队加强监管力度!

我们写博文的目的是为了分享,分享本来就是一种积累,写博文的过程可以看做是一种沉淀,所以这是一个双赢的事。个人愚见,欢迎批评指正~

“只要人人都献出一点爱,世界将变成美好的人间...”

-------------

需要运行时更新窗体样式怎么办?即更新图片即可:

private void button1_Click(object sender, RoutedEventArgs e)
{
    var uriSource = new Uri(@"/WPFSharpWindow;component/HotPot.png", UriKind.Relative);
    imgBackground.Source=new BitmapImage(uriSource);
}



4. 为Window主容器添加Border

和前面DebugLZQ博文使用Clip属性类似,我们可以为Window的顶层容器添加Border来实现。

这种方法,对Border的编写有要求,而对其使用的Image、容器内容等没有要求。

下面给出一个例子

MainWindow.xaml如下:

<Window x:Class="WPFWindowAnimation.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525"
         AllowsTransparency="True" WindowStyle="None" Background="Transparent"
        MouseLeftButtonDown="Window_MouseLeftButtonDown">
    <Border CornerRadius="0,30,40,50" Width="Auto" Height="Auto" BorderThickness="1" BorderBrush="Green">
        <Border.Background>
            <ImageBrush ImageSource="Tulips.jpg"/>
        </Border.Background>
          <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition />
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <TextBlock  Grid.Row="0" Margin="5" Text="Title" />
            <Grid Grid.Row="1"  />
            <TextBlock Margin="1,10,1,1" Grid.Row="2" Text="Footer" Padding="5" HorizontalAlignment="Center"/>
          </Grid>
    </Border>
</Window>

效果如下:

当然,如果我只是期待的是一个颜色背景的话,可以直接设置Border的Fill属性来获得。

tip1:关于窗口的DragMove:只要在MouseLeftButtonDown事件中调用this.DragMove();

tip2:关于窗口的Resize:通过设置Window的属性:如ResizeMode="CanResizeWithGrip"来实现。

tip3:关于窗口的关闭、最大化、最小化等:通过在容器中添加Button,为其添加合适的样式,通过Button的Click事件来实现。

     this.Close();
            this.WindowState = System.Windows.WindowState.Maximized;
            this.WindowState = System.Windows.WindowState.Minimized;



5.方法1,2的实现关键---Path的制作

这个方法1,2中都没有讲述Path是如何制作的,因此这里有必要再说明下:

制作Path一般有2中方法:

1.使用所谓的"路径描述语言",即Path的包含有M、L、C、Z等Data属性值的书写方式。这种方法的优点是Path描述干净清爽;缺点是实现方法相对复杂一点。

2.使用Blender。缺点是Path描述复杂;但优点是使用方便,能“拖拽”出各种Path。

下面我们使用Blender来制作1个Path。

我们向Window上添加1个Rectangle和1个Triangle.

拖动调整下,如下:

注意此时,生成的xaml并不是Path。

把这两个Element组合起来,如下:

则效果如下:

此时,生成的xaml已经是Path了。

------------------

也可先生成Path

然后把生成的2个Path组合起来,效果和上面相同。

当然也可以选中页面元素右击,....,这些都是Blend的具体操作了,不是本文的主要说明对象~

----------------------

然后就可以使用这个Path,来方便的制作Path型的窗体了。如下:

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WPFNavigationPanelPro"
        xmlns:ec="http://schemas.microsoft.com/expression/2010/controls" xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing" x:Class="WPFNavigationPanelPro.MainWindow"
        Title="MainWindow" Height="444" Width="559" WindowStyle="None" AllowsTransparency="True" Background="Transparent">
    <Grid>
        <Path Data="M137.333,1 L167.333,31.000003 277.333,31.000003 277.333,177.33299 1,177.33299 1,31.000003 107.333,31.000003 z" Fill="Green" Margin="102.667,16,106,84.117" Stretch="Fill" Stroke="Transparent" StrokeThickness="2"/>
        <WrapPanel Margin="115,94,119,116">
            <Rectangle Fill="Red" Width="60" Height="40" Margin="10"/>
            <Rectangle Fill="Red" Width="60" Height="40" Margin="10"/>
            <Rectangle Fill="Red" Width="60" Height="40" Margin="10"/>
            <Rectangle Fill="Red" Width="60" Height="40" Margin="10"/>
            <Rectangle Fill="Red" Width="60" Height="40" Margin="10"/>
        </WrapPanel>

    </Grid>
</Window>

运行效果如下:

(说明:之所以做成Path是因为:简洁一点。完全可以拖出来想要的界面直接使用~)

又如:

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="WindowTest.MainWindow"
    x:Name="Window"
    Title="MainWindow"
    Width="640" Height="552" WindowStyle="None" AllowsTransparency="True" Background="Transparent">
    <Grid x:Name="LayoutRoot">
        <Path Data="M144,0.5 C220.77621,0.5 283.46991,22.348854 287.31326,49.824082 L287.38416,50.5 287.5,50.5 287.5,52.499997 287.5,232.5 C287.5,251.27768 223.25287,266.5 144,266.5 64.747139,266.5 0.5,251.27768 0.5,232.5 L0.5,52.499997 0.5,50.5 0.61584973,50.5 0.6867221,49.824082 C4.5301003,22.348854 67.223793,0.5 144,0.5 z"  Stretch="Fill" Stroke="Black" Opacity="0.5" Margin="0,0,0,1">
            <Path.Fill>
                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                    <GradientStop Offset="0" Color="Violet"/>
                    <GradientStop Offset="1" Color="LightGreen"/>
                </LinearGradientBrush>
            </Path.Fill>
        </Path>
        <Border BorderBrush="Pink" BorderThickness="1" Margin="0,102,0,69" Opacity="0.3">
            <Grid Margin="8,106.5,8,72.5" />
        </Border>
    </Grid>
</Window>

效果如下:

通过Blend可以制作出你能想到的各种所谓不规则窗体~

6.其他

小结:在各种方法实现WPF不规则窗体的方法种,Blender来制作Path这种方法最灵活强大~

时间: 2024-10-01 05:00:22

绘图-不规则窗体的相关文章

【转】Windows 中不规则窗体的编程实现

一.序言 在绝大多数的Windows应用程序中,其窗体都是使用的正规正矩的矩形窗体,例如我们常用的,“记事本”,“扫雷”,等等.矩形窗体,具有编程实现简单,风格简洁的优点,所以在普通文档应用程序和简单小游戏中使用足矣.但在某些娱乐游戏程序中使用就略显呆板些了,这时若用不规则窗体替代原先的矩形窗体,将会使这类程序更添情趣.典型的例子有windows 自代的Media Player,新版本的Media Player有个控制面板的选项,选中这些面板,播放器就以选中的面板形状出现,这时的播放器比以前版本

VC++玩转炫酷悬浮窗3---GDI+完美实现不规则窗体

?? 目标上一篇不规则窗体虽然实现了,但是图形有锯齿,给人以上世纪的老古董感觉,跟酷炫不搭边.今天就要用高级一些的技术做出完美的光滑的无锯齿的不规则窗体.计划&方案PNG图片本身就是带透明效果的,把此图片作为窗体,用GDI+将其实现.那么什么是GDI+呢?先要说一说GDI, Graphics Devices Interface,图形设备接口,负责系统与绘图程序之间的信息交换,处理所有Windows图形程序的输出.而GDI+是其增强版,xp时代是其一个子系统,负责在显示屏幕和打印设备输出信息.程序

C#创建不规则窗体的3种方式详解

现在,C#创建不规则窗体不是一件难事,下面总结一下: 一.自定义窗体 一般为规则的图形,如圆.椭圆等. 做法:重写Form1_Paint事件(Form1是窗体的名字),最简单的一种情况如下: System.Drawing.Drawing2D.GraphicsPath shape = new System.Drawing.Drawing2D.GraphicsPath(); shape.AddEllipse(0,0,this.Height, this.Width); this.Region = ne

GTK不规则窗体

GTK不规则窗体示例 GdkBitmap *window_shape_bitmap = gdk_pixmap_new(NULL, m_ROI.width + 2, m_ROI.height + 2, 1); GdkGC *gc = gdk_gc_new(window_shape_bitmap); GdkColormap *colorMap = gdk_colormap_get_system(); GdkColor black, white; gdk_color_black(colorMap, &

详解使用C#制作不规则窗体的方法

本文转自翔宇网http://www.biye5u.com/article/Csharp/winform/2010/2593.html 以前想制作不规则窗体,大多使用API函数来实现,在C#中,也可以不使用API函数照样能制作出漂亮的不规则窗体,下面就介绍一下相关方法. 1.首先准备一张BMP格式的图片 图片的形式随意,但注意图片的背景最好设置成C#中提供的一些色系,如白色(#FFFFFF\white).黑色(#000000\black).黄色(#FFFF00\yellow).蓝色(#0000FF

2017-4-24 winform窗体基础属性 ico图片生成 不规则窗体的移动 恶搞小程序

1.客户端应用程序:C/S 特点:操作用户电脑上的文件 2.窗体分类: 记事本类型   ---  窗体可以随便拖动大小 计算器类型    ----  窗体固定大小,无最大化 无变宽类型  ---  杀毒软件 不规则类型   ---  桌面加速小球 置顶类型   ---  打开后不被其他窗体所掩盖,比如qq 3.窗体基础属性 布局: AutoScroll   --   控件超出窗体会自动出现滚动条 location --- 窗体距离桌面左上角的距离,需要配合StartPosition中的Manua

C# 移动不规则窗体

说明: 解决自定义不规则窗体后,不能拖动问题. 先看效果图: 代码如下: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using System.Drawing.Drawing2

WPF中不规则窗体与WindowsFormsHost控件的兼容问题完美解决方案

首先先得瑟一下,有关WPF中不规则窗体与WindowsFormsHost控件不兼容的问题,网上给出的解决方案不能满足所有的情况,是有特定条件的,比如  WPF中不规则窗体与WebBrowser控件的兼容问题解决办法.该网友的解决办法也是别出心裁的,为什么这样说呢,你下载了他的程序认真读一下就便知道,他的webBrowser控件的是单独放在一个Form中,让这个Form与WPF中的一个Bord控件进行关联,进行同步移动,但是在移动的时候会出现闪烁,并且还会出现运动的白点,用户体验肯定不好. OK,

[小结][N种方法]实现WPF不规则窗体

原文:[小结][N种方法]实现WPF不规则窗体 WPF实现不规则窗体,方法很多很多多.... 本文总结DebugLZQ认为简洁高效的几种方法 实现WPF不规则窗体的几种常用的方法如下: 1.使用Blend等工具绘制一想要的窗体.这个可以参考xiaowei0705的这篇博文:WPF制作不规则的窗体 . 2.给window的Clip属性赋Path值.这个可以参考DebugLZQ前面的博文:WPF Effect Clip以及Transform . 3.使用透明背景的PNG图像. 4.为Window主容