WPF 自定义控件控件未对齐

Question

在我的视觉设计师中，我看到了这个：

但是，在实际应用中我看到了这个：

为什么一切都如此糟糕？如何让它看起来像我在设计器中看到的东西？

用户控制XAML:

<UserControl
    x:Class="MyNamespace.UserControlCard"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:MyNamespace"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Margin="0,0,0,0"
    d:DesignHeight="877"
    d:DesignWidth="622"
    GotFocus="UserControl_GotFocus"
    Loaded="UserControl_Loaded"
    LostFocus="UserControl_LostFocus"
    RenderTransformOrigin="0.5,0.5"
    mc:Ignorable="d">
    <UserControl.Background>
        <ImageBrush ImageSource="/img/Card Background.png" />
    </UserControl.Background>

    <UserControl.LayoutTransform>
        <TransformGroup>
            <ScaleTransform ScaleX="0.5" ScaleY="0.5" />
            <SkewTransform />
            <RotateTransform />
            <TranslateTransform />
        </TransformGroup>
    </UserControl.LayoutTransform>

    <Border
        x:Name="BorderFocus"
        BorderBrush="White"
        BorderThickness="5"
        Visibility="Visible">

        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Image
                x:Name="CardImage"
                Width="242"
                Height="295"
                Margin="27,38,0,0"
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                Source="/icons/rules.png"
                Stretch="Uniform"
                StretchDirection="Both" />
            <TextBlock
                x:Name="lblName"
                Width="256"
                Height="56"
                Margin="324,89,0,0"
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                FontFamily="Bahnschrift Condensed"
                FontSize="36"
                Foreground="White"
                Text="Lorem Ipsum"
                TextAlignment="Left"
                TextWrapping="Wrap" />
            <TextBlock
                x:Name="lblRace"
                Width="256"
                Height="56"
                Margin="324,166,0,0"
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                FontFamily="Bahnschrift Condensed"
                FontSize="36"
                Foreground="White"
                Text="Human"
                TextAlignment="Left"
                TextWrapping="Wrap" />
            <TextBlock
                x:Name="lblAge"
                Width="256"
                Height="56"
                Margin="324,244,0,0"
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                FontFamily="Bahnschrift Condensed"
                FontSize="36"
                Foreground="White"
                Text="20 years."
                TextAlignment="Left"
                TextWrapping="Wrap" />
            <TextBlock
                x:Name="lblDescription"
                Grid.RowSpan="2"
                Width="548"
                Height="102"
                Margin="0,368,0,0"
                HorizontalAlignment="Center"
                VerticalAlignment="Top"
                FontFamily="Bahnschrift Condensed"
                FontSize="20"
                Foreground="White"
                Text="Lorem Ipsum is truly a magnificent warrior. He is known for his great accomplishments on Earth battle. There is no better example of a brave person, than Lorem Ipsum - the one chosen by the universe itself, able to influence the outcome of The World Wars. Everyone is scared by pure thought of meeting him on the battlefield."
                TextWrapping="Wrap" />
            <TextBlock
                x:Name="lblFirst"
                Grid.Row="1"
                Margin="32,134,498,259"
                FontFamily="Bahnschrift Condensed"
                FontSize="36"
                Foreground="White"
                Text="50"
                TextAlignment="Center"
                TextWrapping="Wrap" />
            <ProgressBar
                x:Name="FirstBar"
                Grid.Row="1"
                Margin="128,136,84,257"
                Foreground="#FF29C93F"
                LargeChange="0"
                SmallChange="1"
                Value="50" />
            <TextBlock
                x:Name="lblSecond"
                Grid.Row="1"
                Margin="32,208,498,184"
                FontFamily="Bahnschrift Condensed"
                FontSize="36"
                Foreground="White"
                Text="50"
                TextAlignment="Center"
                TextWrapping="Wrap" />
            <ProgressBar
                x:Name="SecondBar"
                Grid.Row="1"
                Margin="128,208,84,185"
                Foreground="#FFFF4545"
                LargeChange="0"
                SmallChange="1"
                Value="50" />
            <TextBlock
                x:Name="lblThird"
                Grid.Row="1"
                Margin="32,284,498,109"
                FontFamily="Bahnschrift Condensed"
                FontSize="36"
                Foreground="White"
                Text="50"
                TextAlignment="Center"
                TextWrapping="Wrap" />
            <ProgressBar
                x:Name="ThirdBar"
                Grid.Row="1"
                Margin="128,286,84,108"
                Foreground="#FF49DFE6"
                LargeChange="0"
                SmallChange="1"
                Value="50" />
            <TextBlock
                x:Name="lblFourth"
                Grid.Row="1"
                Margin="32,358,498,34"
                FontFamily="Bahnschrift Condensed"
                FontSize="36"
                Foreground="White"
                Text="50"
                TextAlignment="Center"
                TextWrapping="Wrap" />
            <ProgressBar
                x:Name="FourthBar"
                Grid.Row="1"
                Margin="128,358,84,35"
                Foreground="#FFDCB752"
                LargeChange="0"
                SmallChange="1"
                Value="50" />

        </Grid>
    </Border>
</UserControl>

我希望我的卡片显示在哪里（在代码中添加为PanelCards.Children 项目）：

<ScrollViewer
            Margin="0,0,220,162"
            HorizontalScrollBarVisibility="Auto"
            VerticalScrollBarVisibility="Auto">

            <WrapPanel
                x:Name="PanelCards"
                Width="1050"
                Margin="0,0,225,182"
                Orientation="Horizontal" />
        </ScrollViewer>

编辑：将所有内容设置在正确位置的最佳做法是什么？ @mm8 提到使用面板，但我对 WPF 技术非常陌生，我不知道应该使用哪些面板以及如何使用。

如果您需要布局参考，请查看this。

Answer 1

您需要删除任何超过 20 像素的边距，例如 Margin="32,134,498,259"。因为存在这些 funky 边距，它们会将文本（如您所见）推​​到不需要的位置。

如前所述清理你的代码，也许把东西放到一个网格中，这样可以更好地锚定控件；并且不要仅在需要调整小空间时使用Margins或Paddings。