XAML: ListViewItem 中的 StackPanel/GridView 没有占用 ListViewItem 的整个 space

Question

我遇到了问题，我的第一个红色矩形（参见图片中的第一个三分之一）没有 ListViewItem 的高度，而第二个具有较大文本的矩形具有相同的大小。另外，左边有一个边距，这不是我自己定义的。类似的情况似乎出现在一个按钮上，其中蓝线没有填满按钮的整个高度（图片中的第二个三分之一）。

我想要实现的是绿色矩形（图片中的第三个）。左边没有边距，填充整个可能的高度。我也在这里留下我的 XAML 代码，在此先感谢你们。

Picture showing the problem

<Page
    x:Class="Testprojekt.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Testprojekt"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="1*"/>
        </Grid.ColumnDefinitions>

        <ListView Grid.Column="0">
            <ListViewItem>
                <StackPanel Orientation="Horizontal">
                    <Rectangle Fill="Red" Width="5"/>
                    <TextBlock Text="red"/>
                </StackPanel>
            </ListViewItem>
            <ListViewItem>
                <StackPanel Orientation="Horizontal">
                    <Rectangle Fill="Red" Width="5"/>
                    <TextBlock Text="red"
                               FontSize="36"/>
                </StackPanel>
            </ListViewItem>
        </ListView>

        <Button Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalContentAlignment="Left" VerticalContentAlignment="Top">
            <StackPanel Orientation="Horizontal">
                <Rectangle Fill="Blue" Width="5"/>
                <TextBlock Text="blue"/>
            </StackPanel>
        </Button>

        <StackPanel Orientation="Horizontal"
                    Grid.Column="2">
            <Rectangle Fill="Green" Width="5"/>
            <TextBlock Text="green"/>
        </StackPanel>



    </Grid>
</Page>

Answer 1

如果我理解正确的话，你可以使用 Border 来实现你想要的。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*"/>
        <ColumnDefinition Width="1*"/>
        <ColumnDefinition Width="1*"/>
    </Grid.ColumnDefinitions>

    <Border Grid.Column="0" BorderBrush="Red" BorderThickness="5, 0, 0, 0" >
        <ListView>
            <TextBlock Text="red"/>
            <TextBlock Text="red"/>
            <TextBlock Text="red"/>
        </ListView>
    </Border>

    <Border Grid.Column="1" BorderBrush="Blue" BorderThickness="5, 0, 0, 0" >
        <Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalContentAlignment="Left" VerticalContentAlignment="Top">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="blue"/>
            </StackPanel>
        </Button>
    </Border>

    <Border Grid.Column="2" BorderBrush="Green" BorderThickness="5, 0, 0, 0" >
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="green"/>
        </StackPanel>
    </Border>
</Grid>

如果您想完全消除边框笔划和控件之间的 space，您可以使用 Margins。例如，尝试

<ListView Margin="-10, 0, 0, 0">

XAML: ListViewItem 中的 StackPanel/GridView 没有占用 ListViewItem 的整个 space

XAML: StackPanel/GridView in ListViewItem does not take the whole space of the ListViewItem

xaml

listview

margin

stackpanel