XAML学习笔记之Layout（五）——ViewBox

 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部分：

<Grid Height="600" Width="600">
        <Grid.Resources>
            <Style TargetType="Button">
                <Setter Property="HorizontalAlignment"
                        Value="Stretch"/>
                <Setter Property="Margin"
                        Value="6"/>
                <Setter Property="Background"
                        Value="Yellow"/>                     
            </Style>
        </Grid.Resources>
        
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="auto" />
            <RowDefinition />
        </Grid.RowDefinitions>

        <StackPanel Grid.Row="0" Grid.Column="0" Margin="5,5,5,5" Orientation="Vertical">
            <TextBlock Text="Stretch" FontWeight="Bold" FontSize="12" />
            <Button Name="btn1" Click="stretchNone" Content="None" />
            <Button Name="btn2" Click="stretchFill" Content="Fill" />
            <Button Name="btn3" Click="stretchUni" Content="Uniform" />
            <Button Name="btn4" Click="stretchUniFill" Content="UniformToFill" />
        </StackPanel>

        <StackPanel Grid.Row="0" Grid.Column="1" Margin="5,5,5,5" Orientation="Vertical">
            <TextBlock Text="StretchDirection" FontWeight="Bold" FontSize="12" />
            <Button Name="btn5" Click="sdUpOnly" Content="UpOnly" />
            <Button Name="btn6" Click="sdDownOnly" Content="DownOnly" />
            <Button Name="btn7" Click="sdBoth" Content="Both" />
        </StackPanel>

        <StackPanel Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Margin="5" 
                Orientation="Vertical" HorizontalAlignment="Center">
            <TextBlock Name="txt1" FontSize="15" />
            <TextBlock Name="txt2" FontSize="15" />
        </StackPanel>

        <StackPanel Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Margin="5" 
                Orientation="Horizontal">
            <Viewbox MaxWidth="100" MaxHeight="100" Margin="6" Name="vb1">
                <Image Source="/Assets/flower.jpg"/>
            </Viewbox>
            <Viewbox MaxWidth="200" MaxHeight="200" Margin="6" Name="vb2">
                <Image Source="/Assets/flower.jpg"/>
            </Viewbox>

            <Viewbox MaxWidth="300" MaxHeight="300" Name="vb3">
                <Image Source="/Assets/flower.jpg"/>
            </Viewbox>
        </StackPanel>

    </Grid>

　　　　C#代码部分：

  //Setting the Stretch property to None
        private void stretchNone(object sender, RoutedEventArgs e)
        {
            vb1.Stretch = Stretch.None;
            vb2.Stretch = Stretch.None;
            vb3.Stretch = Stretch.None;
            txt1.Text = "Stretch 值为 None.";
        }

        //Setting the Stretch property to Fill
        private void stretchFill(object sender, RoutedEventArgs e)
        {
            vb1.Stretch = Stretch.Fill;
            vb2.Stretch = Stretch.Fill;
            vb3.Stretch = Stretch.Fill;
            txt1.Text = "Stretch 值为 Fill.";
        }

        //Setting the Stretch property to Uniform
        private void stretchUni(object sender, RoutedEventArgs e)
        {
            vb1.Stretch = Stretch.Uniform;
            vb2.Stretch = Stretch.Uniform;
            vb3.Stretch = Stretch.Uniform;
            txt1.Text = "Stretch 值为 Uniform.";
        }

        //Setting the Stretch property to UniformToFill
        private void stretchUniFill(object sender, RoutedEventArgs e)
        {
            vb1.Stretch = Stretch.UniformToFill;
            vb2.Stretch = Stretch.UniformToFill;
            vb3.Stretch = Stretch.UniformToFill;
            txt1.Text = "Stretch 值为 UniformToFill.";
        }

        //Setting the StretchDirection property to UpOnly
        private void sdUpOnly(object sender, RoutedEventArgs e)
        {
            vb1.StretchDirection = StretchDirection.UpOnly;
            vb2.StretchDirection = StretchDirection.UpOnly;
            vb3.StretchDirection = StretchDirection.UpOnly;
            txt2.Text = "StretchDirection 值为 UpOnly.";
        }

        //Setting the StretchDirection property to DownOnly
        private void sdDownOnly(object sender, RoutedEventArgs e)
        {
            vb1.StretchDirection = StretchDirection.DownOnly;
            vb2.StretchDirection = StretchDirection.DownOnly;
            vb3.StretchDirection = StretchDirection.DownOnly;
            txt2.Text = "StretchDirection 值为 DownOnly.";
        }

        //Setting the StretchDirection property to Both
        private void sdBoth(object sender, RoutedEventArgs e)
        {
            vb1.StretchDirection = StretchDirection.Both;
            vb2.StretchDirection = StretchDirection.Both;
            vb3.StretchDirection = StretchDirection.Both;
            txt2.Text = "StretchDirection 值为 Both.";
        }

　　例子中，将Assets文件中的flower.jpg替换成本地图片文件即可。其实通过这个例子也可以扩展添加其他属性，还可以应用到其他布局属性的学习，实在是很实用的小程序。

 　　以上就是对ViewBox的简单介绍。至此，对几种常见布局的基本内容方面的学习可以告一段落了。。终于可以进入到进阶内容的学习了。O(∩_∩)O~