WPF中為窗體設置背景圖片

在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">

    < Grid x:Name= "LayoutRoot"  Loaded= "LayoutRoot_Loaded">
        < Grid.ColumnDefinitions>
            < ColumnDefinition Width= "120.012" />
            < ColumnDefinition Width= "209.988" />
            < ColumnDefinition Width= "81" />
        < /Grid.ColumnDefinitions>
        < Grid.RowDefinitions>
            < RowDefinition Height= "72.899" />
            < RowDefinition Height= "30.101" />
            < RowDefinition Height= "43" />
            < RowDefinition Height= "43" />
            < RowDefinition Height= "80" />
        < /Grid.RowDefinitions>
        < Label HorizontalAlignment= "Left"  Content= "用戶名"  Margin= "0,8"  
Grid.Column= "1"  Grid.Row= "2"  Width= "60"  FontSize= "16"  Foreground= "#FFE2E4EB" />
        < Label HorizontalAlignment= "Left"  Margin= "0,4,0,12"  Content= "密  碼"  
Grid.Column= "1"  Grid.Row= "3"  FontSize= "16"  Width= "64"  Foreground= "#FFEEF0F5" />
        < TextBox x: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>
                < LinearGradientBrush EndPoint= "0,20"  StartPoint= "0,0"  
MappingMode= "Absolute">
                    < GradientStop Color= "#FFABADB3"  Offset= "0.05" />
                    < GradientStop Color= "#FFE2E3EA"  Offset= "0.07" />
                    < GradientStop Color= "#FFBCDBF9"  Offset= "1" />
                < /LinearGradientBrush>
            < /TextBox.BorderBrush>
        < /TextBox>
        < PasswordBox x: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>
                < LinearGradientBrush EndPoint= "0,20"  StartPoint= "0,0"  
MappingMode= "Absolute">
                    < GradientStop Color= "#FFABADB3"  Offset= "0.05" />
                    < GradientStop Color= "#FFE2E3EA"  Offset= "0.07" />
                    < GradientStop Color= "#FFC1DBF5"  Offset= "1" />
                < /LinearGradientBrush>
            < /PasswordBox.BorderBrush>
        < /PasswordBox>
        < Button x: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= "{DynamicResource ConfirmCancelButtonStyle}"  />
        < Button x: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= "{DynamicResource ConfirmCancelButtonStyle}" />
    < /Grid>
< /Window>

 

　　注意一下這幾個屬性的設置：WindowStartupLocation="CenterScreen" AllowsTransparency="True" WindowStyle="None"。兩個Button的樣式代碼我就不貼了，下面我們假如有下面這么一張圖片(Login.png)，如何成為背景呢?

　　

 

　　首先把這張圖放在工程中

　　

 

　　接下來我們就要把這張圖加載到窗體上，先貼代碼吧，代碼其實也就幾句啦

public LoginView()
{
     this.InitializeComponent();
     txtusername.Focus(); //聚焦在用戶名輸入框中
     // 在此點之下插入創建對象所需的代碼。
    ImageBrush b =  new ImageBrush();
     b.ImageSource =  new BitmapImage( new Uri( "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