WPF Window 最大化导致项目错放

Question

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

<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>

例如，如果 Button 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>

这样划分你的window：

在上面的Xaml中，Auto表示"size to cell content"，*表示"size to remaining area"。

Answer 2

当您使用 Grid 作为 window 的主要容器时，不要像 width 那样修改它的属性，或者...它会保持网格适合 window .然后单击每个元素并尝试在 Xaml Designer.

的 Grid 边框上使用其锚点，例如 chain

例如，我通过在 close 模式下设置 right chain 符号和 top chain 符号将你的按钮放在右上角，我 opened 其他 [=其中 20=]。

   <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。这是将元素保持在理想位置的安全方法。

WPF Window 最大化导致项目错放

WPF Window Maximized causes Items to be misplaced

c#

wpf

wpf-controls

expression-blend