无法将网格中的 XAML 元素移动到另一个单元格答案

【问题标题】：Cannot move XAML element in grid to another cell无法将网格中的 XAML 元素移动到另一个单元格
【发布时间】：2014-03-20 19:25:14
【问题描述】：

在我的 Windows 商店应用程序中，我试图有两个 ListView，当显示器足够宽时并排，当显示器很薄时垂直堆叠。

我正在尝试使用 2x2 网格来执行此操作，默认情况下网格是这样的

<Grid Grid.Row="1" HorizontalAlignment="Stretch" Margin="0,0,0,20">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" x:Name="FromUnitSelectorColumn" />
                    <ColumnDefinition Width="*" x:Name="ToUnitSelectorColumn" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" x:Name="FromUnitSelectorRow" />
                    <RowDefinition Height="auto" x:Name="ToUnitSelectorRow" />
                </Grid.RowDefinitions>
                <ListView Name="FromUnitSelector" Header="Converting From " Margin="0,0,10,0" Grid.Row="0" Grid.Column="0">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="auto"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="auto" />
                                </Grid.RowDefinitions>
                                <Border BorderBrush="{x:Null}" Height="40" Width="40" Margin="5,0,0,0" Background="Beige">
                                    <TextBlock Text="{Binding symbol}" HorizontalAlignment="Center" VerticalAlignment="Center" TextTrimming="Clip" FontSize="10"/>
                                </Border>
                                <Border BorderBrush="{x:Null}" Height="40" Margin="5,0,0,0" Grid.Row="0" Grid.Column="1">
                                    <TextBlock Text="{Binding name}" HorizontalAlignment="Stretch" TextAlignment="Center" VerticalAlignment="Center" FontSize="14" TextWrapping="Wrap"/>
                                </Border >
                            </Grid>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
                <ListView Name="ToUnitSelector" Header="To " Margin="10,0,0,0" Grid.Row="0" Grid.Column="1">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="auto"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="auto" />
                                </Grid.RowDefinitions>
                                <Border BorderBrush="{x:Null}" Height="40" Width="40" Margin="5,0,0,0" Background="Beige">
                                    <TextBlock Text="{Binding symbol}" HorizontalAlignment="Center" VerticalAlignment="Center" TextTrimming="Clip"  FontSize="10"/>
                                </Border >
                                <Border BorderBrush="{x:Null}" Height="40" Margin="5,0,0,0" Grid.Row="0" Grid.Column="1">
                                    <TextBlock Text="{Binding name}"  HorizontalAlignment="Stretch" TextAlignment="Center" VerticalAlignment="Center" FontSize="14" TextWrapping="Wrap"/>
                                </Border>
                            </Grid>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </Grid>

我正在尝试将两个 ListView 设置为在我的薄视觉状态中垂直堆叠

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToUnitSelectorColumn" Storyboard.TargetProperty="Width">
    <DiscreteObjectKeyFrame KeyTime="0" Value="auto" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToUnitSelectorRow" Storyboard.TargetProperty="Height">
    <DiscreteObjectKeyFrame KeyTime="0" Value="*" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToUnitSelector" Storyboard.TargetProperty="Grid.Row">
    <DiscreteObjectKeyFrame KeyTime="0" Value="1" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToUnitSelector" Storyboard.TargetProperty="Grid.Column">
    <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
</ObjectAnimationUsingKeyFrames>

但是当我测试它时，我得到了这个异常“WinRT 信息：无法解析指定对象上的 TargetProperty Grid.Row。”

我需要做什么才能将我的第二个 ListView 更改为另一行和另一列？我意识到使用堆栈面板我可以简单地改变方向，但我需要它在一个网格中，以便它尽可能地伸展。

【问题讨论】：

为什么不直接把它们扔到WrapGrid 中就可以了？
Grid.Row 是一个附加属性，所以我会尝试用括号括起来 - (Grid.Row)

标签： xaml windows-runtime

【解决方案1】：

对于如此剧烈的布局变化，有时简单地使用两种不同的布局并使用模板或通过隐藏/显示这些布局的容器来切换它们是有意义的。

【讨论】：