c# - 如何在 MVVM 模型中管理平铺用户控件（具有列表框绑定）？

Question

//这是用户控制代码

<ListBox  Name="OvernightAverageListBox"  ItemsSource="{Binding Path=OvernightAverageCollections}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  >
 <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Name="items" Background="{Binding BackColor}" Height="200" Width="200">
                <TextBlock  Height="46" HorizontalAlignment="Left" Margin="26,10,0,0" Name="currentRate" Text="{Binding  Current_rate}" VerticalAlignment="Top" FontSize="36" />
                <TextBlock Height="22" HorizontalAlignment="Left" Margin="26,20,0,0" Name="rate_difference" Text="{Binding RateChange_Value}" VerticalAlignment="Top" FontSize="20" />
                <TextBlock Height="30" HorizontalAlignment="Left" Margin="26,30,0,0" Name="productName" Text="{Binding Product_name}" VerticalAlignment="Top" FontSize="24" />
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>

//这是视图上的绑定代码

<controls:PanoramaItem Header="Overnight Average" Tap="RateTile_Tap">
            <Grid x:Name="overnightAverage">
             <views:OvernightAverageTileControl x:Name="eventsView">       </views:OvernightAverageTileControl>
            </Grid>
        </controls:PanoramaItem>
</ListBox>

现在根据我的代码，瓷砖是垂直的，这意味着每个瓷砖都排成一排。但我希望它们水平和垂直地出现意味着每行有两个瓷砖。请分享你的建议我是 xaml 设计的新手。

第一张图片显示了我得到的东西。

第二张图片是我想要的。

谢谢 ：）

Answer 1

您可以将 DataTemplate 中的 StackPanel 替换为Grid：

<DataTemplate>
    <Grid Name="items" Background="{Binding BackColor}" Height="200" Width="200">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <TextBlock Grid.Column="0" Grid.Row="0" Text="{Binding Current_rate}" ... />
        <TextBlock Grid.Column="1" Grid.Row="0" Text="{Binding RateChange_Value}" ... />
        <TextBlock Grid.Column="0" Grid.Row="1" Text="{Binding Product_name}" ... />
    </Grid>
</DataTemplate>

您还可以通过设置ColumnDefinition.Width和RowDefinition.Height属性来指定列的绝对或相对宽度和行的高度。

Answer 2

我在 2011 年 10 月的工具包中使用 WrapPanel 成功完成了它。 http://www.windowsphonegeek.com/upload/articles/WrapPanelDemo.zip