Question

好的，所以我的Hub（我认为）滚动条与我的命令栏重叠，无法与你交互。那么如何禁用它（scollbar）？让它隐形？我尝试将“ScrollViewer.HorizontalScrollBarVisibility =”隐藏“添加到Hub，Grid但它根本没有帮助我。

这是页面的XAML：

<Page
x:Class="CourseWorkTest.Settings"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:CourseWorkTest"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <CommandBar VerticalAlignment="Bottom">
        <AppBarButton x:Name="back"  Icon="Back" Label="Back" Click="back_Click"/>
        <AppBarButton x:Name="save" Icon="Accept" Label="Save" Click="save_Click"/>
    </CommandBar>
    <Hub Header="Settings">
        <HubSection Header="General">
            <DataTemplate>
                <Grid>
                    <StackPanel Width="500" Height="550" Background="WhiteSmoke">
                        <StackPanel Height="Auto">
                            <Button x:Name="enabledDays" Content="Enabled Days" FontWeight="Bold" Background="Transparent" Width="500" HorizontalContentAlignment="Left" Click="enabledDays_Click">
                                <Button.Flyout>
                                    <MenuFlyout x:Name="enabledDaysMenuFlyout">
                                        <ToggleMenuFlyoutItem x:Name="mon" Text="Monday" Tag="enabledDay" Click="enabledDays_Click"/>
                                        <ToggleMenuFlyoutItem Text="Tuesday" x:Name="tue" Tag="enabledDay" Click="enabledDays_Click"/>
                                        <ToggleMenuFlyoutItem Text="Wednesday" x:Name="wed" Tag="enabledDay" Click="enabledDays_Click"/>
                                        <ToggleMenuFlyoutItem Text="Thursday" x:Name="thu" Tag="enabledDay" Click="enabledDays_Click"/>
                                        <ToggleMenuFlyoutItem Text="Friday" x:Name="fri" Tag="enabledDay" Click="enabledDays_Click"/>
                                        <ToggleMenuFlyoutItem Text="Saturday" x:Name="sat" Tag="enabledDay" Click="enabledDays_Click"/>
                                        <ToggleMenuFlyoutItem Text="Sunday" x:Name="sun" Tag="enabledDay" Click="enabledDays_Click"/>
                                    </MenuFlyout>
                                </Button.Flyout>
                            </Button>
                            <TextBlock x:Name="enabledDaysText"/>
                        </StackPanel>
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </HubSection>
        <HubSection Header="Notifications &amp; Automute">
            <DataTemplate>
                <Grid>
                    <StackPanel Width="400" Background="WhiteSmoke" Height="550">
                        <ToggleSwitch x:Name="automuteToggleSwitch" Header="Automute" HorizontalAlignment="Left" VerticalAlignment="Top" ToolTipService.ToolTip="Automute device during lesson"/>
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </HubSection>
        <HubSection Header="Durations">
            <DataTemplate>
                <Grid>
                    <StackPanel Width="550" Height="550" Background="WhiteSmoke">
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </HubSection>
        <HubSection Header="Data">
            <DataTemplate>
                <Grid>
                    <StackPanel Width="300" Height="550" Background="WhiteSmoke">
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </HubSection>
    </Hub>
</Grid>

Answer 1

@Chris的回答是解决问题的方法之一。您可以在XAML中的任何位置放置CommandBar内嵌您的应用内容。但更典型的情况是，我们会将其分配到Page的应用栏，尤其是当触摸键盘或软输入面板（{= 1}}必须对用户保持可见时SIP），出现。

如果您想将CommandBar放在CommandBar，那么您可以使用Bottom的{{3}}属性

Page

有关详细信息，请参阅BottomAppBar中的展示位置。

要隐藏<Page x:Class="CourseWorkTest.Settings" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="using:CourseWorkTest" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Page.BottomAppBar> <CommandBar> <AppBarButton x:Name="back" Click="back_Click" Icon="Back" Label="Back" /> <AppBarButton x:Name="save" Click="save_Click" Icon="Accept" Label="Save" /> </CommandBar> </Page.BottomAppBar> <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <Hub Header="Settings"> ... </Hub> </Grid> </Page>，我们需要修改App bar and command bar，因为Hub styles and templates在其模板中隐式支持scrollview。在其模板中，我们可以发现ScrollBar属性已固定为HorizontalScrollBarVisibility。

Auto

因此，我们只需将其更改为<ScrollViewer x:Name="ScrollViewer" Grid.RowSpan="2" HorizontalScrollBarVisibility="Auto" HorizontalScrollMode="Auto" HorizontalSnapPointsAlignment="Near" HorizontalSnapPointsType="OptionalSingle" VerticalScrollBarVisibility="Disabled" VerticalScrollMode="Disabled" VerticalSnapPointsAlignment="Near" VerticalSnapPointsType="OptionalSingle" ZoomMode="Disabled"> <ItemsStackPanel x:Name="Panel" CacheLength="20" Orientation="{TemplateBinding Orientation}" /> </ScrollViewer>，然后将此新样式分配给Hidden。在此之后，应该没有滚动条。

Answer 2

您只需要使用$(window).height()在布局中使用它的方式，因为您当前的结果将在当前的结果中得到预期。要修复它，请执行此操作;

Grid

干杯！

滚动条是UWP中的重叠命令栏

2 个答案: