使用 Blend 来创建一个不规则 Border

来源:互联网 发布:java getinstance 编辑:程序博客网 时间:2024/05/01 08:00

假设我们有一个空白项,对应的Xaml文件为:

<UserControlxmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"x:Class="SilverlightApplication4.MainPage"Width="640" Height="480"><Grid x:Name="LayoutRoot" Background="White"/>UserControl>

我们在其中增加一个 Border 控件,并用 钢笔或者铅笔画一个不规则图形。

image

这时候,产生的Xaml 文件类似如下:

<UserControlxmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"x:Class="SilverlightApplication4.MainPage"Width="640" Height="480"><Grid x:Name="LayoutRoot" Background="White"><Border Height="115" Margin="103,47,102,0" VerticalAlignment="Top" BorderBrush="Black" BorderThickness="1"><Path Fill="White" Stretch="Fill" Stroke="Black" Margin="73.5,35.598,149.5,12.5" UseLayoutRounding="False" 
Data="M83,46 C228,18 284,65 284,65 L217,100.99988 L177,79.999947 L141,93.999901 L75,76.999962 z"/>Border>Grid>UserControl>

然后我们在“对象和时间线中”选择我们要用的Path 对象,如下图:

image

点击 路径 --》 生成剪切路径

在出现的 生成剪切路径选择窗口中,我们选择需要使用这个路径的对象,这里我们选择“Border” 对象

image

点击确定后,我们就可以获得一个不规则的 Border, 这时候的Xaml 文件为:

<UserControlxmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"x:Class="SilverlightApplication4.MainPage"Width="640" Height="480"><Grid x:Name="LayoutRoot" Background="White"><Border Height="115" Margin="103,47,102,0" VerticalAlignment="Top" BorderBrush="Black" BorderThickness="1" 
Clip="M83,45.999935 C228,17.999838 284,65 284,65 L217,101 L177,80 L141,94 L75,77 z"/>Grid>UserControl>

适当调整颜色后,看到的Border 就是如下图:

image

其他控件我们想要设计成不规则方式, 在Blend 中的设计步骤类似。

参考资料:

请教怎样用path做一个不规则的border
http://topic.csdn.net/u/20091216/15/9585d9b5-5fb9-4fe0-bb24-5cd9f5a1b46c.html