UWP XAML Listview.Itemtemplate does not follow the column spacing defined in Listview.Headertemplate

Asked

Viewed 38 times

1

I’m writing an app with ListView defined below:

<ListView x:Name="TodosRecibos">
            <ListView.HeaderTemplate>
                <DataTemplate>
                    <Grid Padding="12" Background="Transparent">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="0.75*"/>
                            <ColumnDefinition Width="1.5*"/>
                            <ColumnDefinition Width="3.5*"/>
                            <ColumnDefinition Width="3.75*"/>
                            <ColumnDefinition Width="0.5*"/>
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="Recibo" Style="{ThemeResource BodyTextBlockStyle}" FontWeight="Bold"/>
                        <TextBlock Grid.Column="1" Text="Data" Style="{ThemeResource BodyTextBlockStyle}" FontWeight="Bold"/>
                        <TextBlock Grid.Column="2" Text="Tomador" Style="{ThemeResource BodyTextBlockStyle}" FontWeight="Bold"/>
                        <TextBlock Grid.Column="3" Text="Serviço" Style="{ThemeResource BodyTextBlockStyle}" FontWeight="Bold"/>
                        <TextBlock Grid.Column="4" Text="Valor" Style="{ThemeResource BodyTextBlockStyle}" FontWeight="Bold"/>
                    </Grid>
                </DataTemplate>
            </ListView.HeaderTemplate>
            <ListView.ItemTemplate>
                <DataTemplate x:Name="ListaRecibos" x:DataType="data:Recibo">
                    <Grid Height="48" AutomationProperties.Name="{x:Bind ReciboId}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="0.75*"/>
                            <ColumnDefinition Width="1.5*"/>
                            <ColumnDefinition Width="3.5*"/>
                            <ColumnDefinition Width="3.75*"/>
                            <ColumnDefinition Width="0.5*"/>
                        </Grid.ColumnDefinitions>
                        <TextBlock VerticalAlignment="Center" Text="{x:Bind ReciboId}"/>
                        <TextBlock Grid.Column="1" VerticalAlignment="Center" Text="{x:Bind ServicoData}"/>
                        <TextBlock Grid.Column="2" VerticalAlignment="Center" Text="{x:Bind TomadorNome}"/>
                        <TextBlock Grid.Column="3" VerticalAlignment="Center" Text="{x:Bind ServicoDescricao}"/>
                        <TextBlock Grid.Column="4" VerticalAlignment="Center" HorizontalAlignment="Right" Text="{x:Bind ServicoValor}"/>
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

I expected the items in the ListView followed the spacing of columns defined in ListView.HeaderTemplate, identical in ListView.ItemsTemplate. However, when executing, the items are like this:

Disposição de itens numa ListView que não segue o espaçamento de colunas

How can I make the items in ListView align correctly to the columns?

xaml uwp

  • @Diegorafaelsouza is the default style without modifications.

  • I searched the API for this attribute, but only found it in Xamarin. Anyway, I found a solution.

  • Yes, I thought the components of UWP were the same used in Xamarin.Forms. It must be the same as WPF. + 1

1 answer

1


In this Stackoverflow Question there is a solution:

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

The respondent explains that by default, ListViewITem does not stretch its content, which is achieved with the above XAML code.

Browser other questions tagged xaml uwp

You are not signed in. Login or sign up in order to post.