c# - 如何在 MVVM 模型中管理磁贴用户控件(具有列表框绑定(bind))？

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>

//这是 View 中的绑定(bind)代码

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

现在根据我的代码，图 block 是垂直排列的，这意味着每个图 block 都在一行中。但我希望它们水平和垂直都出现意味着每行有两个瓷砖。请分享你的建议，我是 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属性。