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

score 0 · Answer 1 · answered Jun 17 '21 at 06:49

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.

Sorry, but is there any workaround using "xaml.primitives.Thumb" ? — Nisha, Jun 23 '21 at 18:04
In fact, the [Slider control](https://learn.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.slider?view=winrt-20348#remarks) has the built-in thumb control, which allows the user to select from a range of values by moving the Thumb control along the track. In a way, the above solution has been implemented with thumb. — dear_vv, Jun 24 '21 at 07:59

How to resize NavigationView and SplitView in UWP

1 Answers1