ViewBox
简介
从功能上讲,ViewBox其实做了一件很简单的事:在不改变其中内容的实际大小的前提下,对其中的内容进行各种形式的缩放与转换,使其尺寸达到想要的效果;所以,从需求上讲,放入ViewBox中的内容一般会有“变换需求”,比如一些2D图形,矢量图,用于展示轮换的图片,或者专门提供的视图入口;从应用角度讲,ViewBox使用起来很简单,只要确定好ViewBox的尺寸范围、设置好关键属性即可。
关键属性
ViewBox主要通过两个关键属性: Stretch 与 StretchDirection 来控制其中内容的缩放,以图片为例,如果我们将一张图片放入ViewBox中,那么这两个属性代分别代表此图片缩放的方式与缩放方向。这两个属性的属性值与具体含义如下:
Stretch属性值及含义
属性 | 含义 |
Stretch.None | 图片保持原始大小,不进行缩放。 |
Stretch.Fill | 图片填充满viewbox,但不保留图片的横纵比。(图片会变形) |
Stretch.Uniform | 保留图片横纵比的前提下,填充viewbox。(viewbox中有会留白,但图片不会变形) |
Stretch.UniformToFill | 既保留图片的横纵比,又要填充满viewbox。(通过剪裁图片的方式,图片会显示不全) |
StretchDirection属性值及含义
属性 | 含义 |
StretchDirection.UpOnly | 只会通过放大图片的方式填充viewbox,不会缩小图片 |
StretchDirection.DownOnly | 只会通过缩小图片的方式填充viewbox,不会放大图片 |
StretchDirection.Both | 填充viewbox的方式即可以放大图片,也可以缩小图片 |
干巴巴的说了这么多,挺没意思的,其实官方的例子非常全面的阐释了viewbox的用法,我将其稍作修饰,供大家一起学习:
示例源码
XAML部分:
1 <Grid Height="600" Width="600"> 2 <Grid.Resources> 3 <Style TargetType="Button"> 4 <Setter Property="HorizontalAlignment" 5 Value="Stretch"/> 6 <Setter Property="Margin" 7 Value="6"/> 8 <Setter Property="Background" 9 Value="Yellow"/> 10 </Style> 11 </Grid.Resources> 12 13 <Grid.ColumnDefinitions> 14 <ColumnDefinition /> 15 <ColumnDefinition /> 16 </Grid.ColumnDefinitions> 17 18 <Grid.RowDefinitions> 19 <RowDefinition Height="Auto" /> 20 <RowDefinition Height="auto" /> 21 <RowDefinition /> 22 </Grid.RowDefinitions> 23 24 <StackPanel Grid.Row="0" Grid.Column="0" Margin="5,5,5,5" Orientation="Vertical"> 25 <TextBlock Text="Stretch" FontWeight="Bold" FontSize="12" /> 26 <Button Name="btn1" Click="stretchNone" Content="None" /> 27 <Button Name="btn2" Click="stretchFill" Content="Fill" /> 28 <Button Name="btn3" Click="stretchUni" Content="Uniform" /> 29 <Button Name="btn4" Click="stretchUniFill" Content="UniformToFill" /> 30 </StackPanel> 31 32 <StackPanel Grid.Row="0" Grid.Column="1" Margin="5,5,5,5" Orientation="Vertical"> 33 <TextBlock Text="StretchDirection" FontWeight="Bold" FontSize="12" /> 34 <Button Name="btn5" Click="sdUpOnly" Content="UpOnly" /> 35 <Button Name="btn6" Click="sdDownOnly" Content="DownOnly" /> 36 <Button Name="btn7" Click="sdBoth" Content="Both" /> 37 </StackPanel> 38 39 <StackPanel Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Margin="5" 40 Orientation="Vertical" HorizontalAlignment="Center"> 41 <TextBlock Name="txt1" FontSize="15" /> 42 <TextBlock Name="txt2" FontSize="15" /> 43 </StackPanel> 44 45 <StackPanel Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Margin="5" 46 Orientation="Horizontal"> 47 <Viewbox MaxWidth="100" MaxHeight="100" Margin="6" Name="vb1"> 48 <Image Source="/Assets/flower.jpg"/> 49 </Viewbox> 50 <Viewbox MaxWidth="200" MaxHeight="200" Margin="6" Name="vb2"> 51 <Image Source="/Assets/flower.jpg"/> 52 </Viewbox> 53 54 <Viewbox MaxWidth="300" MaxHeight="300" Name="vb3"> 55 <Image Source="/Assets/flower.jpg"/> 56 </Viewbox> 57 </StackPanel> 58 59 </Grid>
C#代码部分:
1 //Setting the Stretch property to None 2 private void stretchNone(object sender, RoutedEventArgs e) 3 { 4 vb1.Stretch = Stretch.None; 5 vb2.Stretch = Stretch.None; 6 vb3.Stretch = Stretch.None; 7 txt1.Text = "Stretch 值为 None."; 8 } 9 10 //Setting the Stretch property to Fill 11 private void stretchFill(object sender, RoutedEventArgs e) 12 { 13 vb1.Stretch = Stretch.Fill; 14 vb2.Stretch = Stretch.Fill; 15 vb3.Stretch = Stretch.Fill; 16 txt1.Text = "Stretch 值为 Fill."; 17 } 18 19 //Setting the Stretch property to Uniform 20 private void stretchUni(object sender, RoutedEventArgs e) 21 { 22 vb1.Stretch = Stretch.Uniform; 23 vb2.Stretch = Stretch.Uniform; 24 vb3.Stretch = Stretch.Uniform; 25 txt1.Text = "Stretch 值为 Uniform."; 26 } 27 28 //Setting the Stretch property to UniformToFill 29 private void stretchUniFill(object sender, RoutedEventArgs e) 30 { 31 vb1.Stretch = Stretch.UniformToFill; 32 vb2.Stretch = Stretch.UniformToFill; 33 vb3.Stretch = Stretch.UniformToFill; 34 txt1.Text = "Stretch 值为 UniformToFill."; 35 } 36 37 //Setting the StretchDirection property to UpOnly 38 private void sdUpOnly(object sender, RoutedEventArgs e) 39 { 40 vb1.StretchDirection = StretchDirection.UpOnly; 41 vb2.StretchDirection = StretchDirection.UpOnly; 42 vb3.StretchDirection = StretchDirection.UpOnly; 43 txt2.Text = "StretchDirection 值为 UpOnly."; 44 } 45 46 //Setting the StretchDirection property to DownOnly 47 private void sdDownOnly(object sender, RoutedEventArgs e) 48 { 49 vb1.StretchDirection = StretchDirection.DownOnly; 50 vb2.StretchDirection = StretchDirection.DownOnly; 51 vb3.StretchDirection = StretchDirection.DownOnly; 52 txt2.Text = "StretchDirection 值为 DownOnly."; 53 } 54 55 //Setting the StretchDirection property to Both 56 private void sdBoth(object sender, RoutedEventArgs e) 57 { 58 vb1.StretchDirection = StretchDirection.Both; 59 vb2.StretchDirection = StretchDirection.Both; 60 vb3.StretchDirection = StretchDirection.Both; 61 txt2.Text = "StretchDirection 值为 Both."; 62 }
例子中,将Assets文件中的flower.jpg替换成本地图片文件即可。其实通过这个例子也可以扩展添加其他属性,还可以应用到其他布局属性的学习,实在是很实用的小程序。
以上就是对ViewBox的简单介绍。至此,对几种常见布局的基本内容方面的学习可以告一段落了。。终于可以进入到进阶内容的学习了。O(∩_∩)O~