为什么我的 WPF 矩形控件没有填满 StackPanel 的所有空白空间？

Question

在转到UWP 之前学习WPF 的基本概念。在我的 WPF 项目中遵循 XAML 显示如下窗口。

我试图在StackPanel 的右侧显示Rectangle 和Button，并且需要Rectangle（不是按钮）控件来自动填充StackPanel。

我尝试了没有 Width 属性但没有 Width 属性的 HorizontalAlignment="Stretch"，整个矩形缩小到 0 宽度。不想硬编码宽度值（如果可能），以便应用程序的窗口根据它所在的设备（屏幕分辨率）自行调整。但是，如果使用硬编码的宽度值仍然可以实现这种情况，请也告诉我这种方法。

窗口：

XAML：

备注：我认为ListBox 没有起到任何作用（与这篇文章有关）。只有ListBox 上方ListItemsControl 内的控件可能需要适当调整。但我可能错了。

<Window x:Class="WPFProject.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow"
        Height="376"
        Width="337">
    <Grid>
        <ItemsControl>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" Height="10">
                <Rectangle x:Name="myRectangle" Fill="#FFF4F4F5" HorizontalAlignment="Right" Height="9" Margin="0,0,0,0" Stroke="Black" VerticalAlignment="Top" Width="100"  RenderTransformOrigin="0.533,0.6"/>
                <Button Content="&#xE1FD;" HorizontalAlignment="Right" Height="10" VerticalAlignment="Top" FontSize="5" FontWeight="Bold"/>
            </StackPanel>
        </ItemsControl>
        <ListBox HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,11,0,81" ScrollViewer.HorizontalScrollBarVisibility="Disabled" x:Name="myList" SelectionChanged="myList_ContextMenuClosing">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel IsItemsHost="True" Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Rectangle Fill="{Binding FirstName}" ToolTip="{Binding FullName}" Width="20" Height="20" Stroke="#FF211E1E" OpacityMask="Black" StrokeThickness="1" />
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <Button x:Name="btnTest" Content="Test" HorizontalAlignment="Left" Margin="250,298,0,0" VerticalAlignment="Top" Width="75" Click="BtnTest_Click"/>
    </Grid>
</Window>

Answer 1

这里有两件事：

1. 当您使用水平方向的 Stackpanel 时，无法使用 horizontalalingment="stretch"。这是因为所有元素都按照设计的宽度堆叠。

2. 您正在为矩形指定一个固定的width 100。如果您这样做，即使您使用stretch 进行对齐，它也不会再拉伸。此外，horizontalalingment="stretch" 需要放置在您希望拉伸的元素上，而不是面板上。

对于这样的事情，请改用DockPanel或Grid。 在此处阅读有关 WPF 面板的更多信息： https://wpf-tutorial.com/panels/introduction-to-wpf-panels/

这是Grid 的示例：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <Rectangle x:Name="myRectangle" Fill="#FFF4F4F5" HorizontalAlignment="Stretch" Height="9" Margin="0,0,0,0" 
            Stroke="Black" VerticalAlignment="Top"  RenderTransformOrigin="0.533,0.6" Grid.Row="0"/>
    <Button Content="&#xE1FD;" HorizontalAlignment="Right" Height="10" VerticalAlignment="Top" FontSize="5" FontWeight="Bold" Grid.Column="1"/>
</Grid>

注意width="*" 属性意味着单元格将使用所有剩余空间。如果您有多个使用* 定义的行/列，则空间将在它们之间划分。

Answer 2

堆栈面板就像一堆东西一个接一个地放置。它可以是水平的或垂直的。与 Grid 不同，您无法访问堆栈面板中的特定位置，每个下一个元素将按顺序依次放置。对于您的要求，StackPanel 不适合，除非您需要水平滚动。你应该试试DockPanel 或Grid，而不是像

           <Grid   Height="10">                
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="auto"/>
                </Grid.ColumnDefinitions>
                <!--first column of grid-->
                <Rectangle Grid.Column="0" x:Name="myRectangle" Fill="#FFF4F4F5"  Height="9" Margin="0,0,0,0" Stroke="Black" VerticalAlignment="Top"   RenderTransformOrigin="0.533,0.6"/>
                <!--second column of grid-->
                <Button Grid.Column="1" Content="&#xE1FD;" HorizontalAlignment="Right" Height="10" VerticalAlignment="Top" FontSize="5" FontWeight="Bold"/>
            </Grid>