UniformGrid商品项模板边距与位置错乱问题求助

尝试实现一个包含商品卡片的UniformGrid，但添加子项后，卡片模板的边距和内容位置出现错乱。预期是整齐排列的商品卡片，实际显示中卡片内部元素重叠、位置偏移。

商品项模板代码 #

<UserControl x:Class="ShopWave.MVVM.ItemListingTemplate"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:local="clr-namespace:ShopWave.MVVM"
         mc:Ignorable="d" 
         d:DesignHeight="500" d:DesignWidth="400">
<Border Margin="10"
        Background="#29303d"
        CornerRadius="5">
    <Grid Margin="0">
        <Image Source="\Images\placeholderImage.jpg"
               Width="300"
               Height="200"
               VerticalAlignment="Top"
               Margin="0,10,0,0"
               x:Name="img"/>

        <TextBlock Text="Name"
                   Foreground="White"
                   Width="290"
                   Height="40"
                   FontSize="25"
                   VerticalAlignment="Top"
                   HorizontalAlignment="Center"
                   Margin="-8,170,0,0"
                   x:Name="name"/>

        <TextBlock Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labo."
                   TextWrapping="WrapWithOverflow"
                   Foreground="LightGray"
                   TextAlignment="Left"
                   Height="200"
                   Width="285"
                   FontSize="20"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center"
                   Margin="-8,120,0,0"
                   x:Name="dscp"/>

        <TextBlock Text="$16.99"
                   Foreground="DarkGray"
                   Width="90"
                   Height="30"
                   FontSize="25"
                   TextAlignment="Center"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Center"
                   Margin="0,400,0,0"
                   x:Name="price"/>

        <Button Background="Transparent"/>
    </Grid>
</Border>
</UserControl>

UniformGrid所在控件代码 #

<UserControl x:Class="ShopWave.MVVM.View.ServiceView"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:local="clr-namespace:ShopWave.MVVM.View"
         mc:Ignorable="d" 
         Loaded="ServiceView_Loaded"
         d:DesignHeight="450" d:DesignWidth="800">
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="11*"/>
        <RowDefinition Height="139*"/>
    </Grid.RowDefinitions>

    <TextBlock Text="Services" 
               Foreground="White"
               VerticalAlignment="Center"
               HorizontalAlignment="Left"
               Margin="20,0,0,0"
               FontSize="18"
               Grid.Row="0"/>

    <ScrollViewer VerticalScrollBarVisibility="Auto" Grid.Row="1">
        <UniformGrid x:Name="serviceStackPanel"
                    Margin="10"
                    VerticalAlignment="Top">
        </UniformGrid>
    </ScrollViewer>
</Grid>

问题原因及修复方案 #

核心问题 #

1. 硬编码Margin+固定尺寸导致布局脆弱
   模板内所有元素都用固定Margin（如-8,170,0,0）和宽高定位，UniformGrid会自动调整单元格尺寸，硬编码值会直接打破自适应逻辑，造成元素重叠偏移。
2. Grid未结构化布局
   模板内的Grid没有使用RowDefinitions/ColumnDefinitions划分区域，所有元素处于同一层级，依赖Margin定位的方式在容器尺寸变化时必然错乱。
3. UniformGrid未指定行列规则
   未设置Columns/Rows属性，UniformGrid的单元格尺寸计算会随容器宽度波动，进一步加剧布局混乱。

修复步骤 #

1. 重构商品模板的结构化布局

用Grid行列定义替代硬编码Margin，让元素自适应容器：

<UserControl x:Class="ShopWave.MVVM.ItemListingTemplate"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:local="clr-namespace:ShopWave.MVVM"
         mc:Ignorable="d" 
         d:DesignHeight="500" d:DesignWidth="400">
<Border Margin="10"
        Background="#29303d"
        CornerRadius="5">
    <Grid Margin="10">
        <Grid.RowDefinitions>
            <RowDefinition Height="200"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <Image Source="\Images\placeholderImage.jpg"
               HorizontalAlignment="Center"
               x:Name="img"/>

        <TextBlock Text="Name"
                   Foreground="White"
                   FontSize="25"
                   HorizontalAlignment="Center"
                   Grid.Row="1"
                   Margin="0,5"
                   x:Name="name"/>

        <TextBlock Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labo."
                   TextWrapping="WrapWithOverflow"
                   Foreground="LightGray"
                   FontSize="20"
                   Grid.Row="2"
                   Margin="0,5"
                   x:Name="dscp"/>

        <TextBlock Text="$16.99"
                   Foreground="DarkGray"
                   FontSize="25"
                   HorizontalAlignment="Center"
                   Grid.Row="3"
                   Margin="0,5,0,10"
                   x:Name="price"/>

        <Button Background="Transparent" Grid.RowSpan="4"/>
    </Grid>
</Border>
</UserControl>

2. 配置UniformGrid的列数

指定Columns属性控制每行显示的卡片数量，让布局更稳定：

<ScrollViewer VerticalScrollBarVisibility="Auto" Grid.Row="1">
    <UniformGrid x:Name="serviceStackPanel"
                Margin="10"
                VerticalAlignment="Top"
                Columns="2">
    </UniformGrid>
</ScrollViewer>

3. 移除不必要的固定尺寸

尽量让元素使用Stretch对齐或自适应尺寸，避免固定宽高限制容器适配。

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