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

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

組件所在命名空間：

System.Windows.Controls

組件常用屬性：

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

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

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

實例：

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

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的數據源  
List<StretchHelper> cbStretchList = new List<StretchHelper>();  
List<StretchDirectionHelper> cbStretchDirectionList = new List<StretchDirectionHelper>();  
public MainPage()  
{  
InitializeComponent();  
//注冊事件觸發  
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內容  
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的博客園文章《有關ViewBox組件的研究——Silverlight學習筆記[34]》

【編輯推薦】

1. Office 2010將使用Silverlight改善用戶體驗
2. 微軟.NET平臺主管談Silverlight企業級開發
3. Flash與Silverlight多領域實測對比
4. 微軟宣稱Silverlight裝機量超過三億
5. 圖解Silverlight 3的7個新功能