如何在MVVM模型中管理tile用户控件（有列表框绑定）？

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>

现在根据我的代码，瓷砖垂直移动意味着每个瓷砖占据一行。 但是我希望它们水平和垂直地分别表示每行两个瓷砖。 PLZ分享你的建议我是xaml设计的新手。

第一张图片显示了我正在获得的。

第二张图片是我想要的。

谢谢：）

Answer 1

您可以用Grid：

替换DataTemplate中的StackPanel

<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

我在toolkit oct 2011中使用WrapPanel成功完成了它。 http://www.windowsphonegeek.com/upload/articles/WrapPanelDemo.zip