Windows 8.1 如何自动换行网格项? [英] Windows 8.1 how to automatically wrap grid items?

问题描述

我正在构建一个通用应用程序，我的 Win8.1 应用程序必须显示一个项目网格.通常网格由 3 列组成，但在较小的屏幕上，我希望将项目换行，以便只有 2 列(甚至 1 列).这是我的代码:

I'm building a universal app and my Win8.1 app has to show a grid of items. Normally the grid consists of 3 columns, but on smaller screens I want the items to wrap so that there are only 2 columns (or even 1). This is my code:

<GridView ItemsSource="{Binding Regions}" IsItemClickEnabled="True">
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="3" MinWidth="400" />
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
    <GridView.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal" Margin="10">
                <Image Source="{Binding Code, Converter={StaticResource FlagIconConverter}, ConverterParameter='/Assets/Icons/Flags/{0}.png'}" Width="30" />
                <TextBlock Text="{Binding NativeName}" Style="{StaticResource BodyTextBlockStyle}" Margin="10,0,0,10" VerticalAlignment="Center" />
            </StackPanel>
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

每当我缩小应用程序时，项目不会自动换行.我尝试通过使用 VisualStateManager 更改 MaximumRowsOrColumns 属性来解决这个问题，但这不起作用，因为它由于某种原因无法访问我的 WrapGrid.从代码隐藏更改属性也不起作用，因为它再次无法访问 WrapGrid.

Whenever I make the app smaller, the items do not automatically wrap. I tried solving this by changing the MaximumRowsOrColumns property with a VisualStateManager but that didn't work because it couldn't access my WrapGrid for some reason. Changing the property from code-behind didn't work either, because again it couldn't access the WrapGrid.

我用 WrapGrid 和 ItemsWrapGrid 都试过了(到底有什么区别?)和 ListView 和 GridView.没有区别.

I tried this with both WrapGrid and ItemsWrapGrid (what is the difference anyway?) and ListView and GridView. No difference there.

有谁知道如何做到这一点?

Does anyone know how to accomplish this?

推荐答案

你不需要做任何事情.它应该根据可用的客户区进行包装.我能想到的唯一不会让它包装的是你把你的 <GridView> 放在一个固定宽度的容器 或一个大小为 的容器中自动，您不更新 Observable Collection 以通知 Grid 重绘/更新自身.

You shouldn't need to do anything. It should wrap based on the available client area. The only thing I can think of that would not make it wrap is that you put your <GridView> inside a fixed width container or a container that is size Auto in which you don't update the Observable Collection to notify the Grid to redraw/update itself.

例如，这不会换行.

<Grid Width="1000">
    <GridView x:Name="myGridView" IsItemClickEnabled="True">
        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <ItemsWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="5"/>
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>
        <GridView.ItemTemplate>
            <!-- DATATEMPLATE -->
        </GridView.ItemTemplate>
     </GridView>
</Grid>

<小时>

不过，去掉那个 Width=1000，它就会自动换行.

示例输出 3 种不同的尺寸

Example output 3 different sizes

这篇关于Windows 8.1 如何自动换行网格项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！