ListView Not Resizing in UWP

Question

I have a listview like this.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <ListView ItemsSource="{x:Bind announcements}" IsItemClickEnabled="True" ItemClick="Announcement_ItemClick">
        <ListView.ItemTemplate>
            <DataTemplate x:DataType="data:Announcement">
                <StackPanel Orientation="Horizontal" Margin="0,20,0,0">
                    <StackPanel Height="Auto" Orientation="Vertical" Width="Auto">
                        <TextBlock Text="{x:Bind dates}" FontWeight="Bold"/>
                        <TextBlock Height="Auto" Text="{x:Bind titles}" Margin="0,6,0,0" TextWrapping="WrapWholeWords"/>
                    </StackPanel>
                    <StackPanel VerticalAlignment="Center">
                        <SymbolIcon Symbol="Download" Margin="20,0,0,0" Visibility="{x:Bind visibility}"/>
                    </StackPanel>
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

The problem is if i have two stackpanels inside the main stackpanel the listview doesnt resize if the width changes. So i am not able to see the text in those textboxes.

But if i remove the stackpanel in which symbolicon is placed then resizing takes place. Code for the listview without second stackpanel.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <ListView ItemsSource="{x:Bind announcements}" IsItemClickEnabled="True" ItemClick="Announcement_ItemClick">
        <ListView.ItemTemplate>
            <DataTemplate x:DataType="data:Announcement">
                    <StackPanel Height="Auto" Margin="0,20,0,0" Orientation="Vertical" Width="Auto">
                        <TextBlock Text="{x:Bind dates}" FontWeight="Bold"/>
                        <TextBlock Height="Auto" Text="{x:Bind titles}" Margin="0,6,0,0" TextWrapping="WrapWholeWords"/>
                    </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

Is it possible to make the text in the textboxes get wrapped also with the download icon in my second stackpanel displayed. I want the download icon only in the right hand side of the item. Is there any way to acheive this? Sorry for the long Question.

Answer 1

The problem comes from your first horizontal stack panel. It basically says layout the children controls without any limit on the right so it will size itself to fit your "long"texts. You can restrict this by using a more "strict" layout that will limit your items width to the listview width.

Instead of using the flexible StackPanel, you can use a Grid to force the children controls to remains within the parent bounds.

<ListView.ItemTemplate>
 <DataTemplate x:DataType="local:Announcement">

 <Grid Margin="0,20,0,0" >**
   <Grid.ColumnDefinitions>
     <ColumnDefinition Width="*" />
     <ColumnDefinition Width="Auto" />
   </Grid.ColumnDefinitions>

   <StackPanel Height="Auto" Orientation="Vertical" Width="Auto">
     <TextBlock Text="{x:Bind dates}" FontWeight="Bold"/>
     <TextBlock Height="Auto" Text="{x:Bind titles}" Margin="0,6,0,0" TextWrapping="WrapWholeWords"/>
   </StackPanel>

   <StackPanel VerticalAlignment="Center" Grid.Column="1">
     <SymbolIcon Symbol="Download" Margin="20,0,0,0" Visibility="{x:Bind visibility}"/>
   </StackPanel>
 </Grid>
</DataTemplate>
</ListView.ItemTemplate>

This will give you the following:

You can also force your download buttons to align to the right by changing the ItemContainerStyle. We request the list view items to stretch within the list view. The default is to left align.

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

Answer 2

Try replace StackPanel to Grid

<Grid Margin="0,20,0,0">
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>

    <Grid Grid.Column="0">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <TextBlock Text="{x:Bind dates}"
                    FontWeight="Bold"/>
        <TextBlock Grid.Row="1"
                    Height="Auto"
                    Text="{x:Bind titles}"
                    Margin="0,6,0,0"
                    TextWrapping="WrapWholeWords"/>
    </Grid>

    <SymbolIcon Symbol="Download" 
                Margin="20,0,0,0" 
                Grid.Column="1"
                Visibility="{x:Bind visibility}"/>
</Grid>