How to resize NavigationView and SplitView in UWP

Question

I want to enable user to resize the NavigationView in my UWP app. Couldn't find any resources how I could do that.

I see some of the apps have "Resizable splitView" but for SplitView also, I cannot see any such resize property exposed to set by default.

Pls help. Thanks in Advance

Answer 1

There are no such property can resize SplitView and NavigationView, you need to custom layout to implement a similar effect. You could use Slider control and bind the OpenPaneLength Property of SplitView to Slider.Value to do this. Please refer to the following code.

     <Grid>

       <SplitView Name="CoreSplitView"          
            DisplayMode="Inline"
            IsPaneOpen="True"
            OpenPaneLength="{Binding Value, ElementName=MasterSlider, Mode=OneWay}">
            <SplitView.Pane>
                <Grid Name="PaneGrid" Background="Gray">
                    <Slider Name="MasterSlider"
                        MinWidth="480"
                        VerticalAlignment="Stretch"
                       Maximum="480"
                        Minimum="10"
                        Opacity="0"
                        Value="150" 
                           />
                    <StackPanel Name="PaneStackPanel" 
                     Margin="0,0,10,0" Background="LightGray">
                        <TextBlock TextWrapping="Wrap" Text="Use a slider when you want your users to be able to set defined, contiguous values (such as volume or brightness) or a range of discrete values (such as screen resolution settings).A slider is a good choice when you know that users think of the value as a relative quantity" />
                    </StackPanel>
                </Grid>
            </SplitView.Pane>
            <Grid Name="ContentGrid" Background="LightSteelBlue">
            </Grid>
        </SplitView>
</Grid>

The StackPanel that is directly under our slider, acts like a cover for our Slider. Notice the StackPanel has Margin="0,0,10,0", this translates to a 10px distance from the right wall, which allows the Slider area to be exposed as a gray strip that is used to drag the Pane, again the 10px is arbitrary but it has to match the Minimum of the Slider.