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

Question

I have the Problem, that my first red rectangular (see 1st third in picture) does not have the height of the ListViewItem, whereas the second one with the larger text has the same size. Also, there is a margin to the left, which was not defined by myself. A similar scenario seems to appear with a button, where the blue line doesn't fill the whole height of the button (2nd third in the picture).

What I Want to achieve is something like the green rectangular (3rd third in picture). Without a margin to the left, filling the whole possible height. I also leave my XAML code here and of yourse my thanks in advance.

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

If I understand the requirements correctly, you could use Border to achieve what you want.

<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>

If you want to completely eliminate the space between the border stroke and your controls you can play around with Margins. For example, try

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