Question

我想让下面的“卡通”与右边和黄色部分对齐，以填充我的ListBox项目中间的所有空间。

然而，我所能得到的只是：

这是我的布局xaml：

<Window x:Class="Cartoons.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        Title="Cartoons" Height="350" Width="525" SizeToContent="Width">       

    <DockPanel x:Name="mainPanel">
        <Border Background="Green" DockPanel.Dock="Bottom" Width="Auto" Height="Auto">
            <Grid Margin="2" Height="Auto">
                <ListBox Name="listBoxCartoons" SelectionChanged="ListBox_SelectionChanged">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <DockPanel HorizontalAlignment="Stretch" Background="PowderBlue">
                                <DockPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="AliceBlue" DockPanel.Dock="Left" >
                                    <Image Source="<IMAGE_LOCATION>" Width="64" Height="64" Stretch="Fill"/>
                                </DockPanel>
                                <DockPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="AliceBlue" DockPanel.Dock="Right">
                                    <TextBlock Text="Cartoon" VerticalAlignment="Center"/>
                                </DockPanel>
                                <DockPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Yellow">
                                    <StackPanel Orientation="Vertical" VerticalAlignment="Center">
                                        <TextBlock Text="Character 1"/>
                                        <TextBlock Text="Walt Disney"/>
                                        <TextBlock Text="Speedy Gonzales"/>
                                    </StackPanel>
                                </DockPanel>
                            </DockPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate> 
                </ListBox>    
            </Grid>
        </Border>
    </DockPanel>
</Window>

我尝试了很多东西，但无论我做什么，它都显示在右侧有大的空白区域。

非常感谢，

Answer 1

如果你没有避免硬编码，比如边距，你可以试试这个（在Visual Studio中测试以方便你）：

<Border Background="Green" DockPanel.Dock="Bottom" Width="Auto" Height="Auto">
    <Grid Margin="2" Height="Auto">
        <ListBox Name="listBoxCartoons" SelectionChanged="ListBox_SelectionChanged">
            <ListBoxItem>
                <!-- Width of the below element may have to be adjusted -->
                <Grid HorizontalAlignment="Stretch" Width="499">
                    <Image Source="<IMAGE_LOCATION>" Width="64" Height="64" Stretch="Fill" HorizontalAlignment="Left"/>
                    <!-- Margin of the below element may have to be adjusted -->
                    <StackPanel Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Stretch" Background="Yellow" Margin="69,8,0,8">
                        <TextBlock Text="Character 1"/>
                        <TextBlock Text="Walt Disney"/>
                        <TextBlock Text="Speedy Gonzales"/>
                    </StackPanel>
                    <Label Background="AliceBlue" Content="Cartoon" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" HorizontalAlignment="Right"/>
                </Grid>
            </ListBoxItem>
        </ListBox>
    </Grid>
</Border>

此外，XAML底部附近有一个额外的附近。

Answer 2

问题是UITableViewCell会为每个项目生成容器元素（类型为let cell = tableView.cellForRowAtIndexPath(indexPath) self.performSegueWithIdentifier("childrenToAttendance", sender: cell)） - 默认情况下，这些元素会将内容对齐到左侧。要更改它，请将其添加到ListBox：

ListBoxItem

Answer 3

我明白了。

需要在ListBox上设置HorizontalContentAlignment =“Stretch”。这解决了这个问题。只需修改上面的行

<ListBox Name="listBoxCartoons" SelectionChanged="ListBox_SelectionChanged">

到

<ListBox Name="listBoxCartoons" HorizontalContentAlignment="Stretch" SelectionChanged="ListBox_SelectionChanged">

并且有效。

WPF应用程序布局 - 使ListPanel填充ListBox的空间

3 个答案: