WPF 控件是不是可以以其父控件为中心，但也可以仅使用 xaml 尊重其兄弟控件的位置？

Posted 2023-04-12

【中文标题】WPF 控件是不是可以以其父控件为中心，但也可以仅使用 xaml 尊重其兄弟控件的位置？

【英文标题】：Can a WPF control be centered around its parent but also respect the position of its sibling control using xaml only?WPF 控件是否可以以其父控件为中心，但也可以仅使用 xaml 尊重其兄弟控件的位置？

【发布时间】：2021-12-30 12:26:54

【问题描述】：

我正在尝试在 xaml 屏幕上相对于整个屏幕将模态弹出式控件居中，但如果控件为如此之大，两者会相交。这对于代码隐藏、数据绑定、数据触发器、自定义控件和其他不太优雅的方法是可行的，但是有没有办法只用 xaml 开箱即用地解决这个问题？

这是问题的一个大大简化的版本，它是一个带有两个矩形的窗口。橙色矩形始终为 200 像素。绿色矩形的大小是可变的，但从不大于 600 像素。我们可以让绿色矩形在屏幕上居中，除非它足够宽以至于它会与橙色矩形发生碰撞，在这种情况下绿色矩形被布置在橙色矩形的右侧（就像一个堆栈面板）？绿色和橙色的矩形可以放入您想要的任何容器中，并且容器可以以您想要的任何方式嵌套。

<Window x:Class="WpfApp1.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:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid Width="800">

            <Rectangle Width="200" Fill="Orange" HorizontalAlignment="Left" ></Rectangle>
            <Rectangle Width="300" Fill="Green" HorizontalAlignment="Center"></Rectangle>
    </Grid>
           
</Window>

【问题讨论】：

如果绿色矩形是可变大小的，在600px以下如何确定它的大小？在您的示例中，绿色矩形的大小是恒定的

在现实世界的例子中，绿色矩形是一个可变大小的弹出窗口，所以当弹出窗口布局在控件中时，它的大小会发生变化。对于带有矩形的玩具示例，如果绿色矩形的宽度值直接编辑为 0 到 600 之间的任何数字，我希望它能够正确布局，但您也可以假装宽度具有与 a 的数据绑定实现 INotifyPropertyChanged 的​​视图模型

【参考方案1】：

没有内置的方法可以做到这一点，但这种方法很有效并且相当简单：

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition MinWidth="200"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Rectangle Width="200" Fill="Orange" HorizontalAlignment="Left" /> 
        <Rectangle Grid.Column="1" Width="300" Fill="Green" HorizontalAlignment="Center"/>
    </Grid>

如果你不想复制橙色矩形的宽度，你可以这样做：

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition MinWidth="Binding ElementName=OrangeRectangle, Path=ActualWidth"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Rectangle x:Name="OrangeRectangle" Width="200" Fill="Orange" HorizontalAlignment="Left" /> 
        <Rectangle Grid.Column="1" Width="300" Fill="Green" HorizontalAlignment="Center"/>
    </Grid>