WPF动态设置列问题：购物车控件列位置异常

我正在开发一款库存管理应用，已完成带有购买选项的产品页面。当用户购买商品后，商品会被移入ShoppingCart Window，但此时出现问题：控件未处于正确的列位置，所有控件都靠左排列，无法实现各控件相互分隔的效果。

原始后台代码 #

decimal curCompletePrice = 0;

var rowcounter = 0;
for (int i = 0; i < _shoppingCartService.ArticlesDict.Count; i++)
{
    MainGrid.RowDefinitions.Add(new RowDefinition());
}
for (int i = 0; i < 4; i++)
{
    MainGrid.ColumnDefinitions.Add(new ColumnDefinition());
}

foreach (var article in _shoppingCartService.ArticlesDict)
{
    if (article.Key != null)
    {
        var grid = new Grid();

        grid.MaxWidth = 800;
        Grid.SetRow(grid, rowcounter);

        var productImage = new Image();
        productImage.Source = new BitmapImage(new Uri(article.Value[0]));
        productImage.HorizontalAlignment = HorizontalAlignment.Left;
        productImage.VerticalAlignment = VerticalAlignment.Center;
        productImage.Height = 70;
        productImage.Width = 70;
        Grid.SetColumn(productImage, 0);

        var nameLabel = new Label();
        nameLabel.Content = article.Value[1];
        nameLabel.HorizontalAlignment = HorizontalAlignment.Center;
        nameLabel.VerticalAlignment = VerticalAlignment.Center;
        nameLabel.FontSize = 20;
        nameLabel.Height = 40;
        nameLabel.Width = 300;
        Grid.SetColumn(nameLabel, 1);

        var priceLabel = new Label();
        priceLabel.Content = article.Value[2];
        priceLabel.Content += "Euro";
        priceLabel.HorizontalAlignment = HorizontalAlignment.Right;
        priceLabel.VerticalAlignment = VerticalAlignment.Center;
        priceLabel.FontSize = 20;
        priceLabel.Height = 40;
        priceLabel.Width = 150;
        curCompletePrice += Convert.ToDecimal(article.Value[2]);
        Grid.SetColumn(priceLabel, 2);

        var quantityLabel = new Label();
        quantityLabel.Content = article.Value[3];
        quantityLabel.HorizontalAlignment = HorizontalAlignment.Right;
        quantityLabel.VerticalAlignment = VerticalAlignment.Center;
        quantityLabel.Margin = new Thickness(90, 0, 0, 0);
        quantityLabel.FontSize = 20;
        quantityLabel.Height = 40;
        quantityLabel.Width = 40;
        Grid.SetColumn(quantityLabel, 3);

        var CompletePrice = new Label();
        if (rowcounter == _shoppingCartService.ArticlesDict.Count -1)
        {
            CompletePrice.Content = "Gesamtsumme: " + curCompletePrice + " €";
            CompletePrice.Foreground = new SolidColorBrush(Colors.Green);
            CompletePrice.HorizontalAlignment = HorizontalAlignment.Right;
            CompletePrice.VerticalAlignment = VerticalAlignment.Center;
            CompletePrice.Margin = new Thickness(0, 300, 80, 0);
            CompletePrice.FontSize = 20;
            CompletePrice.Height = 40;
            CompletePrice.Width = 200;
            Grid.SetColumn(CompletePrice, 3);
        }

        grid.Children.Add(productImage);
        grid.Children.Add(nameLabel);
        grid.Children.Add(priceLabel);
        grid.Children.Add(quantityLabel);
        grid.Children.Add(CompletePrice);

        MainGrid.Children.Add(grid);

        rowcounter++;

    }
}

问题截图 #

更新后的XAML代码 #

<Window.DataContext>
 <local:ShoppingCartViewModel/>
 </Window.DataContext>
<ItemsControl ItemsSource="{Binding Path=CartArticles}">
<ItemsControl.ItemTemplate>
    <DataTemplate>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto" MinWidth="120"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>

            <Image Grid.Column="0" Grid.Row="0" Width="100" Height="70" Source="{Binding PathPic}"/>
            <TextBlock Grid.Column="1" VerticalAlignment="Center" Text="{Binding Name}"/>

            <StackPanel Grid.Column="2"  Orientation="Horizontal" VerticalAlignment="Center" >
                <TextBlock FontSize="14" Foreground="DimGray" Text="{Binding Quantity}"/>
                <TextBlock Text=" x " FontSize="14" Foreground="DimGray" />
                <TextBlock FontSize="14" Foreground="DimGray" Text="{Binding Price}" />
            </StackPanel>
        </Grid>
    </DataTemplate>
</ItemsControl.ItemTemplate>

问题分析与修复方案 #

1. 原始代码核心问题

   • 每个商品对应的内部Grid没有定义列规则（ColumnDefinitions），仅给控件设置Grid.SetColumn完全无效——无列定义的Grid会默认将所有控件放在第0列，导致堆叠靠左。
   • MainGrid的列定义仅作用于自身子元素，和内部商品Grid的控件布局无关。

2. 后台代码快速修复方案

   • 给每个商品的内部Grid添加对应列定义：

     var grid = new Grid();
     // 为内部Grid添加4个列定义
     for (int col = 0; col < 4; col++)
     {
         grid.ColumnDefinitions.Add(new ColumnDefinition());
     }
     grid.MaxWidth = 800;
     Grid.SetRow(grid, rowcounter);
     

   • 移除MainGrid的列定义，因为商品布局由内部Grid自行管理。
   • 将总价标签从商品行的Grid中移出，单独添加到MainGrid的最后一行并跨列显示，避免布局混乱。

3. 推荐的XAML完善方案（MVVM模式）

   • 你已转向MVVM+ItemsControl的WPF最佳实践，可进一步优化：
     • 添加ItemsPanel确保商品垂直排列：

       <ItemsControl.ItemsPanel>
           <ItemsPanelTemplate>
               <StackPanel Orientation="Vertical"/>
           </ItemsPanelTemplate>
       </ItemsControl.ItemsPanel>
       

     • 单独添加总价显示控件，绑定ViewModel的总价属性：

       <TextBlock Grid.Row="1" HorizontalAlignment="Right" VerticalAlignment="Center"
                  Foreground="Green" FontSize="20"
                  Text="{Binding TotalPrice, StringFormat='Gesamtsumme: {0} €'}"/>
       

     • 给商品行添加边框或间距，提升视觉分隔效果：

       <DataTemplate>
           <Border BorderThickness="0,0,0,1" BorderBrush="#EEE" Padding="8">
               <!-- 原Grid内容 -->
           </Border>
       </DataTemplate>
       

内容的提问来源于stack exchange，提问作者user22498067