zoukankan      html  css  js  c++  java
  • 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部分:

     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~

  • 相关阅读:
    Web知识点收集
    UIView 的 autoresizingMask 属性 详解。
    OpenStack-Neutron-VPNaaS-API
    OpenStack-Neutron-VPNaaS-测试和使用
    OpenStack-Neutron-VPNaaS-配置
    OpenStack-Neutron-安全组
    Openstack-Namespaces
    OpenStack-RabbitMQ-获取vm、磁盘、网络设备的状态变化
    Openstack-Ceilometer-SNMP的使用
    Openstack-Ceilometer-Alarm运行机制
  • 原文地址:https://www.cnblogs.com/shiliangvv/p/5170121.html
Copyright © 2011-2022 走看看