UniformGrid 的 XAML 项模板弄乱了边距和位置-解网

问：

我试图制作一个 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 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>

知道为什么会发生这种情况吗？任何帮助都是值得赞赏的！

C# .NET WPF 可视化工作室 XAML

若要在 WPF 面板上显示一堆项，请使用绑定到所选项的 f。有一个属性，您可以设置该属性，该属性包含一个 .这只会绘制一个项目。因此，您放下，定义它，将其绑定到项列表，然后从集合中添加/删除。它负责为您绘制它们。这可能会有所帮助：stackoverflow.com/questions/42372388/......ItemsControlObservableCollectionItemsControlItemTemplateDataTemplateDataTemplateItemsControlItemTemplate

答：

-1赞 Ali Jafari 10/28/2023 #1

你可以这段代码

    <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">
      <Button Margin="10"
    Background="#29303d"
    CornerRadius="5">
    <Button.Content>
<DockPanel>

    <Image Source="\Images\placeholderImage.jpg"
           Width="300"
           Height="200"
           VerticalAlignment="Top"
           Margin="0,10,0,0"
           x:Name="img"
           DockPanel.Dock="Top"/>

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

    <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"
               DockPanel.Dock="Bottom"/>

<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"/>
    </DockPanel>
</Button.Content>
</Button>

上一个：在 WPF 中从另一个视图动态更改视图

下一个：为什么我在使用 MAUI 的 XAML 中的单选按钮在 android 上不可单击？

UniformGrid 的 XAML 项模板弄乱了边距和位置

XAML Item Template for UniformGrid messed up margins and positions

评论