Quick Tip #2 – Stretching the ItemContainter of ListView

Suppose you have a data template for a Listview. It so happens that the Grid does not fill the whole list view. Your content seems to be left aligned.

Solution: You  need to set the ItemContainerStyle for the ListView


<ListView x:Name="InviteLV" ItemsSource="{Binding}" HorizontalContentAlignment="Stretch">
<ListView.ItemTemplate>
<DataTemplate>
<Grid MinHeight="60" HorizontalAlignment="Stretch" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel HorizontalAlignment="Stretch" Margin="10,0,20,0">
<TextBlock Text="{Binding InviteName}" Foreground="Black" FontSize="26"/>
<TextBlock Text="{Binding InviteEmail}" Foreground="Black" FontSize="26"/>
</StackPanel>
<Button Grid.Column="1" BorderThickness="0" Width="50" Height="50" Margin="0">
<Button.Background>
<ImageBrush Stretch="Fill" ImageSource="Assets/Images/theme1_but_cancel_normal.png"/>
</Button.Background>
</Button>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>

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

</ListView>
<pre>
Advertisements