這里我們將介紹Silverlight中ViewBox組件，這個組件的作用主要是做布局與視覺效果。并給出實例代碼和最終效果圖。

ViewBox組件的作用是拉伸或延展位于其中的組件，使之有更好的布局及視覺效果。本文將為大家介紹該組件的基本特性以及應(yīng)用實例。

組件所在命名空間：

System.Windows.Controls

組件常用屬性：

Child：獲取或設(shè)置一個ViewBox元素的單一子元素。

Stretch：獲取或設(shè)置拉伸模式以決定該組件中的內(nèi)容以怎樣的形式填充該組件的已有空間。

StretchDirection：獲取或設(shè)置該組件的拉伸方向以決定該組件中的內(nèi)容將以何種形式被延展。

實例：

詳細的說明在代碼注釋中給出。

MainPage.xaml文件代碼：

<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" xmlns:controlsToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit" x:Class="SilverlightClient.MainPage" 
d:DesignWidth="320" d:DesignHeight="240"> 
<Grid x:Name="LayoutRoot" Width="320" Height="240" Background="White"> 
<Slider x:Name="HSlider" Minimum="0" Maximum="100"  Height="24" Margin="79,0,91,42" VerticalAlignment="Bottom" Width="150"/> 
<Slider x:Name="VSlider" Minimum="0" Maximum="100" HorizontalAlignment="Right" Margin="0,24,57,66" Width="30" Orientation="Vertical" Height="150"/> 
<Border Margin="79,24,91,66" BorderBrush="Black" BorderThickness="1"> 
<Grid x:Name="theContainer" Background="AntiqueWhite"> 
<controlsToolkit:Viewbox x:Name="sampleViewBox" Margin="0,0,-2,-2"> 
<!--放入ViewBox中的按鈕對象--> 
<Button Width="101" Content="Button"/> 
</controlsToolkit:Viewbox> 
</Grid> 
</Border> 
<ComboBox x:Name="cbStretch" Height="21" HorizontalAlignment="Left" Margin="8,0,0,8" VerticalAlignment="Bottom" Width="139"/> 
<ComboBox x:Name="cbStretchDirection" Height="21" HorizontalAlignment="Right" Margin="0,0,8,8" VerticalAlignment="Bottom" Width="139"/> 
<TextBlock Height="16" HorizontalAlignment="Left" Margin="9,0,0,33" VerticalAlignment="Bottom" Width="66" Text="拉伸模式：" TextWrapping="Wrap"/> 
<TextBlock Height="16" HorizontalAlignment="Right" Margin="0,0,8,33" VerticalAlignment="Bottom" Width="56" Text="拉伸方向：" TextWrapping="Wrap"/> 
</Grid> 
</UserControl> 

MainPage.xaml.cs文件代碼：

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Net;  
using System.Windows;  
using System.Windows.Controls;  
using System.Windows.Documents;  
using System.Windows.Input;  
using System.Windows.Media;  
using System.Windows.Media.Animation;  
using System.Windows.Shapes;  
namespace SilverlightClient  
{  
//輔助類StretchHelper  
public class StretchHelper  
{  
public string StretchModeName { get; set; }  
public Stretch theStretchMode { get; set; }  
}  
//輔助類StretchDirectionHelper  
public class StretchDirectionHelper  
{  
public string StretchDirectionName { get; set; }  
public StretchDirection theStretchDirection { get; set; }  
}  
public partial class MainPage : UserControl  
{  
//定義cbStretch與cbStretchDirection的數(shù)據(jù)源  
List<StretchHelper> cbStretchList = new List<StretchHelper>();  
List<StretchDirectionHelper> cbStretchDirectionList = new List<StretchDirectionHelper>();  
public MainPage()  
{  
InitializeComponent();  
//注冊事件觸發(fā)  
this.Loaded += new RoutedEventHandler(MainPage_Loaded);  
this.cbStretch.SelectionChanged += new SelectionChangedEventHandler(cbStretch_SelectionChanged);  
this.cbStretchDirection.SelectionChanged += new SelectionChangedEventHandler(cbStretchDirection_SelectionChanged);  
this.HSlider.ValueChanged += new RoutedPropertyChangedEventHandler<double>(HSlider_ValueChanged);  
this.VSlider.ValueChanged += new RoutedPropertyChangedEventHandler<double>(VSlider_ValueChanged);  
}  
void VSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)  
{  
sampleViewBox.Height = theContainer.ActualHeight * VSlider.Value / 100.0;  
}  
void HSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)  
{  
sampleViewBox.Width = theContainer.ActualWidth * HSlider.Value / 100.0;  
}  
void cbStretchDirection_SelectionChanged(object sender, SelectionChangedEventArgs e)  
{  
if (cbStretchDirection.SelectedItem != null)  
{  
sampleViewBox.StretchDirection = (cbStretchDirection.SelectedItem as StretchDirectionHelper).theStretchDirection;  
}  
}  
void cbStretch_SelectionChanged(object sender, SelectionChangedEventArgs e)  
{  
if (cbStretch.SelectedItem != null)  
{  
sampleViewBox.Stretch = (cbStretch.SelectedItem as StretchHelper).theStretchMode;  
}  
}  
void MainPage_Loaded(object sender, RoutedEventArgs e)  
{  
//填充各ComboBox內(nèi)容  
cbStretchList.Add(new StretchHelper() { StretchModeName = "Fill", theStretchMode = Stretch.Fill });  
cbStretchList.Add(new StretchHelper() { StretchModeName = "None", theStretchMode = Stretch.None });  
cbStretchList.Add(new StretchHelper() { StretchModeName = "Uniform", theStretchMode = Stretch.Uniform });  
cbStretchList.Add(new StretchHelper() { StretchModeName = "UniformToFill", theStretchMode = Stretch.UniformToFill });  
cbStretch.ItemsSource = cbStretchList;  
cbStretch.DisplayMemberPath = "StretchModeName";  
cbStretchDirectionList.Add(new StretchDirectionHelper() { StretchDirectionName = "DownOnly", theStretchDirection = StretchDirection.DownOnly });  
cbStretchDirectionList.Add(new StretchDirectionHelper() { StretchDirectionName = "UpOnly", theStretchDirection = StretchDirection.UpOnly });  
cbStretchDirectionList.Add(new StretchDirectionHelper() { StretchDirectionName = "Both", theStretchDirection = StretchDirection.Both });  
cbStretchDirection.ItemsSource = cbStretchDirectionList;  
cbStretchDirection.DisplayMemberPath = "StretchDirectionName";  
}  
}  
} 

最終效果圖：

本文來自Kinglee的博客園文章《有關(guān)ViewBox組件的研究——Silverlight學習筆記[34]》

【編輯推薦】

1. Office 2010將使用Silverlight改善用戶體驗
2. 微軟.NET平臺主管談Silverlight企業(yè)級開發(fā)
3. Flash與Silverlight多領(lǐng)域?qū)崪y對比
4. 微軟宣稱Silverlight裝機量超過三億
5. 圖解Silverlight 3的7個新功能