如何在 UWP 中调整 NavigationView 和 SplitView 的大小答案

【问题标题】：How to resize NavigationView and SplitView in UWP如何在 UWP 中调整 NavigationView 和 SplitView 的大小
【发布时间】：2021-08-31 22:58:55
【问题描述】：

我想让用户在我的 UWP 应用中调整 NavigationView 的大小。找不到任何资源我该怎么做。

我看到一些应用程序具有“可调整大小的 splitView”，但对于 SplitView，我看不到任何默认设置的调整大小属性。

请帮忙。提前致谢

【问题讨论】：

标签： xaml uwp-xaml uwp-navigation

【解决方案1】：

SplitView 和 NavigationView 没有这样的属性可以调整大小，你需要自定义布局来实现类似的效果。您可以使用Slider control 并将SplitView 的OpenPaneLength 属性绑定到Slider.Value 来执行此操作。请参考以下代码。

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

在我们的滑块正下方的 StackPanel 就像我们的滑块的封面一样。注意 StackPanel 有 Margin="0,0,10,0"，这意味着距离右墙 10px 的距离，这允许 Slider 区域显示为用于拖动 Pane 的灰色条带，同样是 10px是任意的，但它必须匹配滑块的最小值。

【讨论】：

抱歉，有没有使用“xaml.primitives.Thumb”的解决方法？
事实上，Slider control 具有内置的拇指控件，它允许用户通过沿轨道移动拇指控件来从一系列值中进行选择。在某种程度上，上面的解决方案已经用 thumb 实现了。