Windows 8 Xaml - 根据方向更改 GridView 布局答案

【问题标题】：Windows 8 Xaml- Changing GridView layout based on orientationWindows 8 Xaml - 根据方向更改 GridView 布局
【发布时间】：2014-03-25 22:30:31
【问题描述】：

所以我很确定这应该是一个快速简单的修复，但我似乎无法弄清楚。我试图根据设备方向更改我的 GridView 的布局，所有这些都在 Xaml 中。例如：

水平（水平滚动）
项目 1 项目 2 项目 3
项目 4 项目 5 项目 6

垂直（垂直滚动）
项目 1
项目2
项目 3
项目4
项目5
第 6 项

    <StackPanel Orientation="Horizontal" RequestedTheme="Light">
        <GridView TabIndex="1"  Grid.Row="2" ItemClick="LooksDetailItemClick" 
                                               IsItemClickEnabled="True" IsSwipeEnabled="False"     
                                               Padding="10,10,10,10" SelectionMode="Single" 
                                               ItemsSource="{Binding subItems}"  Height="auto" Width="auto" HorizontalAlignment="Left"
                                               VerticalAlignment="Top" Background="WhiteSmoke" HorizontalContentAlignment="Left" >
            <GridView.ItemTemplate>
                <DataTemplate>

                    <Grid x:Name="InnerGrid" Grid.Column="1"  Height="auto" Width="364">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="0"/>
                            <RowDefinition Height="280"/>
                        </Grid.RowDefinitions>

                        <Grid x:Name="OtherGrid" Grid.Row="2" Grid.Column="2" Margin="29,0,35,0">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="30"/>
                                <!--TitleBox-->
                                <RowDefinition Height="354*"/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="195*"/>
                                <!-- Right Box Text -->
                                <ColumnDefinition Width="130*"/>
                            </Grid.ColumnDefinitions>

                            <TextBlock  Text="{Binding name}" VerticalAlignment="Top" TextWrapping="Wrap" HorizontalAlignment="Left" 
Width="auto" Height="auto" Margin="0,0,-198,0" />
                            <Image Source="{Binding imagePath}"  Grid.Column="0" Grid.Row="1" Stretch="Fill" Height="212" Width="141" 
    VerticalAlignment="Top" HorizontalAlignment="Left"  Margin="10,0,20,0"/>

                            <StackPanel Grid.Column="2" Grid.Row="2" Orientation="Vertical">

                                <TextBlock  Text="Style:" FontSize="24" Margin="0, 10, 0, 0"/>
                                <TextBlock  Text="10000023" FontSize="10.667" Margin="0, 10, 0, 0"/>
                                <TextBlock Text="{Binding price}" FontSize="24" Margin="0, 10, 0, 0"/>
                                <TextBlock Text="Color:" FontSize="24" Margin="0, 10, 0, 0"/>

                                <GridView   Height="130" ItemsSource="{Binding colors}">
                                    <GridView.ItemTemplate>
                                        <DataTemplate>
                                            <Image Source="{Binding Color_Image}"  Width="40" Height="40" HorizontalAlignment="Left"/>
                                        </DataTemplate>
                                    </GridView.ItemTemplate>
                                </GridView>
                            </StackPanel>
                        </Grid>
                    </Grid>
                </DataTemplate>
            </GridView.ItemTemplate>
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <VariableSizedWrapGrid Orientation="Vertical"  MaximumRowsOrColumns="2"  /> 
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
        </GridView>
    </StackPanel>

【问题讨论】：

标签： c# xaml gridview windows-8 windows-store-apps

【解决方案1】：

不幸的是，您无法在 XAML 中完成所有操作，除非通过不再受支持的 LayoutAwarePage 之类的方式。因此，您需要创建自己的实现，这不是“全在 XAML 中”的解决方案。

【讨论】：