WPF 布局Viewbox&ScrollViewer使用案例

一、Viewbox

视图框（Viewbox）

　　视图框可以自动缩放其内容，以填充可用的空间。它只能有一个子元素。比如，Viewbox中放置一个Canvas，默认将按比例缩放Canvas，填充区域，而此时Canvas指定的长宽已不起作用，仅保留比例。

如果想禁用Viewbox的自动缩放功能，将其拉伸属性Stretch设置为None即可；

如果想缩放并且不保留子元素比例，将Viewbox的Stretch属性（默认为Uniform）改为Fill（完全填充）；

如果想保留比例并完全填充空白区域，Stretch设置为UniformToFill。

<Window x:Class="WpfAppNet8.Panel.Viewbox1"
        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"
        xmlns:local="clr-namespace:WpfAppNet8.Panel"
        mc:Ignorable="d"
        Title="Viewbox1" Height="400" Width="800">
    <Viewbox Stretch="Fill">
        <Canvas Width="100" Height="100" Background="AliceBlue">
            <Ellipse Fill="YellowGreen" Width="50" Height="50"></Ellipse>
        </Canvas>
    </Viewbox>
</Window>

 

二、ScrollViewer

.滚动视图控件（ScrollViewer）

　　ScollViewer，滚动视图控件可以将过多的内容放入一个可滚动的区域来显示。比如一个很大的椭圆，通过滚动就可以显示全部内容。

但是ScollViewer只能放一个元素，这个元素是任意的。倘若想布局多个元素，可以将多个元素放到一个面板中，再嵌入到ScollViewer中。

滚动条的可见性，默认垂直滚动条是可见的（Visiable），而水平滚动条是不可用的（Disable），此处改为Auto（需要时显示）或者Visiable（可见，不论需不需要都显示）。

<Window x:Class="WpfAppNet8.Panel.ScrollViewer1"
        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"
        xmlns:local="clr-namespace:WpfAppNet8.Panel"
        mc:Ignorable="d"
        Title="ScrollViewer1" Height="400" Width="400">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200"></ColumnDefinition>
            <ColumnDefinition Width="200"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="200"></RowDefinition>
            <RowDefinition Height="200"></RowDefinition>
        </Grid.RowDefinitions>

        <ScrollViewer Grid.Row="1" Grid.Column="1" >
            <StackPanel>
                <Button>测试内容001</Button>
                <Rectangle Width="100" Height="100" Fill="Red"></Rectangle>
                <Ellipse Width="100" Height="100" Fill="Blue"></Ellipse>
            </StackPanel>
        </ScrollViewer>
    </Grid>
</Window>

 

更多：

WPF 布局Canvas使用案例

WPF 布局UniformGrid使用案例

WPF 布局WrapPanel使用案例