为什么我的 WPF Rectangle 控件没有填充 StackPanel 的所有空白 space？

Question

学习 WPF 的基本概念，然后再转到 UWP。在我的 WPF 项目中跟随 XAML 显示如下 windows。

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

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

Window:

XAML:

备注：我认为ListBox没有起到任何作用（与此post有关）。只有 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

这里有两件事：

水平方向使用Stackpanel时，horizontalalingment="stretch"无法使用。这是因为所有元素都按照设计的宽度堆叠。
您正在为您的矩形指定一个固定的 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="*" 属性意味着单元格将使用所有剩余的 space。如果用 * 定义了多个 rows/columsn，则 space 将在它们之间分配。

Answer 2

堆叠面板就像一堆东西一个接一个地放置。它可以是水平的或垂直的。与 Grid 不同，您无法访问堆栈面板中的特定位置，每个下一个元素都将在 sequence.For 中一个接一个地放置，除非您需要水平滚动，否则 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>

为什么我的 WPF Rectangle 控件没有填充 StackPanel 的所有空白 space？

Why my WPF Rectangle control is not filling all the empty space of StackPanel?

wpf

xaml

stackpanel