两个框的边距不正确

Question

所以我有两个盒子，这里的目标是让两个盒子与 window 的边缘有完全相同的边距。不幸的是，在 WPF 中，您只能从左侧获得边距，而不是两者，所以为了确保这一点，我有以下公式；

The margin of the second box is equal to the window width minus the margin of the first box minus the size of the box.

这可以用数学来支持，它确实有效。所以我确实让我的程序解决了这个问题，因为它是反应性的。所以现在我有了这张图片：

WPF Window

中间的文字是为了证明这个计算是正确的。（如你所知，每个框的宽度为 500 像素）因此，第一个数字是第一个框的边距。第二个是第二个的边距，最后一个是window大小。计算一下，你有这个等式：

(1936 - 88) - 500 = 1348

这确实有效，但是，如果您查看图像，右侧的框比左侧的框更靠近边缘一点。如果您调整它的大小，也会发生这种情况，而不仅仅是最大化时。怎么了，我该如何解决？

这是我的 XAML 代码：

<Window x:Class="Horizon_Chat.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:Horizon_Chat"
        xmlns:i="clr-namespace:Horizon_Chat"
        i:WindowEx.ShowIcon = "false"
        mc:Ignorable="d"
        Title="Horizon Chat" Height="900" Width="1280" WindowStartupLocation="CenterScreen" MinWidth="600" MinHeight="600" WindowState="Maximized">
    <Grid>
        <TextBlock x:Name="welcomeTitleText" HorizontalAlignment="Center" Margin="0,-200,0,0" TextWrapping="Wrap" Text="Hello Camden!" VerticalAlignment="Center" FontFamily="Muli" FontSize="60"/>
        <Border x:Name="topBorder" BorderBrush="#FF646464" BorderThickness="0,0,0,4" HorizontalAlignment="Left" Height="41" VerticalAlignment="Top" Width="1273" Margin="0,32,0,0"/>
        <Ellipse Fill="#FF30B44E" HorizontalAlignment="Left" Height="50" Margin="10,10,0,0" Stroke="Black" VerticalAlignment="Top" Width="50" StrokeThickness="3"/>
        <Border x:Name="chatsBox" BorderBrush="Black" BorderThickness="3" HorizontalAlignment="Left" Height="250" Margin="58,594,0,0" VerticalAlignment="Top" Width="500"/>
        <Border x:Name="friendsBox" BorderBrush="Black" BorderThickness="3" HorizontalAlignment="Left" Height="250" Margin="724,594,0,0" VerticalAlignment="Top" Width="500"/>
    </Grid>
</Window>

Answer 1

您要找的是网格，将 ColumnDefinition Widths 设置为您的矩形宽度 + 您想要的边距。用于中间Column的Width的*表示"Fill up the available space"。 Margin参数设置为(Left, Top, Right, Bottom)。这允许您指定右手 Margin.

<Window x:Class="ForWhosebug.MainWindow"
    ...
    xmlns:local="clr-namespace:ForWhosebug"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100" />
            <ColumnDefinition />
            <ColumnDefinition Width="100" />
        </Grid.ColumnDefinitions>

        <Rectangle Margin="15 0 0 0" 
                   StrokeThickness="5" 
                   Stroke="Black"
                   Height="80"
                   Grid.Column="0"/>

        <Rectangle Margin="0 0 15 0" 
                   StrokeThickness="5" 
                   Stroke="Black"
                   Height="80"
                   Grid.Column="2"/>
    </Grid>
</Window>

两个框的边距不正确

Margin for Two Boxes Isn't Correct

c#

wpf

margins