silverlight 之 – Blend 之 LinearGradientBrush (二)

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

关于再画一个的问题

1.肯定想到的就是拷贝;

》不能每次用都拷贝,很麻烦

》现在我们画的是矩形(Rectangle),下次可能是 Border,Grid,StackPanel

所以拷贝不行;

 

2.把这些颜色都记下来

》太麻烦,这也不行

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

正题:

1. 下面我们来介绍下画布界面:

截图04

看到右上角有三个标志,分别是: 设计模式,代码模式,拆分模式

2.进入代码模式看看我们之前的代码:

<UserControl
	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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	mc:Ignorable="d"
	x:Class="StyleTest.ColorCard"
	d:DesignWidth="640" d:DesignHeight="480">

	<Grid x:Name="LayoutRoot" Background="#FF6A6A6A">
		<Rectangle Stroke="Black" Height="43" VerticalAlignment="Top">
			<Rectangle.Fill>
				<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
					<GradientStop Color="#FF606060" Offset="0"/>
					<GradientStop Color="Black" Offset="1"/>
					<GradientStop Color="#FE333333" Offset="0.487"/>
					<GradientStop Color="#FE161515" Offset="0.574"/>
				</LinearGradientBrush>
			</Rectangle.Fill>
		</Rectangle>	
	</Grid>	
</UserControl>

下面我们要复用这些代码中关于颜色填充的部分;

3. 在项目上点击右键》添加新项》资源字典; 我把他命名为: Style.xaml

4. 打开Style.xaml,显示无法再设计视图中编辑,点击切换到代码模式;默认代码如下:

<ResourceDictionary
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
	<!-- 应该在此定义资源字典条目。-->
</ResourceDictionary>

5. 把第二步中的:

	<LinearGradientBrush   EndPoint="0.5,1" StartPoint="0.5,0">
					<GradientStop Color="#FF606060" Offset="0"/>
					<GradientStop Color="Black" Offset="1"/>
					<GradientStop Color="#FE333333" Offset="0.487"/>
					<GradientStop Color="#FE161515" Offset="0.574"/>
	</LinearGradientBrush>

 

 

》 拷贝到 Style.xaml 的 “<!-- 应该在此定义资源字典条目。—> ” 下面;

》 程序会提示错误

》 给他取个名字例如:  <LinearGradientBrush x:Key="AppleStyle1"  就好了;

 

这样我们就把这个填充样式加到字典里面了:

<ResourceDictionary
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
	<!-- 应该在此定义资源字典条目。-->
	
	<LinearGradientBrush x:Key="AppleStyle1" EndPoint="0.5,1" StartPoint="0.5,0">
					<GradientStop Color="#FF606060" Offset="0"/>
					<GradientStop Color="Black" Offset="1"/>
					<GradientStop Color="#FE333333" Offset="0.487"/>
					<GradientStop Color="#FE161515" Offset="0.574"/>
	</LinearGradientBrush>

	
</ResourceDictionary>

 

6. 回到ColorCard.xaml 页面;打开“库” 看到我们刚才的字典了!!!

截图05

 

我们用他来填充我们刚才定义的矩形, 并且再复制一个效果如下:

截图06

代码如下:

	<Grid x:Name="LayoutRoot" Background="#FF6A6A6A">
		<Rectangle Stroke="Black" Height="43" VerticalAlignment="Top" Fill="{StaticResource AppleStyle1}"/>
		<Rectangle Stroke="Black" Height="43" VerticalAlignment="Bottom" Fill="{StaticResource AppleStyle1}"/>	
	</Grid>	

看看这代码是不是简洁多了!

说到这里你肯定知道:

》 以后画别的东西,就直接到”库“去选择就可以填充这个样式了;(实现了复用)

》 修改的时候只有修改 Style.xaml 里面的代码,这边就也更新了;(方便更新调整)

 

那么今天的主角 LinearGradientBrush 就和大家见面了!

 

silverlight 之 – Blend 一切源于Brush(一)

silverlight 之 – Blend 之 LinearGradientBrush (二)

silverlight 之 – Blend 之 Style for Button (三)

silverlight 之 – Blend 之图形按钮(四)