xamarin-forms-4

How to set width of grid column the same as the width of header in xamarin forms lsitview


I want to set width of items columns the same as the width of listview.headers. the width of headers isn't even as the width of headers. It must be the way to bind these two properties.

  <Listview>
   <ListView.Header>
     <Grid>
      <Grid.ColumnDefinitions Width ="1*">
      <Grid.ColumnDefinitions Width ="Auto">
       <Label 
        Text = "Title of a book"
        Grid.Column ="0" 
        HorizontalOptions= "StartAndExpand"/>
     <Label 
      Text = "Date"
      Grid.Column ="1" 
      HorizontalOptions= "Center"/>
     </Grid>
     </Listview.Heder>
     <Listview.Items>
      <ViewCell>
       <Grid>
      <Grid.ColumnDefinitions Width ="1*">
       <Grid.ColumnDefinitions Width ="Auto">
        <Label 
        Text = "{Binding Library}"
        Grid.Column ="0" 
        LineBreakMode=TailTrumcation
        HorizontalOptions= "StartAndExpand"/>
       <Label 
         Text = "{Binding RealiseDate}"
        Grid.Column ="1" 
        HorizontalOptions= "Center"/>
        </Grid>
       </ViewCell>
     </Listview.Items>
    </Listview>

The columns' width and headers' width aren't. How to bind headers width with items width?


Solution

  • You can try this code.

    <ContentPage.Resources>
        <ResourceDictionary>
            <ColumnDefinitionCollection x:Key="SharedColumnDefinitions">
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </ColumnDefinitionCollection>
        </ResourceDictionary>
    </ContentPage.Resources>
    
    <ListView>
        <ListView.Header>
            <Grid ColumnDefinitions="{StaticResource SharedColumnDefinitions}">
                <Label 
                    Text="Title of a book"
                    Grid.Column="0" 
                    HorizontalOptions="StartAndExpand"/>
                <Label 
                    Text="Date"
                    Grid.Column="1" 
                    HorizontalOptions="Center"/>
            </Grid>
        </ListView.Header>
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Grid ColumnDefinitions="{StaticResource SharedColumnDefinitions}">
                        <Label 
                            Text="{Binding Library}"
                            Grid.Column="0" 
                            LineBreakMode="TailTruncation"
                            HorizontalOptions="StartAndExpand"/>
                        <Label 
                            Text="{Binding ReleaseDate}"
                            Grid.Column="1" 
                            HorizontalOptions="Center"/>
                    </Grid>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>