Windows 8 Les colonnes XAML ListView avec En-tête et Modèle d'élément doivent avoir la même largeur dynamique

Question

J'utilise une Listview avec un Itemtemplate et un Headertemplate. Les deux modèles contiennent 6 colonnes. Tout est ok si je définis une largeur de colonne fixe pour les modèles - comme dans la figure un.
Mais je veux définir la largeur à "Auto" pour les articles - mais alors je reçois la figure 2 ...

Comment gérer cela? Est-il possible de définir la largeur de la colonne d'en-tête avec C#? - ou toute autre solution?

Figure 1:

Figure 2:

code Listview:

<ListView x:Name="DayanalyseListView" 
         HorizontalAlignment="Center" 
         VerticalAlignment="Top" 
         ItemTemplate="{StaticResource DataTemplate}" 
         HeaderTemplate="{StaticResource HeaderTemplate}"> 
      </ListView> 

HeaderTemplate:

<DataTemplate x:Key="HeaderTemplate" > 
     <Grid Height="36" Background="DarkGray" > 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="95"/> 
       <ColumnDefinition Width="85"/> 
       <ColumnDefinition Width="85"/> 
       <ColumnDefinition Width="85"/> 
       <ColumnDefinition Width="85"/> 
       <ColumnDefinition Width="*" MinWidth="900"/> 
      </Grid.ColumnDefinitions> 
      <TextBlock x:Uid="DayProject" TextWrapping="Wrap" Text="Project" Grid.Column="0" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" Style="{StaticResource BodyTextStyle}" /> 
      <TextBlock x:Uid="DayTask" TextWrapping="Wrap" Text="Task" Grid.Column="1" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" Style="{StaticResource BodyTextStyle}" /> 
      <TextBlock x:Uid="DayFrom" TextWrapping="Wrap" Text="From" Grid.Column="2" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" Style="{StaticResource BodyTextStyle}" /> 
      <TextBlock x:Uid="DayTill" TextWrapping="Wrap" Text="Till" Grid.Column="3" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" Style="{StaticResource BodyTextStyle}" /> 
      <TextBlock x:Uid="DaySum" TextWrapping="Wrap" Text="Sum" Grid.Column="4" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" Style="{StaticResource BodyTextStyle}" /> 
      <TextBlock x:Uid="DayNote" TextWrapping="Wrap" Text="Note" Grid.Column="5" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" Style="{StaticResource BodyTextStyle}" /> 
     </Grid> 
    </DataTemplate> 

ItemTemplate:

<DataTemplate x:Key="DataTemplate"> 
     <Grid d:DesignHeight="50" Margin="0,5,0,0" > 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="95"/> 
       <ColumnDefinition Width="85"/> 
       <ColumnDefinition Width="85"/> 
       <ColumnDefinition Width="85"/> 
       <ColumnDefinition Width="85"/> 
       <ColumnDefinition Width="*"/> 
      </Grid.ColumnDefinitions> 
      <TextBlock HorizontalAlignment="Left" TextWrapping="NoWrap" Text="{Binding ProjectName}" VerticalAlignment="Center" Margin="5,0,0,0" Style="{StaticResource ItemTextStyle_sf}" Grid.Column="0" ToolTipService.ToolTip="{Binding ProjectName}"/> 
      <TextBlock HorizontalAlignment="Left" TextWrapping="NoWrap" Text="{Binding TaskName}" VerticalAlignment="Center" Margin="5,0,0,0" Style="{StaticResource ItemTextStyle_sf}" Grid.Column="1" ToolTipService.ToolTip="{Binding TaskName}"/> 
      <TextBlock HorizontalAlignment="Left" TextWrapping="NoWrap" Text="{Binding StartTimeString}" VerticalAlignment="Center" Margin="5,0,0,0" Style="{StaticResource ItemTextStyle_sf}" Grid.Column="2"/> 
      <TextBlock HorizontalAlignment="Left" TextWrapping="NoWrap" Text="{Binding StopTimeString}" VerticalAlignment="Center" Margin="5,0,0,0" Style="{StaticResource ItemTextStyle_sf}" Grid.Column="3"/> 
      <TextBlock HorizontalAlignment="Left" TextWrapping="NoWrap" Text="{Binding Sum}" VerticalAlignment="Center" Margin="5,0,0,0" Style="{StaticResource ItemTextStyle_sf}" Grid.Column="4"/> 
      <TextBlock HorizontalAlignment="Left" TextWrapping="NoWrap" Text="{Binding Note}" VerticalAlignment="Center" Margin="5,0,0,0" Style="{StaticResource ItemTextStyle_sf}" ToolTipService.ToolTip="{Binding Note}" Grid.Column="5"/> 
     </Grid> 
    </DataTemplate> 

