WPF 自定义控件控件未对齐

如何解决WPF 自定义控件控件未对齐

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

但是，在实际的应用程序中，我看到了这一点：

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

用户控制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"
    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"
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                Source="/icons/rules.png"
                Stretch="Uniform"
                StretchDirection="Both" />
            <TextBlock
                x:Name="lblName"
                Width="256"
                Height="56"
                Margin="324,89,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"
                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"
                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"
                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,184"
                FontFamily="Bahnschrift Condensed"
                FontSize="36"
                Foreground="White"
                Text="50"
                TextAlignment="Center"
                textwrapping="Wrap" />
            <ProgressBar
                x:Name="SecondBar"
                Grid.Row="1"
                Margin="128,185"
                Foreground="#FFFF4545"
                LargeChange="0"
                SmallChange="1"
                Value="50" />
            <TextBlock
                x:Name="lblThird"
                Grid.Row="1"
                Margin="32,284,109"
                FontFamily="Bahnschrift Condensed"
                FontSize="36"
                Foreground="White"
                Text="50"
                TextAlignment="Center"
                textwrapping="Wrap" />
            <ProgressBar
                x:Name="ThirdBar"
                Grid.Row="1"
                Margin="128,286,108"
                Foreground="#FF49DFE6"
                LargeChange="0"
                SmallChange="1"
                Value="50" />
            <TextBlock
                x:Name="lblFourth"
                Grid.Row="1"
                Margin="32,358,34"
                FontFamily="Bahnschrift Condensed"
                FontSize="36"
                Foreground="White"
                Text="50"
                TextAlignment="Center"
                textwrapping="Wrap" />
            <ProgressBar
                x:Name="FourthBar"
                Grid.Row="1"
                Margin="128,35"
                Foreground="#FFDCB752"
                LargeChange="0"
                SmallChange="1"
                Value="50" />

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

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

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

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

我是 WPF 新手，所以请使用 ELI5。

我无法提交问题，因为代码太多而文本不够，所以我只指出卡片是一张图像（我不想分享因为我画了它），但是如果您需要布局参考，请检查 this。

解决方法

您需要删除所有超过 20 像素的边距，例如 Margin="32,134,498,259"。由于这些时髦边距存在，它们会将文本（如您所见）推​​入不需要的位置。

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