Danh sách XAML của Windows 8 với các cột Tiêu đề và Mục Mẫu phải có cùng chiều rộng động

Question

Tôi đang sử dụng một Listview với một Itemtemplate và một Headertemplate. Cả hai mẫu đều chứa 6 Cột. Mọi thứ đều ổn nếu tôi đặt chiều rộng cột cố định cho các mẫu - như trong hình một.
Nhưng tôi muốn đặt chiều rộng thành "Tự động" cho các mục - nhưng sau đó tôi nhận được hình 2 ...

Làm cách nào để xử lý? Có thể đặt chiều rộng Cột Tiêu đề bằng C# không? - hoặc bất kỳ giải pháp nào khác?

Hình 1:

Hình 2:

Mã 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 không hoạt động giống như một DataGrid. ListView chỉ hiểu các hàng và không hiểu các cột. Bạn có thể mô phỏng các cột như bạn đang sử dụng Grid, nhưng điều quan trọng cần hiểu là mục và tiêu đề là hai phần tử giao diện người dùng hoàn toàn riêng biệt.

Có nghĩa là không dễ dàng để có kích thước của các cột trong mục thay đổi kích thước của các cột trong tiêu đề. Ngay cả khi bạn đã đặt tên cho chúng, chúng là một phần của một mẫu để các tên sẽ không được sử dụng bất kỳ (nhớ, sẽ có nhiều mục được tạo ra).

Tôi khuyên bạn nên giữ nguyên độ rộng cố định, sử dụng * chiều rộng hoặc sử dụng điều khiển DataGrid thực tế.

Answer 2

Các công trình sau đây một cách hoàn hảo trong trường hợp của tôi:

<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

Bạn có thể cố gắng tạo usercontrol của riêng bạn với tài sản mà tính toán chiều rộng cho mỗi cột và ràng buộc để tính này trong mẫu. Có thể là sự giúp đỡ này.

Answer 4

Thêm UserControl làm việc cho tôi.

<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

Đối với duỗi mục để chiều rộng ListView đầy thử điều này:

<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

Sau đây làm việc cho tôi. Điều quan trọng là thiết lập thuộc tính HorizontalContentAlignment thành 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>