摘要：
在WPF应用程式中，我们往往想为一个窗体设置一个中意的背景图，而不是单独的为这个Background设置成某种颜色或渐变颜色的背景。在WPF利用ExpressionBlend工具如何达到这种效果呢?
在WPF应用程式中，我们往往想为一个窗体设置一个中意的背景图，而不是单独的为这个Background设置成某种颜色或渐变颜色的背景。 在WPF 利用Expression Blend工具如何达到这种效果呢?比如我们想做一个登陆窗体界面，界面效果如下图所示： 下面我就大概说下过程，首页建立一个工程为WpfLoginView,并在Expression Blend 下设
在WPF应用程式中，我们往往想为一个窗体设置一个中意的背景图，而不是单独的为这个Background设置成某种颜色或渐变颜色的背景。
在WPF 利用Expression Blend工具如何达到这种效果呢?比如我们想做一个登陆窗体界面，界面效果如下图所示：
下面我就大概说下过程，首页建立一个工程为WpfLoginView,并在Expression Blend 下设置一个如下图的界面
xaml代码如下：
<Window
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"
x:Class="WpfLoginView.LoginView"
x:Name="Window"
Title="LoginView"mc:Ignorable="d"KeyDown="Window_KeyDown"
WindowStartupLocation="CenterScreen"SizeToContent="WidthAndHeight"
AllowsTransparency="True"WindowStyle="None"Foreground="#FF9DC2EF">
<Gridx:Name="LayoutRoot"Loaded="LayoutRoot_Loaded">
<Grid.ColumnDefinitions>
<ColumnDefinitionWidth="120.012"/>
<ColumnDefinitionWidth="209.988"/>
<ColumnDefinitionWidth="81"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinitionHeight="72.899"/>
<RowDefinitionHeight="30.101"/>
<RowDefinitionHeight="43"/>
<RowDefinitionHeight="43"/>
<RowDefinitionHeight="80"/>
</Grid.RowDefinitions>
<LabelHorizontalAlignment="Left"Content="用户名"Margin="0,8"
Grid.Column="1"Grid.Row="2"Width="60"FontSize="16"Foreground="#FFE2E4EB"/>
<LabelHorizontalAlignment="Left"Margin="0,4,0,12"Content="密码"
Grid.Column="1"Grid.Row="3"FontSize="16"Width="64"Foreground="#FFEEF0F5"/>
<TextBoxx:Name="txtusername"TextWrapping="Wrap"Margin="0,8,8,10"
Grid.Column="1"Grid.Row="2"BorderThickness="2"HorizontalAlignment="Right"
Width="137.988"d:LayoutOverrides="GridBox">
<TextBox.BorderBrush>
<LinearGradientBrushEndPoint="0,20"StartPoint="0,0"
MappingMode="Absolute">
<GradientStopColor="#FFABADB3"Offset="0.05"/>
<GradientStopColor="#FFE2E3EA"Offset="0.07"/>
<GradientStopColor="#FFBCDBF9"Offset="1"/>
</LinearGradientBrush>
</TextBox.BorderBrush>
</TextBox>
<PasswordBoxx:Name="txtpassword"Margin="0,6,8,11"
Grid.Column="1"Grid.Row="3"BorderThickness="2"HorizontalAlignment="Right"
Width="137.988"d:LayoutOverrides="GridBox">
<PasswordBox.BorderBrush>
<LinearGradientBrushEndPoint="0,20"StartPoint="0,0"
MappingMode="Absolute">
<GradientStopColor="#FFABADB3"Offset="0.05"/>
<GradientStopColor="#FFE2E3EA"Offset="0.07"/>
<GradientStopColor="#FFC1DBF5"Offset="1"/>
</LinearGradientBrush>
</PasswordBox.BorderBrush>
</PasswordBox>
<Buttonx:Name="LoginConfirmButton"Content="登陆"Grid.Column="1"
Grid.Row="4"Click="LoginConfirmButton_Click"FontSize="16"VerticalAlignment="Top"
Height="24.687"Margin="64,8,91.988,0"Style="{DynamicResourceConfirmCancelButtonStyle}"/>
<Buttonx:Name="LoginCancelButton"Margin="144.988,8,0,0"Content="取消"
HorizontalAlignment="Left"Width="57"Grid.Column="1"Grid.Row="4"
Click="LoginCancelButton_Click"FontSize="16"VerticalAlignment="Top"
Height="24.687"Style="{DynamicResourceConfirmCancelButtonStyle}"/>
</Grid>
</Window>
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"
x:Class="WpfLoginView.LoginView"
x:Name="Window"
Title="LoginView"mc:Ignorable="d"KeyDown="Window_KeyDown"
WindowStartupLocation="CenterScreen"SizeToContent="WidthAndHeight"
AllowsTransparency="True"WindowStyle="None"Foreground="#FF9DC2EF">
<Gridx:Name="LayoutRoot"Loaded="LayoutRoot_Loaded">
<Grid.ColumnDefinitions>
<ColumnDefinitionWidth="120.012"/>
<ColumnDefinitionWidth="209.988"/>
<ColumnDefinitionWidth="81"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinitionHeight="72.899"/>
<RowDefinitionHeight="30.101"/>
<RowDefinitionHeight="43"/>
<RowDefinitionHeight="43"/>
<RowDefinitionHeight="80"/>
</Grid.RowDefinitions>
<LabelHorizontalAlignment="Left"Content="用户名"Margin="0,8"
Grid.Column="1"Grid.Row="2"Width="60"FontSize="16"Foreground="#FFE2E4EB"/>
<LabelHorizontalAlignment="Left"Margin="0,4,0,12"Content="密码"
Grid.Column="1"Grid.Row="3"FontSize="16"Width="64"Foreground="#FFEEF0F5"/>
<TextBoxx:Name="txtusername"TextWrapping="Wrap"Margin="0,8,8,10"
Grid.Column="1"Grid.Row="2"BorderThickness="2"HorizontalAlignment="Right"
Width="137.988"d:LayoutOverrides="GridBox">
<TextBox.BorderBrush>
<LinearGradientBrushEndPoint="0,20"StartPoint="0,0"
MappingMode="Absolute">
<GradientStopColor="#FFABADB3"Offset="0.05"/>
<GradientStopColor="#FFE2E3EA"Offset="0.07"/>
<GradientStopColor="#FFBCDBF9"Offset="1"/>
</LinearGradientBrush>
</TextBox.BorderBrush>
</TextBox>
<PasswordBoxx:Name="txtpassword"Margin="0,6,8,11"
Grid.Column="1"Grid.Row="3"BorderThickness="2"HorizontalAlignment="Right"
Width="137.988"d:LayoutOverrides="GridBox">
<PasswordBox.BorderBrush>
<LinearGradientBrushEndPoint="0,20"StartPoint="0,0"
MappingMode="Absolute">
<GradientStopColor="#FFABADB3"Offset="0.05"/>
<GradientStopColor="#FFE2E3EA"Offset="0.07"/>
<GradientStopColor="#FFC1DBF5"Offset="1"/>
</LinearGradientBrush>
</PasswordBox.BorderBrush>
</PasswordBox>
<Buttonx:Name="LoginConfirmButton"Content="登陆"Grid.Column="1"
Grid.Row="4"Click="LoginConfirmButton_Click"FontSize="16"VerticalAlignment="Top"
Height="24.687"Margin="64,8,91.988,0"Style="{DynamicResourceConfirmCancelButtonStyle}"/>
<Buttonx:Name="LoginCancelButton"Margin="144.988,8,0,0"Content="取消"
HorizontalAlignment="Left"Width="57"Grid.Column="1"Grid.Row="4"
Click="LoginCancelButton_Click"FontSize="16"VerticalAlignment="Top"
Height="24.687"Style="{DynamicResourceConfirmCancelButtonStyle}"/>
</Grid>
</Window>
注意一下这几个属性的设置：WindowStartupLocation="CenterScreen" AllowsTransparency="True" WindowStyle="None"。两个Button的样式代码我就不贴了，下面我们假如有下面这么一张图片(Login.png)，如何成为背景呢?
首先把这张图放在工程中
接下来我们就要把这张图加载到窗体上，先贴代码吧，代码其实也就几句啦
publicLoginView()
{
this.InitializeComponent();
txtusername.Focus();//聚焦在用户名输入框中
//在此点之下插入创建对象所需的代码。
ImageBrushb=newImageBrush();
b.ImageSource=newBitmapImage(newUri("pack://application:,,,/Login.png"));
b.Stretch=Stretch.Fill;
this.Background=b;
}
{
this.InitializeComponent();
txtusername.Focus();//聚焦在用户名输入框中
//在此点之下插入创建对象所需的代码。
ImageBrushb=newImageBrush();
b.ImageSource=newBitmapImage(newUri("pack://application:,,,/Login.png"));
b.Stretch=Stretch.Fill;
this.Background=b;
}
直接在构造函数中输入以上代码就Ok了，有一点我想说的是，我们是把这图片作为一种资源运用到上面去，说白了就是一种Background资源，
应用的是像设置各种颜色似的资源，所以我们创建的是ImageBrush对象，还不是用Image对象。大概到这就完成了。瞎弄了下，不好的方面请见谅....
本文来自Chicano的博客，原文地址:http://www.cnblogs.com/chicano/archive/2011/06/21/2086151.html