可调节的分割视图或可调节的视图大小

Question

我需要调整视图的大小。请参阅附带的gif。

Answer 1

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

<强>语法

<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包添加到您的项目中。