可调整的拆分视图或可调整的视图大小

Question

我有调整视图大小的要求。请参考随附的 gif。

Answer 1

根据您的要求，您可以使用 GridSplitter 来实现此功能。本控件自动检测目标columns/rows调整大小，同时拖动控件开始调整columns/rows和columns/rows之间重新分配space，可以手动指定调整方向Auto 、列、行和调整大小行为 select，其中 columns/rows 调整大小。

语法

<controls:GridSplitter 
    Grid.Column="1"
    Width="11"
    ResizeBehavior="BasedOnAlignment"
    ResizeDirection="Auto"
    Background="Gray"
    Foreground="White" 
    FontSize="13">

    <controls:GridSplitter.Element>
        <Grid>
            <TextBlock HorizontalAlignment="Center" 
                IsHitTestVisible="False"
                VerticalAlignment="Center"  
                Text="&#xE784;"
                Foreground="Black" 
                FontFamily="Segoe MDL2 Assets">
            </TextBlock>
        </Grid>
    </controls:GridSplitter.Element>
</controls:GridSplitter>

用法

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.ColumnDefinitions>
        <ColumnDefinition MinWidth="200"></ColumnDefinition>
        <ColumnDefinition Width="11"></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <!--Column Grid Splitter-->
    <controls:GridSplitter
        Grid.Column="1"
            Width="11"
        ResizeBehavior="BasedOnAlignment"
        ResizeDirection="Auto"
            Background="Gray"
            Foreground="White"
            FontSize="13">
        <controls:GridSplitter.Element>
            <Grid>
                <TextBlock HorizontalAlignment="Center"
                    IsHitTestVisible="False"
                    VerticalAlignment="Center"
                    Text="&#xE784;"
                    Foreground="Black"
                    FontFamily="Segoe MDL2 Assets">
                </TextBlock>
            </Grid>
        </controls:GridSplitter.Element>
    </controls:GridSplitter>
</Grid>

请注意，在使用GridSplitter之前，您需要将Microsoft.Toolkit.Uwp.UI.Controls nuget包添加到您的项目中。

可调整的拆分视图或可调整的视图大小

Adjustable split view or Adjustable sizes of the views

uwp

uwp-xaml