CODEWITHSUNDEEP
uwpuwp-xaml
Sridhara Shetty
Sridhara Shetty

Reputation: 107

Adjustable split view or Adjustable sizes of the views

I have a requirement for adjusting sizes of the views. Please refer the attached gif. for reference

Upvotes: 1

Views: 350

Answers (1)

Nico Zhu
Nico Zhu

Reputation: 32785

For your requirement, you could use GridSplitter to realize this feature. This control automatically detects the targeted columns/rows to resize, while dragging the control it starts to resize the columns/rows and redistributes space between columns/rows, you can manually specify the Resize Direction Auto, Column, Row and the Resize Behavior to select which columns/rows to resize.

Syntax

<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>

Usage

<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>

Please note that before using GridSplitter, you need to add Microsoft.Toolkit.Uwp.UI.Controls nuget package to your project.

Upvotes: 3

Related Questions