Answer 1

ListView ne fonctionne pas comme un DataGrid. ListView ne comprend que les lignes et ne comprend pas les colonnes. Vous pouvez simuler des colonnes comme vous le faites en utilisant une grille, mais la chose importante à comprendre est que l'élément et l'en-tête sont deux éléments d'interface utilisateur complètement distincts.

Cela signifie qu'il n'est pas facile de faire en sorte que la taille des colonnes dans l'élément change la taille des colonnes dans l'en-tête. Même si vous deviez les nommer, ils font partie d'un modèle, donc les noms ne seront d'aucune utilité (rappelez-vous, il y aura plusieurs éléments créés). Je recommande que vous restiez avec des largeurs fixes, utilisez * largeurs ou utilisez un contrôle DataGrid réel.

Answer 2

Les œuvres suivantes parfaitement dans mon cas:

<Grid> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="Auto" /> 
     <RowDefinition /> 
    </Grid.RowDefinitions> 
    <Grid x:Name="ListViewHeaders" > 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition /> 
      <ColumnDefinition /> 
      <ColumnDefinition /> 
      <ColumnDefinition /> 
      <ColumnDefinition /> 
     </Grid.ColumnDefinitions> 
     <TextBlock Grid.Column="0" Text="Title Col 1" /> 
     <TextBlock Grid.Column="1" Text="Title Col 2" /> 
     <TextBlock Grid.Column="2" Text="Title Col 3" /> 
     <TextBlock Grid.Column="3" Text="Title Col 4" /> 
     <TextBlock Grid.Column="4" Text="Title Col 5" /> 
    </Grid> 
    <ListView x:Name="myTable" Grid.Row="1" ItemsSource="{Binding SomeCollection}" > 
     <ListView.ItemTemplate> 
      <DataTemplate> 
       <Grid Width="{Binding ElementName=myTable, Path=ActualWidth}" > 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition /> 
         <ColumnDefinition /> 
         <ColumnDefinition /> 
         <ColumnDefinition /> 
         <ColumnDefinition /> 
        </Grid.ColumnDefinitions> 
        <TextBlock Grid.Column="0" Text="{Binding ItemProperty1}" /> 
        <TextBlock Grid.Column="1" Text="{Binding ItemProperty2}" /> 
        <TextBlock Grid.Column="2" Text="{Binding ItemProperty3}" /> 
        <TextBlock Grid.Column="3" Text="{Binding ItemProperty4}" /> 
        <TextBlock Grid.Column="4" Text="{Binding ItemProperty5}" /> 
       </Grid> 
      </DataTemplate> 
     </ListView.ItemTemplate> 
    </ListView> 
</Grid> 

Answer 3

Vous pouvez essayer de créer votre propre UserControl avec des propriétés qui calcule la largeur de chaque colonne et se lient à ces propriétés en modèle. Peut être cette aide.

Answer 4

Ajouter un UserControl a fonctionné pour moi.

