how to stretch listviewitem in listview

Question

developers.

I try to stretch listview item in horizontal orientation. I do reset ItemContainerStyle ,and the horizentalalignment is strech. Here is all code in the MainPage.xaml.

<Grid x:Name="rootGrid"
      HorizontalAlignment="Stretch"
      MinWidth="320"
      MaxWidth="480"
      Width="Auto">
    <ListView x:Name="infoFlowListView" 
              MinWidth="320"
              MaxWidth="480"
              Width="Auto"
              HorizontalAlignment="Stretch">
        <ListView.ItemTemplate>
            <DataTemplate>
                <local:MyUserControl1 MinWidth="300" HorizontalAlignment="Stretch"></local:MyUserControl1>
            </DataTemplate>
        </ListView.ItemTemplate>
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
            </Style>
        </ListView.ItemContainerStyle>
    </ListView>
</Grid>

Here is all code in MainPage.xaml.cs

public MainPage()
    {
        var items = new List<MyUserControl1>();
        for (int i = 0; i < 50; i++)
        {
            items.Add(new MyUserControl1());
        }
        this.InitializeComponent();
        infoFlowListView.ItemsSource = items;
    }

Here is all code in MyUserControl.xaml

<Grid>    
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"></ColumnDefinition>
    <ColumnDefinition Width="4*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
    <RowDefinition Height="Auto"></RowDefinition>
    <RowDefinition Height="*"></RowDefinition>
    <RowDefinition Height="Auto"></RowDefinition>
    <RowDefinition Height="8"></RowDefinition>
</Grid.RowDefinitions>

<Ellipse Width="60" Height="60"
         Grid.Column="0" Grid.Row="0" Grid.RowSpan="3"
         VerticalAlignment="Center" 
         HorizontalAlignment="Center" 
         Stretch="Uniform">
    <Ellipse.Fill>
        <ImageBrush ImageSource="Assets/1.png"></ImageBrush>
    </Ellipse.Fill>
</Ellipse>

<RelativePanel x:Name="topRelativePanel"
               Grid.Column="1" Grid.Row="0"
               HorizontalAlignment="Stretch">
    <TextBlock Text="TestName"
               VerticalAlignment="Bottom"
               RelativePanel.AlignLeftWithPanel="True"
               FontSize="12"
               HorizontalAlignment="Stretch"></TextBlock>
    <TextBlock Text="Author"
               VerticalAlignment="Bottom"
               RelativePanel.AlignRightWithPanel="True"
               FontSize="12"
               HorizontalAlignment="Stretch"
               Margin="0,0,8,0"></TextBlock>
</RelativePanel>

<TextBlock x:Name="nameTextBlock"
           Grid.Column="1" Grid.Row="1"
           Text="Name" 
           TextTrimming="WordEllipsis"
           VerticalAlignment="Stretch"
           HorizontalAlignment="Stretch"
           FontSize="18" >
</TextBlock>

<Grid x:Name="bottomGrid"
      Grid.Column="1" Grid.Row="2"
      VerticalAlignment="Top"
      HorizontalAlignment="Stretch">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="3*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <TextBlock Grid.Column="0"
               HorizontalAlignment="Stretch"
               Text="90"></TextBlock>
    <TextBlock Grid.Column="1"
               HorizontalAlignment="Stretch"
               Text="48"></TextBlock>
    <TextBlock Grid.Column="2"
               HorizontalAlignment="Stretch"
               Text="20170330 08:33"
               Margin="0,0,0,0"></TextBlock>
</Grid>

<Border Background="LightGray"
        VerticalAlignment="Stretch"
        HorizontalAlignment="Stretch"
        Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2"></Border>

I test these code on 6inch emulator, and I add a screenshot of this example.

And the mobile emulators don't have the same result. Here are different emulator screenshots. 4inch screen shot of example The right side of these screenshots are different.

Potsdam

You probably have problems in InfoListViewItemUserControl and you haven't submitted that code. The rest seems fine. – Nameplate

@IvanIčin I submitted xaml of usercontrol,would you please tell me where is the problem? Thanks a lot. – Potsdam

I think the answer below is correct, if you set the MaxWidth it invalidates Stretch alignement. – Nameplate

Could you please just provide a minimal reproducible example project? – Whelp

@SunteenWu-MSFT I don't know how to upload a project. So I copy all code of the example. – Potsdam

Answer 1

I try to stretch listview item in horizontal orientation.

You need to set the HorizontalContentAlignment property for the ListViewItem, not the HorizontalAlignment. With the following code the content of ListViewItem will stretch.

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

The default ListViewItem style and template doesn't open the HorizontalAlignment setter but HorizontalContentAlignment.

Whelp

That's my fault. Thanks a lot ,it is very helpful! – Potsdam

Answer 2

I think, this is because the ListView.ItemTemplate control have the MaxWidth="400" property.

Estimative

I removed the maxwidth of usercontrol, but listviewitem still can't stretch in horizental orientation. – Potsdam