Question

调整gridlayout时遇到问题。这是手册页：

此页面包含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>

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

Answer 2

好的，我在问题上找到答案。 :) Yeeee :) 我的错误是在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。就是这样。

Grid中的ListBox不会在SplitView中调整大小

2 个答案: