为什么应用程序在启动后看起来与在设计器中看起来不同？

Question

我有一个小问题。我是 WPF 的新手，我发生了一件奇怪的事情。在设计器中一切看起来都很好，但是当我启动应用程序时，一块 , 切断了"(via.photo) 并且看起来很糟糕。可能是应用程序没有响应？

我的XAML代码：

<TabItem Header="TabItem" 
                 Visibility="Hidden" 
                 x:Name="Home_Page" 
                 Background="{x:Null}" 
                 BorderBrush="{x:Null}" Height="Auto"
                 Width="Auto"
                 >

            <Border 
                Background="Black"
                HorizontalAlignment="Center"
                VerticalAlignment="Center" 
                Width="1340" 
                Height="1100"
                CornerRadius="20"
                >
                <Border
                    Background="White" 
                    CornerRadius="20"
                    Height="700"
                    Width="500"
                    Margin="0" HorizontalAlignment="Center" VerticalAlignment="Center"
                   
                    >
                    <Grid 
                        
                        >
                        <TextBlock
                            Text="Welcome"
                            Width="200"
                            Height="200"
                            Foreground="Black"
                            FontSize="50" FontFamily="/Peel_App;component/Fonts/#Kashima Brush Demo"
                            
                            >

                        </TextBlock>

                    </Grid>

                </Border>

            </Border>

        </TabItem>

在我编辑应用之后：

Answer 1

您的代码有几个问题：

您正在对 Margin 值进行硬编码以定位您的控件。相反，您应该使用适当的面板（DockPanel、WrapPanel 和 Grid）。使用Margin属性设置margin，不是position.
使用 HorizontalAlignment 和 VerticalAlignment 属性来定位您的元素，因此您的 UI 会更灵敏并且 user-friendly.
为了能够查看您的 window 及其内容的外观 - 尝试在 window 上设置 d:DesignHeght 和 d:DesignWidth 属性。尝试 Google 如何使用它们。

最后，您的代码应如下所示：

<TabItem Header="TabItem"
         Visibility="Hidden"
         x:Name="Home_Page"
         Background="{x:Null}"
         BorderBrush="{x:Null}"> <!-- Properties order is a bit confusing, it is better to order them by priority, or just alphabetically. -->
    <Border Background="Black">
        <Border Background="White"
                CornerRadius="20"
                Margin="0,0,93,118"> <!-- Should it have such values? Maybe just somenthing like Margin="0 0 90 120"? -->
            <Grid>
                <TextBlock Text="Welcome"
                           Foreground="Black"
                           FontSize="50" 
                           FontFamily="/Peel_App;component/Fonts/#Kashima Brush Demo"/>
            </Grid>
        </Border>
    </Border>
</TabItem>

为什么应用程序在启动后看起来与在设计器中看起来不同？

Why does the application look different after launching than in designer?

c#

oop

wpf

xaml

responsive-design