[UWP][XAML] ListView child item not using full width

Question

I'm trying to display a list of bound items. I've customized the datatemplate to be a grid and I want the right column (that has a fixed width) to stick to the right side of the screen, and the 1st column I want to fill the remaining space. Normally this works fine, but when I put this grid inside a ListView, the behavior seems to change. Below is my ListView code:

<ListView x:Name="LView" Background="Green" Width="{Binding ElementName=ExtPropPage, Path=Width}" ItemsSource="{Binding CurrentSensor.ExtendedProperties, Mode=TwoWay}" Margin="5" HorizontalAlignment="Stretch" VerticalAlignment="Center">
            <ListView.ItemTemplate>
                <DataTemplate >
                    <Grid Background="BlueViolet" Width="{Binding ElementName=LView, Path=Width}" HorizontalAlignment="Center" >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="100"/>
                        </Grid.ColumnDefinitions>
                        <Grid Grid.Column="0" Background="Blue" HorizontalAlignment="Stretch">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <TextBlock Grid.Row="0" FontWeight="Bold" FontSize="12" Text="{Binding KeyId, Mode=TwoWay, Converter={StaticResource ExtPropConverter}}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            <TextBlock Grid.Row="1" FontWeight="Normal" FontSize="10" Text="{Binding JsonValue, Mode=TwoWay}" TextWrapping="Wrap" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Grid>
                        <StackPanel Grid.Column="1" Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Right" BorderBrush="{x:Null}" Background="Red">
                            <Button DataContext="{Binding}" ToolTipService.ToolTip="Edit" Click="ButtonHandler" BorderBrush="DarkGray" FontFamily="Segoe MDL2 Assets" Content="&#xE70F;" Style="{StaticResource CircleButtonStyle}">

                            </Button>
                            <Button x:Name="DeviceCancelButton" ToolTipService.ToolTip="Delete" view:EventHandlers.Attach="Click" Click="DeleteExtProp" BorderBrush="DarkGray" FontFamily="Segoe MDL2 Assets" Content="&#xE74D;" Style="{StaticResource CircleButtonStyle}">

                            </Button>
                        </StackPanel>


                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>

        </ListView>

I've put colors on the background of several of the elements to get a better idea of where one control's bounds are versus another's. What I can see so far is that the ListView expands to fill the whole screen width, which is great, but when it comes to the items in the list view (grids), the items in column 1 are varying in length (when more than 1 item is populated), and it seems the grid's use of space is depending on the width of the objects within them, rather than relying on the fact that I've used Width="*" which should be telling the column to expand and fill available space, regardless of what is in the column itself.

I've done lots of searching and found answer after answer pertaining to the use of HorizontalAlignment="Stretch" and either I'm using it in the wrong places or I'm missing something else all together.

Note: The code above is not necessarily indicative of being the only solution I've tried, the varying attempts at adjusting widths and alignments would make this post huge, so hopefully someone has an answer that is not something I've tried that results in no success.

Thanks for the help.

P.S. As an additional bonus to any answer, I'd like to override the "OnMouseOver" property to stop the changing of the background when I hover over the listviewitem. I don't need anything special to happen when I'm hovering over these.

Answer 1

A friend helped me find this which means this question is now a duplicate since it's the same thing:

ListViewItem won't stretch to the width of a ListView

Just for clarity though, here was the takeaway code that solved my problem:

<ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        </Style>
</ListView.ItemContainerStyle>

Answer 2

I was just attempting to get my ListView to stretch properly and found this answer. I'm using Visual Studio 2017 and working on a UWA (Universal Windows App) project.

I'm altering the default Grid element which was added by the project template and I couldn't get the ListView to stretch when it was added as a grid row / column.

I finally stumbled upon the XAML you can add directly to the ListView element:

HorizontalAlignment="Stretch" VerticalAlignment="Stretch"

It works great as you can see: