Grid 中的 ListBox 未在 SplitView 中调整大小答案

【问题标题】：ListBox in Grid not resize in SplitViewGrid 中的 ListBox 未在 SplitView 中调整大小
【发布时间】：2017-01-31 03:41:35
【问题描述】：

我在调整网格布局时遇到问题。这是手册页：

此页面在 3 列中有 ListBox。但是当我在我的 ListBox 中填写数据时，我看不到我的按钮和滚动条。我在 ScrollViewer 中有 ScrollBar，但它不起作用。我在 For 循环中生成所有值（100 项）。现在我有这样的东西：

这是我的页面代码：

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

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
      VerticalAlignment="Stretch">

    <Grid.RowDefinitions>
        <RowDefinition Height="4*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <Grid Grid.Row="0" x:Name="LayoutRoot">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width=".5*"/>
        </Grid.ColumnDefinitions>

        <TextBlock Grid.Column="0" 
                       Name="WordBeforeTranslation" 
                       HorizontalAlignment="Center" 
                       VerticalAlignment="Center"
                       FontSize="20"/>

        <StackPanel Grid.Column="1" >
            <TextBlock Name="WordAfterTranslation" 
                       HorizontalAlignment="Center" 
                       VerticalAlignment="Center"
                       FontSize="20"/>
            <TextBlock Name="WordArticulation" 
                       HorizontalAlignment="Center" 
                       VerticalAlignment="Center"
                       FontSize="20"/>
        </StackPanel>

        <ScrollViewer Grid.Column="2">
            <ListBox Name="AllWords"/>
        </ScrollViewer>

    </Grid>

    <Grid Grid.Row="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <Button Grid.Column="0"
                    Content="Previous"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"/>

        <Button Grid.Column="1"
                    Content="Check"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"/>

        <Button Grid.Column="2"
                    Content="Next"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"/>
    </Grid>

    <Grid Grid.Row="2">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <Button Grid.Column="0"
                Name="BtnLoadFile"
                Click="BtnLoadFile_Click"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Content="Load file"/>
        <Button Grid.Column="1"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Content="New Random"/>
        <Button Grid.Column="2"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Content="--------"/>
    </Grid>
</Grid>
</Page>

下一个案例：我如何在开始时设置，我的网格填充了页面的所有内容而不将数据加载到 ListBox？我可以在不丢失内容的情况下调整我的应用程序大小吗？我不想将永久值设置为高度和宽度。我只想有没有永久值的布局。一般来说，我希望当我重新缩放应用程序时，我的网格将具有相似的布局。

我想让我的页面看起来像我最初的屏幕截图一样。有可能吗？

编辑：

这是我在 MainPage 中的代码：

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

<StackPanel>
    <CommandBar HorizontalAlignment="Left">
        <AppBarButton Label="Menu" Click="ToogleMenu_Click">
            <AppBarButton.Icon>
                <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE700;"/>
            </AppBarButton.Icon>
        </AppBarButton>
        <AppBarButton Icon="Back" Label="Back" Click="GoBack_Click"/>
        <AppBarButton Icon="Home" Label="Play" Click="GoHome_Click"/>
    </CommandBar>
    <!--<Button Content="Open" Click="Button_Click"/>-->
    <SplitView Name="MySplitView"
               DisplayMode="CompactOverlay"
               CompactPaneLength="50"
               OpenPaneLength="200">
        <SplitView.Pane >
            <StackPanel>
                <ListBox SelectionMode="Single"
                         Name="ListOfMenu"
                         SelectionChanged="ListOfMenu_SelectionChanged">
                    <ListBoxItem Name="LearnWordsItem">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock FontFamily="Segoe MDL2 Assets" 
                                       Text="&#xE12B;" 
                                       FontSize="30"
                                       MinWidth="50"/>
                            <TextBlock Text="Nauka słówek"/>
                        </StackPanel>
                    </ListBoxItem>

                    <ListBoxItem Name="SettingItem">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock FontFamily="Segoe MDL2 Assets" 
                                       Text="&#xE115;" 
                                       FontSize="30"
                                       MinWidth="50"/>
                            <TextBlock Text="Ustawienia"/>
                        </StackPanel>
                    </ListBoxItem>

                </ListBox>


            </StackPanel>

        </SplitView.Pane>

        <SplitView.Content>
            <StackPanel>

                <Frame Name="MyFrame">

                </Frame>

            </StackPanel>
        </SplitView.Content>
    </SplitView>
</StackPanel>
</Page>

【问题讨论】：

这是整个代码，还是后面的代码有什么东西？此外，您似乎有某种菜单/汉堡包。当我将您的代码复制粘贴到空白页面时，它似乎在我的桌面上工作正常。顺便说一句：为什么你在滚动查看器中包装列表框，当它已经有它自己的时候？
这不是完整的代码，我只展示了页面的代码。在 MainView 中，我有 SplitView，我的页面加载到 Frame。为什么我将 ListBox 包装到 ScrollViewer？因为 ListBox 中的滚动条也不起作用。
您能否将问题中的代码复制粘贴到空白页面，在点击事件中仅放置AllWords.ItemsSource = items;，其中项目是一些虚拟字符串，看看它是否有效？我猜你的代码的其他一些部分可能会造成一些混乱。您也可以考虑使用 ListView 代替旧的 ListBox。
我更改了 ListView 上的 ListBox，但没有帮助。我在构造函数中加载数据。 for (int i = 0; i

标签： listbox uwp

【解决方案1】：

我看到你已经将三个RowDefinition 设置为“*”，它肯定会驱动掉那些按钮。如果您想让这些按钮始终显示在那里，您需要为两行设置固定高度。见以下代码：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
  VerticalAlignment="Stretch">

    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="100" />
        <RowDefinition Height="100" />
    </Grid.RowDefinitions>

    <Grid Grid.Row="0" x:Name="LayoutRoot">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width=".5*" />
        </Grid.ColumnDefinitions>

        <TextBlock Grid.Column="0"
                   Name="WordBeforeTranslation"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center"
                   FontSize="20" />

        <StackPanel Grid.Column="1">
            <TextBlock Name="WordAfterTranslation"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center"
                   FontSize="20" />
            <TextBlock Name="WordArticulation"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center"
                   FontSize="20" />
        </StackPanel>

        <ScrollViewer Grid.Column="2">
            <ListBox Name="AllWords" />
        </ScrollViewer>
    </Grid>

    <Grid Grid.Row="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <Button Grid.Column="0"
                Content="Previous"
                HorizontalAlignment="Center"
                VerticalAlignment="Center" />

        <Button Grid.Column="1"
                Content="Check"
                HorizontalAlignment="Center"
                VerticalAlignment="Center" />

        <Button Grid.Column="2"
                Content="Next"
                HorizontalAlignment="Center"
                VerticalAlignment="Center" />
    </Grid>

    <Grid Grid.Row="2">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <Button Grid.Column="0"
            Name="BtnLoadFile"

            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Content="Load file" />
        <Button Grid.Column="1"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Content="New Random" />
        <Button Grid.Column="2"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Content="--------" />
    </Grid>
</Grid>

【讨论】：

是的，它正在工作，但可能您将网格放在 MainPage 中。我的网格在单独的页面中，我将带有网格的页面加载到位于 MainPage 中的 SplitView 中的框架中。而且这种组合不起作用。
查看最后一个代码。在那里我展示了我的主页代码。

【解决方案2】：

好的，我找到了问题的答案。 :) 耶 :) 我的错误是在 mainPage 中我没有将所有内容都包含在网格中。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition />
    </Grid.RowDefinitions>

    <CommandBar Grid.Row="0" HorizontalAlignment="Left">
        <AppBarButton Label="Menu" Click="ToogleMenu_Click">
            <AppBarButton.Icon>
                <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE700;"/>
            </AppBarButton.Icon>
        </AppBarButton>
        <AppBarButton Icon="Back" Label="Back" Click="GoBack_Click"/>
        <AppBarButton Icon="Home" Label="Play" Click="GoHome_Click"/>
    </CommandBar>
    <SplitView Grid.Row="1" Name="MySplitView"
               DisplayMode="CompactOverlay"
               CompactPaneLength="50"
               OpenPaneLength="200"
               VerticalAlignment="Stretch">
        <SplitView.Pane >
            <StackPanel>
                <ListBox SelectionMode="Single"
                         Name="ListOfMenu"
                         SelectionChanged="ListOfMenu_SelectionChanged">
                    <ListBoxItem Name="LearnWordsItem">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock FontFamily="Segoe MDL2 Assets" 
                                       Text="&#xE12B;" 
                                       FontSize="30"
                                       MinWidth="50"/>
                            <TextBlock Text="Nauka słówek"/>
                        </StackPanel>
                    </ListBoxItem>

                    <ListBoxItem Name="SettingItem">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock FontFamily="Segoe MDL2 Assets" 
                                       Text="&#xE115;" 
                                       FontSize="30"
                                       MinWidth="50"/>
                            <TextBlock Text="Ustawienia"/>
                        </StackPanel>
                    </ListBoxItem>

                </ListBox>
            </StackPanel>
        </SplitView.Pane>

        <SplitView.Content>
            <Frame Name="MyFrame" >

            </Frame>
        </SplitView.Content>
    </SplitView>

</Grid>

足以更改 Grid 上的 StackPanel。就是这样。

【讨论】：