WPF换肤之一:创建圆角窗体

原文:WPF换肤之一:创建圆角窗体

    我们都期望自己的软件能够有一套看上去很吸引人眼球的外衣,使得别人看上去既专业又有美感。这个系列就带领着大家一步一步的讲解如何设计出一套自己的WPF的窗体皮肤,如果文中有任何错误或者不足,还请指出。

    WPF是微软大战略中的一个重心所在,学习WPF可谓是一举多得:首先,学习WPF可以让你了解SilverLight的80%;其次,XAML语言可以让你快速的入手WCF和WF;更甚者,就是WPF给予DX渲染核心,抛弃了传统WINFORM以GDI+为主的渲染方式,使得界面更新更流畅,彻底解决了闪烁问题,同时也使得代码和界面显示分离,这和以前WINFORM方式完全不同。

    那么,本节开始就以最简单的方式来介绍如何创建一个圆角的窗体。

简单介绍XAML

    首先,让我来说一下XAML,因为只有了解了它,我们才能够更加深入的来介绍如何创建圆角窗体。

    所谓的XAML就是一坨类似xml的可扩展应用程序的标记语言,它能够详细的描述用户界面元素,比如说TextBox,Button等等的信息,以便做到精确的设置或者定位。具体的大家还是参考一些其他的资料吧,反正记住XAML和HTML类似,都是描述界面元素的特定语言而已。

    在WINFORM中,我们自绘圆角窗体的时候,都是先把窗体置为FormBorderStyle为None的状态,即无窗体模式;然后我们会结合后台代码先绘制出窗体的区域,然后通过Win32函数里面的CreateRoundRectRgn()方法进行切割;最后通过WndProc(ref Message m)处理窗体界面消息即可。

创建圆角窗体

    在WPF中,创建圆角窗体相当简单,根本不需要那么多的步骤,下面看我的操作:

    首先,我们需要设置WPF的窗体样式为None,这个和Winform设计差不多,就是设置WindowStyle为None即可,这样当我们运行F5就可以看到一个无边框的窗体。

    其次,我们需要设置AllowTransParency为TrueBackGround为TransparentOpacityMask为White,这样设置才能保证当我们设置为圆角的时候,四个角能够透明显示,这样当我们F5运行的时候,将看不到任何窗体,因为已经透明了。

    最后,怎么添加圆角呢,这个很简单,直接利用Border元素即可,加入如下代码:

<Window x:Class="WpfApplication1.MsgWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="TestWindow" Height="391" Width="418" WindowStyle="None" AllowsTransparency="True" Background="Transparent" OpacityMask="White" ResizeMode="NoResize" PreviewMouseMove="ResetCursor" WindowStartupLocation="CenterScreen">
    <Grid Background="Transparent">
            <Border BorderThickness="5" BorderBrush="DarkGreen"  CornerRadius="10,10,10,10" MouseMove="DisplayResizeCursor" PreviewMouseDown="Resize" Name="top">
            <Grid>
                <ListBox Margin="16,51,18,62" Name="uniqueMessages" />
                <Label Height="28" HorizontalAlignment="Left" Margin="16,17,0,0" Name="label1" VerticalAlignment="Top" Width="120">Label</Label>
            </Grid>
            </Border>
    </Grid>
</Window>

    其中,BorderThickness用来表示Border的粗细程度,BorderBrush用来表示Border的颜色,CornerRadius表明四个角的弯曲度。

    效果如下:

 

    可以看到,整个窗体居然是透明的,圆角部分显示的很完美。控件放在了透明的窗体上,这样也就预示我们成功了一半。

    接下来,我们设置Border的Background,用以遮蔽窗体中无需透明的部分。

代码如下:

<Window x:Class="WpfApplication1.MsgWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="TestWindow" Height="391" Width="418" WindowStyle="None" AllowsTransparency="True" Background="Transparent" OpacityMask="White" ResizeMode="NoResize" PreviewMouseMove="ResetCursor" WindowStartupLocation="CenterScreen">
    <Grid Background="Transparent">
            <Border BorderThickness="5" BorderBrush="DarkGreen"  CornerRadius="10,10,10,10" MouseMove="DisplayResizeCursor" PreviewMouseDown="Resize" Name="top">
            <Border.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#eee"/>
                </LinearGradientBrush>
            </Border.Background>
            <Grid>
                <ListBox Margin="16,51,18,62" Name="uniqueMessages" />
                <Label Height="28" HorizontalAlignment="Left" Margin="16,17,0,0" Name="label1" VerticalAlignment="Top" Width="120">Label</Label>
            </Grid>
            </Border>
    </Grid>
</Window>

    其中,LinearGradientBrush用来绘制border区域的背景,以便遮蔽透明窗体部分。

    这样当我们再运行的时候,就可以看到效果了: 

 好了,这个窗体虽然完成了,但是如何进行拖拽而改变其大小呢?下节将继续讲解。

 

时间: 2024-12-11 04:42:54

WPF换肤之一:创建圆角窗体的相关文章

WPF换肤之二:可拉动的窗体

原文:WPF换肤之二:可拉动的窗体 让我们接着上一章: WPF换肤之一:创建圆角窗体 来继续. 在这一章,我主要是实现对圆角窗体的拖动,改变大小功能. 拖动自绘窗体的步骤 首先,通过上节的设计,我们知道了如何设计一个圆角窗体,通过XAML代码量,我们发现设置这个窗体是多么的简单.但是如何让窗体能够进行Resize呢? 在Winform时代,我们通过WndProc(ref Message m)处理窗体界面消息来实现,那么在WPF中是否也是如此呢? 其实在WPF中,虽说封装比较紧密,但是对于处理界面

WPF换肤之八:创建3D浏览效果

原文:WPF换肤之八:创建3D浏览效果 上节中,我们展示了WPF中的异步以及界面线程交互的方式,使得应用程序的显示更加的流畅.这节我们主要讲解如何设计一个具有3D浏览效果的天气信息浏览器. 效果显示 下面我们看截图: 是不是能够感受到一种与众不同的感觉.如果你能够感受到它的与众不同,这也是我本节所要达到的目标. 实现方式 上面的只是一个简单的3D图形,它的产生需要依赖于WPF中的MeshGeometry3D对象,这个对象按照微软官方的解释就是用于生成3D形状的三角形基元,它有三个比较重要的属性:

WPF换肤之四:界面设计和代码设计分离

原文:WPF换肤之四:界面设计和代码设计分离 说起WPF来,除了总所周知的图形处理核心的变化外,和Winform比起来,还有一个巨大的变革,那就是真正意义上做到了界面设计和代码设计的分离.这样可以让美工和程序分开进行,而不是糅合在一块,这样做的好处当然也是显而易见的:提高了开发效率. 原先的设计方式 在我们之前设计的代码中,每当添加一个新的窗体的时候,我总是会在这个新的窗体的XAML文件中加入如下的代码,以便使样式能够应用上去: View Code <Window x:Class="Wpf

WPF换肤之六:酷炫的时区浏览小精灵

原文:WPF换肤之六:酷炫的时区浏览小精灵 由于工作需要,经常要查看到不同地区的 当前时间,以前总是对照着时区表来进行加减运算,现在有了这个小工具以后,感觉省心了不少.下面是软件的截图: 效果图赏析   在界面上,有能够冉冉升起的太阳或者月亮,有缓慢飘动的浮云,有青葱翠绿的花叶, 当然,也有显目的时区显示.如果要是放在WinForm时代,要实现这样的界面,真的是繁琐和复杂,但是在WPF中,利用XAML控制前台界面,利用CodeBehind控制窗口拖动,日月变换等等逻辑,真的是简便而且效果强大.其

WPF换肤之七:异步

原文:WPF换肤之七:异步 在WinForm时代,相信大家都遇到过这种情形,如果在程序设计过程中遇到了耗时的操作,不使用异步会导致程序假死.当然,在WPF中,这种情况也是存在的,所以我们就需要寻找一种解决方法来让程序界面响应和耗时操作异步进行,那么上述假死的情况就不会发生了. 这一节就着重讲解异步以及线程和界面交互. 异步使用方式(APM模式) 在上节中,我们给一个普通的Window窗口做了换肤处理,呈现出了一个非常酷的时区浏览小工具.当然,这一节,我们还是以那个工具为主,为其增加天气预报功能,

WPF换肤设计原理浅析_C#教程

WPF换肤的设计原理,利用资源字典为每种皮肤资源添加不同的样式,在后台切换皮肤资源文件. 截图 上图中,第一张图采用规则样式,第二张图采用不规则样式,截图的时候略有瑕疵. 资源字典 规则样式资源Skin.RegularStyle.xaml <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microso

仿酷狗音乐播放器开发日志十七——换肤功能的实现一

转载请说明原出处,谢谢~~            好的软件一定要有好看的皮肤,我记得几年前的换肤流行把所有窗体的所有控件的外观样式改变,skin++和skinsharp就是那几 年流行的换肤库,使用简单,主要采用Hook与子类化技术来实现应用程序的自动换肤,属于第二代皮肤库.当时觉得那样的皮肤效 果很棒.效果如下:                           而这几年第三代界面技术DirectUI技术流行后,软件皮肤变得更随意和高效,现在的换肤功能一般就只换一个背景图片,QQ. 迅雷.酷

可以换肤的窗体

大家都知道大名鼎鼎的WINAMP播放器是支持"换肤"的,也就是说,我们可以动态的改变窗体和控件的背景图案,使窗体看起来十分漂亮,而且能够不断更换新的面孔.那我们能让自己的程序也实现这样的效果吗?答案是肯定的,下面我们就一起来看看用VB6做出的可以换肤的窗体. 程序包含一个主窗体和一个模块,为了使窗体上的控件也能以我们选择的图案作为背景,我们使用了Microsoft Forms2.0 Object Library的控件组,在默认状态下它不在控件面板中,我们可以在控件面板上点鼠标右键&qu

仿酷狗音乐播放器开发日志十八——换肤功能的实现二:改变控件和窗体透明度(附挂件类源码)

转载请说明原出处,谢谢~~          昨天把大致布局分析了一下,昨天晚上把布局写好实现了,今天把大致的功能完成了一下,现在的外观已经和原酷狗的换肤界面完全一样,其中的调整播放列表透明度和设置整个软件透明度的代码已经完成了,先把效果图贴一下,然后开发说开发过程.    开发步骤一:        布局的部分我就不说了,昨天已经分析了,只要用好素材,花点时间就能把界面效果做出来,其中"官方皮肤"和 "我的皮肤"调用CTabLayout可以实现两个界面的切换,如图