WPF 窗口最大化导致项目错位

Question

我已将我的 WPF 窗口设置为最大化，但是其中的项目（例如按钮和图像）有时会与窗口一起拉伸，甚至位置错位。

<Window x:Class="HelloApp.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="HelloApp" Height="661.842" Width="1105.263"
    WindowStyle="None" ResizeMode="NoResize"  
    WindowStartupLocation="CenterScreen" WindowState="Maximized">
    <Grid Background="#FFF3F3F3" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Height="Auto" Width="Auto">
        <Label Content="Hello" HorizontalAlignment="Left" Margin="20,48,0,0" VerticalAlignment="Top" FontSize="36" FontFamily="Segoe UI Light"/>
        <Image Margin="49,7,994,593" Source="Infinite_symbol__128.png"/>
        <Button x:Name="exitBtn" Content="" HorizontalAlignment="Left" Margin="1042.148,9.606,0,0" VerticalAlignment="Top" Width="52.852" Height="51" BorderBrush="{x:Null}" Click="exitBtn_Click">
            <Button.Background>
                <ImageBrush ImageSource="close33 (2).png"/>
            </Button.Background>
        </Button>
    </Grid>
</Window>

例如，如果按钮 X 在我启动程序时位于编辑器的左上角，它将保留在编辑器的左上角，但是最大化时实际的左上角会相距更远。

我希望你明白我的意思。我希望我的孩子项目与父母一起最大化。如何编辑我的代码来完成这项工作？

Answer 1

您可以根据所需的布局定义特定的Grid.RowDefinitions 和Grid.ColumnDefinitions，而不是Margins。例如下面的 Xaml

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <Button Grid.Row="0" Grid.Column="0" Content="TopLeft"/>
    <Button Grid.Row="0" Grid.Column="2" Content="TopRight"/>
    <Canvas Grid.Row="1" Grid.Column="1"/>
    <Button  Grid.Row="2" Grid.Column="0" Content="BottomLeft" />
    <Button  Grid.Row="2" Grid.Column="2" Content="BottomRight" />
</Grid>

以这种方式划分您的窗口：

在上述 Xaml 中，Auto 表示“单元格内容的大小”，* 表示“剩余区域的大小”。

Answer 2

当你使用Grid 作为窗口的主容器时，不要像width 那样修改它的属性，或者......它保持网格适合窗口。然后单击每个元素并尝试在Xaml Designer 的Grid 边框上使用其锚点，例如chain。

例如，我通过在close 模式下设置right chain 符号和top chain 符号来将您的按钮放在右上角，并且我opened 其他chains。

   <Grid Background="#FFF3F3F3">
        <Label Content="Hello" HorizontalAlignment="Left" Margin="20,48,0,0" VerticalAlignment="Top" FontSize="36" FontFamily="Segoe UI Light"/>
        <Image  Source="Infinite_symbol__128.png" Margin="113,0,0,0"/>
        <Button x:Name="exitBtn" Content="Test"
                HorizontalAlignment="Right" VerticalAlignment="Top"
                Margin="0,10,0,0"  Width="65" Height="51" BorderBrush="{x:Null}" Click="exitBtn_Click">
            <Button.Background>
                <ImageBrush ImageSource="close33 (2).png"/>
            </Button.Background>
        </Button>
    </Grid>

其他方法是使用columns 和rows 以获得更好的布局，但即使您使用列和行，您也必须在单元格内设置元素的anchor points。这是将元素保持在理想位置的安全方法。