Question

在学习WPF之前，先学习UWP的基本概念。在我的WPF项目中，紧随XAML之后的窗口显示如下。

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

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

窗口：

XAML ：

备注：我认为ListBox没有扮演任何角色（与这篇文章相关）。只有ListItemsControl上方ListBox内部的控件可能需要适当调整。但是我可能是错的。

<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"。这是因为所有元素都按照其设计宽度进行堆叠。
您要为矩形指定100的固定width。如果这样做，即使使用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>

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

2 个答案: