为什么我运行程序时 WPF 会剪切组件

Question

我正在做一个 WPF 程序，带有一些文本框、标签和按钮。 使用 XAML 设计器，它工作正常，组件按应有的方式显示。但是当我运行程序时，窗口似乎变短并在侧面切割了一些组件。

为什么只有在我运行程序时才会剪切组件（按钮和标签）？

这是 2 个受影响组件的 Xaml 代码：

<Window x:Class="XML_Edit.MainWindow"
    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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:XML_Edit"
    mc:Ignorable="d"
    Title="XML_Edit" Height="380" Width="470" ResizeMode="NoResize" Icon="Imagenes/xml.png">

<Window.Resources>
    <Style TargetType="{x:Type Button}">
        <Style.Resources>
            <Style TargetType="{x:Type Border}">
                <Setter Property="CornerRadius" Value="4" />
            </Style>
        </Style.Resources>
    </Style>

    <Style TargetType="{x:Type TextBox}">
        <Style.Resources>
            <Style TargetType="{x:Type Border}">
                <Setter Property="CornerRadius" Value="4" />
            </Style>
        </Style.Resources>
    </Style>

</Window.Resources>

<Grid Background="#FF363944">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="49*"/>
        <ColumnDefinition Width="183*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="15"/>
        <RowDefinition Height="80"/>
        <RowDefinition Height="80"/>
        <RowDefinition Height="45"/>
        <RowDefinition Height="50*"/>
    </Grid.RowDefinitions>

    <!-- Components -->
    <Button Name="btCambiarContenido" Grid.Row="4" Content="Cambiar Contenido" VerticalAlignment="Center" HorizontalAlignment="Left" VerticalContentAlignment="Center" Margin="26,80,0,16" Height="36" Width="135" Click="BtCambiarContenido_Click" TabIndex="5" Background="{x:Null}" BorderBrush="#FF4EB8CE" FontSize="14" Grid.ColumnSpan="2" Foreground="#FF4EB8CE"/>

    <Label Name="lbSeleccionarRuta" Grid.Row="1" ToolTip="Seleccionar archivo" Height="32" Width="32" Margin="293.333,32,41,16" MouseDown="LbSeleccionarRuta_MouseDown" Grid.Column="1">
        <Label.Style>
            <Style TargetType="Label">
                <Setter Property="Background">
                    <Setter.Value>
                        <ImageBrush ImageSource="Imagenes/folder_azul.png"/>
                    </Setter.Value>
                </Setter>
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background">
                            <Setter.Value>
                                <ImageBrush ImageSource="Imagenes/folder_gris.png"/>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Label.Style>
    </Label>
</Grid>

它们在 WPF 编辑器中显示良好：

但是当我运行程序时，他们感到很沮丧：

Answer 1

您将 Button 高度设置为 36 像素，并为其设置 26,80,0,16 的边距。这实际上是在告诉布局管理器您希望保留 36+80+16=132 像素以容纳第 4 行中的该按钮。

同时，在您的网格布局中，您将第 0-3 行指定为保留 15+80+80+45 像素。结合您为按钮保留的 132，即 352。但您还明确将窗口高度设置为 380，这不仅要适应 352 客户区像素，还要适应边框和标题（作为实验集你的WindowStyle 到None 删除边框和标题栏，你会看到你的完全控制再次出现）。布局管理器必须在某处剪切像素，并且由于第 4 行是您指定的唯一一个带有“*”的像素，这就是它们被剪切的位置，因此按钮的顶部和底部也会被剪切。您在设计器中没有看到这一点的原因是因为它使用了与您的操作系统不同的主题，这考虑到了屏幕 DPI、Windows 主题设置、可访问性和其他一些事情；设计器中的标题栏只是小了一点。

此类问题是您必须小心在 WPF 中进行显式像素布局的众多原因之一，也是您必须特别小心边距的原因之一。