Windows 8 XAML ListView mit Header und Item Template Spalten sollten die gleiche dynamische Breite haben

Question

Ich benutze eine Listview mit einem ItemTemplate und einem HeaderTemplate. Beide Vorlagen enthalten 6 Spalten. Alles ist in Ordnung, wenn ich eine feste Spaltenbreite für die Vorlagen festlege - wie in Abbildung 1.
Aber ich möchte die Breite auf "Auto" für die Elemente - aber dann bekomme ich Abbildung 2 ...

Wie geht das? Ist es möglich, die Kopfspaltenbreite mit C# zu setzen? - oder irgendeine andere Lösung?

Abbildung 1:

Abbildung 2:

-Code Listenansicht:

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

Header:

<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 funktioniert nicht wie ein Datagrid. ListView versteht nur Zeilen und versteht keine Spalten. Sie können Spalten wie Sie simulieren, indem Sie ein Grid verwenden. Wichtig ist jedoch, dass das Element und die Kopfzeile zwei vollständig separate UI-Elemente sind.

Es ist nicht einfach, die Größe der Spalten im Element ändern die Größe der Spalten in der Kopfzeile. Selbst wenn Sie sie benennen sollten, sind sie Teil einer Vorlage, so dass die Namen nicht von Nutzen sind (denken Sie daran, dass mehrere Elemente erstellt werden).

Ich empfehle Ihnen, mit festen Breiten zu bleiben, verwenden Sie * Breiten oder verwenden Sie eine tatsächliche DataGrid-Steuerelement.

Answer 2

Folgende funktioniert perfekt in meinem Fall:

<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

Sie können versuchen, Ihre eigenen Usercontrol mit Eigenschaften zu schaffen, die Breite für jede Spalte und binden an diese Eigenschaften in Vorlage berechnet. Kann diese Hilfe sein.

Answer 4

Das Hinzufügen eines UserControl funktionierte für mich.

<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

Für diese Strecken Elemente voller Breite Listview versuchen:

<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

Die für mich gearbeitet folgen. Der Schlüssel war, die HorizontalContentAlignment-Eigenschaft auf Stretch festzulegen.

<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>