<ListView x:Name="listView" ItemsSource="{Binding SomeCollection}" > 
    <ListView.ItemTemplate> 
     <DataTemplate> 
      <UserControl Width="{Binding ElementName=listView, Path=ActualWidth}"> 
       <Grid> 
       .... 
       </Grid> 
      </UserControl> 
     </DataTemplate> 
    </ListView.ItemTemplate> 
</ListView>` 

Answer 5

pour étirer les articles à pleine largeur ListView essayez ceci:

<ListView> 
    <ListView.ItemContainerStyle> 
     <Style TargetType="ListViewItem"> 
      <Setter Property="HorizontalContentAlignment" Value="Stretch" /> 
     </Style> 
    </ListView.ItemContainerStyle> 
    <ListView.ItemTemplate> 
     <DataTemplate> 
      <Grid> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="80" /> 
        <ColumnDefinition Width="*" /> 
       </Grid.ColumnDefinitions> 
       <TextBlock Grid.Column="0" Text="{Binding Number}" /> 
       <TextBlock Grid.Column="1" Text="{Binding Text}" /> 
      </Grid> 
     </DataTemplate> 
    </ListView.ItemTemplate> 
</ListView> 

Answer 6

Ce qui suit a fonctionné pour moi. La clé consistait à définir la propriété HorizontalContentAlignment sur Stretch.

<ListView Grid.Row="6" Name="lvMembersSearchResults" Background="LightGray" ItemClick="lvMembersSearchResults_ItemClick" IsItemClickEnabled="True" Margin="5,5,5,5"> 
      <ListView.ItemContainerStyle> 
       <Style TargetType="ListViewItem"> 
        <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter> 
       </Style> 
      </ListView.ItemContainerStyle> 
      <ListView.Header> 
       <Style TargetType="ListViewHeaderItem"> 
        <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter> 
       </Style> 
      </ListView.Header> 
      <ListView.HeaderTemplate> 
       <DataTemplate> 
        <Grid Height="30" Background="DarkGray"> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition Width="60"/> 
          <ColumnDefinition Width="*"/> 
          <ColumnDefinition Width="70"/> 
          <ColumnDefinition Width="50"/> 
         </Grid.ColumnDefinitions> 
         <TextBlock x:Uid="tbRank" TextWrapping="Wrap" Text="Rank" Grid.Column="0" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontWeight="ExtraBold" FontSize="18" /> 
         <TextBlock x:Uid="tbName" TextWrapping="Wrap" Text="Name" Grid.Column="1" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontWeight="ExtraBold" FontSize="18" /> 
         <TextBlock x:Uid="tbTaxId" TextWrapping="Wrap" Text="Tax ID" Grid.Column="2" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontWeight="ExtraBold" FontSize="18" /> 
         <TextBlock x:Uid="tbCommand" TextWrapping="Wrap" Text="Cmd" Grid.Column="3" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontWeight="ExtraBold" FontSize="18" /> 
        </Grid> 
       </DataTemplate> 
      </ListView.HeaderTemplate> 
      <ListView.ItemTemplate> 
       <DataTemplate> 
        <Grid Height="30" Background="DarkBlue"> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition Width="60"/> 
          <ColumnDefinition Width="*"/> 
          <ColumnDefinition Width="70"/> 
          <ColumnDefinition Width="50"/> 
         </Grid.ColumnDefinitions> 
         <TextBlock TextWrapping="NoWrap" Text="{Binding Rank}" Grid.Column="0" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontWeight="Bold" FontSize="18" /> 
         <TextBlock TextWrapping="NoWrap" Text="{Binding Name}" Grid.Column="1" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontWeight="Bold" FontSize="18"/> 
         <TextBlock TextWrapping="NoWrap" Text="{Binding TaxId}" Grid.Column="2" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontWeight="Bold" FontSize="18"/> 
         <TextBlock TextWrapping="NoWrap" Text="{Binding Command}" Grid.Column="3" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" FontWeight="Bold" FontSize="18"/> 
        </Grid> 
       </DataTemplate> 
      </ListView.ItemTemplate> 
     </ListView>