WPF之路——ViewBox组件

http://msdn.microsoft.com/zh-cn/library/system.windows.controls.viewbox.aspx

这里我们将介绍Silverlight中ViewBox组件，这个组件的作用主要是做布局与视觉效果。并给出实例代码和最终效果图。

ViewBox组件的作用是拉伸或延展位于其中的组件，使之有更好的布局及视觉效果。本文将为大家介绍该组件的基本特性以及应用实例。

组件所在命名空间：

System.Windows.Controls

组件常用属性：

Child：获取或设置一个ViewBox元素的单一子元素。

Stretch：获取或设置拉伸模式以决定该组件中的内容以怎样的形式填充该组件的已有空间。

StretchDirection：获取或设置该组件的拉伸方向以决定该组件中的内容将以何种形式被延展。

实例：

详细的说明在代码注释中给出。

MainPage.xaml文件代码：

[html] view plain copy

1. <Window x:Class="WpfApplication3.MainWindow"  
2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
4.        
5.         Title="MainWindow" Height="350" Width="525">  
6.     <Grid x:Name="LayoutRoot" Width="320" Height="240" Background="White">  
7.         <Slider x:Name="HSlider" Minimum="0" Maximum="100"  Height="24" Margin="79,0,91,42" VerticalAlignment="Bottom" Width="150"/>  
8.         <Slider x:Name="VSlider" Minimum="0" Maximum="100" HorizontalAlignment="Right" Margin="0,24,57,66" Width="30" Orientation="Vertical" Height="150"/>  
9.         <Border Margin="79,24,91,66" BorderBrush="Black" BorderThickness="1">  
10.             <Grid x:Name="theContainer" Background="AntiqueWhite">  
11.                 <Viewbox x:Name="sampleViewBox" Margin="0,0,-2,-2">  
12.                     <!--放入ViewBox中的按钮对象-->  
13.                     <Button Width="101" Content="Button"/>  
14.                 </Viewbox>  
15.             </Grid>  
16.         </Border>  
17.         <ComboBox x:Name="cbStretch" Height="21" HorizontalAlignment="Left" Margin="8,0,0,8" VerticalAlignment="Bottom" Width="139"/>  
18.         <ComboBox x:Name="cbStretchDirection" Height="21" HorizontalAlignment="Right" Margin="0,0,8,8" VerticalAlignment="Bottom" Width="139"/>  
19.         <TextBlock Height="16" HorizontalAlignment="Left" Margin="9,0,0,33" VerticalAlignment="Bottom" Width="66" Text="拉伸模式：" TextWrapping="Wrap"/>  
20.         <TextBlock Height="16" HorizontalAlignment="Right" Margin="0,0,8,33" VerticalAlignment="Bottom" Width="56" Text="拉伸方向：" TextWrapping="Wrap"/>  
21.     </Grid>  
22. </Window>  

MainPage.xaml.cs文件代码：

[csharp] view plain copy

1. using System;  
2. using System.Collections.Generic;  
3. using System.Linq;  
4. using System.Text;  
5. using System.Threading.Tasks;  
6. using System.Windows;  
7. using System.Windows.Controls;  
8. using System.Windows.Data;  
9. using System.Windows.Documents;  
10. using System.Windows.Input;  
11. using System.Windows.Media;  
12. using System.Windows.Media.Imaging;  
13. using System.Windows.Navigation;  
14. using System.Windows.Shapes;  
15.   
16. namespace WpfApplication3  
17. {  
18.     //辅助类StretchHelper    
19.     public class StretchHelper  
20.     {  
21.         public string StretchModeName { get; set; }  
22.         public Stretch theStretchMode { get; set; }  
23.     }  
24.     //辅助类StretchDirectionHelper    
25.     public class StretchDirectionHelper  
26.     {  
27.         public string StretchDirectionName { get; set; }  
28.         public StretchDirection theStretchDirection { get; set; }  
29.     }    
30.   
31.     /// <summary>  
32.     /// MainWindow.xaml 的交互逻辑  
33.     /// </summary>  
34.     public partial class MainWindow : Window  
35.     {  
36.         //定义cbStretch与cbStretchDirection的数据源    
37.         List<StretchHelper> cbStretchList = new List<StretchHelper>();  
38.         List<StretchDirectionHelper> cbStretchDirectionList = new List<StretchDirectionHelper>();    
39.         
40.         public MainWindow()  
41.         {  
42.             InitializeComponent();  
43.             //注册事件触发    
44.             this.Loaded += new RoutedEventHandler(MainPage_Loaded);  
45.             this.cbStretch.SelectionChanged += new SelectionChangedEventHandler(cbStretch_SelectionChanged);  
46.             this.cbStretchDirection.SelectionChanged += new SelectionChangedEventHandler(cbStretchDirection_SelectionChanged);  
47.             this.HSlider.ValueChanged += new RoutedPropertyChangedEventHandler<double>(HSlider_ValueChanged);  
48.             this.VSlider.ValueChanged += new RoutedPropertyChangedEventHandler<double>(VSlider_ValueChanged);  
49.         }  
50.         void VSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)  
51.         {  
52.             sampleViewBox.Height = theContainer.ActualHeight * VSlider.Value / 100.0;  
53.         }  
54.         void HSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)  
55.         {  
56.             sampleViewBox.Width = theContainer.ActualWidth * HSlider.Value / 100.0;  
57.         }  
58.         void cbStretchDirection_SelectionChanged(object sender, SelectionChangedEventArgs e)  
59.         {  
60.             if (cbStretchDirection.SelectedItem != null)  
61.             {  
62.                 sampleViewBox.StretchDirection = (cbStretchDirection.SelectedItem as StretchDirectionHelper).theStretchDirection;  
63.             }  
64.         }  
65.         void cbStretch_SelectionChanged(object sender, SelectionChangedEventArgs e)  
66.         {  
67.             if (cbStretch.SelectedItem != null)  
68.             {  
69.                 sampleViewBox.Stretch = (cbStretch.SelectedItem as StretchHelper).theStretchMode;  
70.             }  
71.         }  
72.         void MainPage_Loaded(object sender, RoutedEventArgs e)  
73.         {  
74.             //填充各ComboBox内容    
75.             cbStretchList.Add(new StretchHelper() { StretchModeName = "Fill", theStretchMode = Stretch.Fill });  
76.             cbStretchList.Add(new StretchHelper() { StretchModeName = "None", theStretchMode = Stretch.None });  
77.             cbStretchList.Add(new StretchHelper() { StretchModeName = "Uniform", theStretchMode = Stretch.Uniform });  
78.             cbStretchList.Add(new StretchHelper() { StretchModeName = "UniformToFill", theStretchMode = Stretch.UniformToFill });  
79.             cbStretch.ItemsSource = cbStretchList;  
80.             cbStretch.DisplayMemberPath = "StretchModeName";  
81.             cbStretchDirectionList.Add(new StretchDirectionHelper() { StretchDirectionName = "DownOnly", theStretchDirection = StretchDirection.DownOnly });  
82.             cbStretchDirectionList.Add(new StretchDirectionHelper() { StretchDirectionName = "UpOnly", theStretchDirection = StretchDirection.UpOnly });  
83.             cbStretchDirectionList.Add(new StretchDirectionHelper() { StretchDirectionName = "Both", theStretchDirection = StretchDirection.Both });  
84.             cbStretchDirection.ItemsSource = cbStretchDirectionList;  
85.             cbStretchDirection.DisplayMemberPath = "StretchDirectionName";  
86.         }    
87.     }  
88. }