2015-06-21 34 views
2

我试图创建一个列表视图,它具有列标题和列表字段模仿其相应标题的宽度。没有绑定失败,但数据模板中的文本块宽度与它们的标题宽度不匹配。我猜是因为数据模板找不到元素。任何想法得到这个工作?数据模板之外的UWP参考控制

   <Grid Grid.Column="1" Grid.Row="1" x:Name="listViewHeaders" Height="50" VerticalAlignment="Top" Margin="10,0" > 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition /> 
        <ColumnDefinition /> 
        <ColumnDefinition /> 
       </Grid.ColumnDefinitions> 
       <!--<controls:CustomGridSplitter/>--> 
       <TextBlock x:Name="nameHeader" Grid.Column="0" Text="Name" /> 
       <TextBlock x:Name="typeHeader" Grid.Column="1" Text="Type" /> 
       <TextBlock x:Name="colorHeader" Grid.Column="2" Text="Color" /> 
      </Grid> 
      <ListView x:Name="ListView" Grid.Row="1" Grid.Column="1" Background="#FF494949" Margin="10,50,10,0" ItemsSource="{Binding CurrentCardList}"> 
       <ListView.ItemTemplate> 
        <DataTemplate> 
         <Grid Width="{Binding ActualWidth, ElementName=ListView}"> 
          <!--<Grid.ColumnDefinitions> 
           <ColumnDefinition Width="Auto" /> 
           <ColumnDefinition Width="Auto" /> 
           <ColumnDefinition Width="Auto" /> 

          </Grid.ColumnDefinitions>--> 
          <StackPanel Orientation="Horizontal"> 
           <TextBlock Grid.Column="0" Width="{Binding ActualWidth, ElementName=nameHeader}" Text="{Binding Name}" /> 
           <TextBlock Grid.Column="1" Width="{Binding ActualWidth, ElementName=typeHeader}" Text="{Binding Type}" /> 
           <TextBlock Grid.Column="2" Width="{Binding ActualWidth, ElementName=colorHeader}" Text="{Binding Color}" /> 
          </StackPanel> 
         </Grid> 
        </DataTemplate> 
       </ListView.ItemTemplate> 
       <ListView.ItemContainerStyle> 
        <Style TargetType="ListViewItem"> 
         <Setter Property="HorizontalContentAlignment" Value="Stretch" /> 
        </Style> 
       </ListView.ItemContainerStyle> 
      </ListView> 

回答

2

该绑定工作正常。但是,您假设标题行中的TextBlock元素将填充整个表格单元格,而他们不会。它们只填充它们包含的文本的空间。在你的情况下,大约30px。您可以通过使用VS 2015

实况视觉树功能,您可以通过包装头的另一个元素TextBlock元素,将填写所有可用空间,如Border解决的问题找到这些信息。这里的解决方案:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <Grid x:Name="listViewHeaders" Height="50" VerticalAlignment="Top" Margin="10,0" > 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition /> 
      <ColumnDefinition /> 
      <ColumnDefinition /> 
     </Grid.ColumnDefinitions> 
     <!--<controls:CustomGridSplitter/>--> 
     <Border Background="Blue" HorizontalAlignment="Stretch" Grid.Column="0" x:Name="nameHeader"> 
      <TextBlock Text="Name" /> 
     </Border> 
     <Border Background="Red" x:Name="typeHeader" Grid.Column="1"> 
      <TextBlock Text="Type" HorizontalAlignment="Stretch" /> 
     </Border> 
     <Border Background="Yellow" x:Name="colorHeader" Grid.Column="2"> 
      <TextBlock Text="Color" HorizontalAlignment="Stretch" /> 
     </Border> 
    </Grid> 
    <ListView x:Name="ListView" Background="#FF494949" Margin="10,50,10,0" ItemsSource="{Binding CurrentCardList}"> 
     <ListView.ItemTemplate> 
      <DataTemplate> 
       <Grid Width="{Binding ActualWidth, ElementName=ListView}"> 
        <!--<Grid.ColumnDefinitions> 
          <ColumnDefinition Width="Auto" /> 
          <ColumnDefinition Width="Auto" /> 
          <ColumnDefinition Width="Auto" /> 

         </Grid.ColumnDefinitions>--> 
        <StackPanel Orientation="Horizontal"> 
         <TextBlock Grid.Column="0" Width="{Binding ActualWidth, ElementName=nameHeader}" Text="{Binding Name}" /> 
         <TextBlock Grid.Column="1" Width="{Binding ActualWidth, ElementName=typeHeader}" Text="{Binding Type}" /> 
         <TextBlock Grid.Column="2" Width="{Binding ActualWidth, ElementName=colorHeader}" Text="{Binding Color}" /> 
        </StackPanel> 
       </Grid> 
      </DataTemplate> 
     </ListView.ItemTemplate> 
     <ListView.ItemContainerStyle> 
      <Style TargetType="ListViewItem"> 
       <Setter Property="HorizontalContentAlignment" Value="Stretch" /> 
      </Style> 
     </ListView.ItemContainerStyle> 
    </ListView> 
</Grid> 

这将创建以下效果,我相信是你在之后。

TextBlock widths corresponding to headers

这里的链接的完整解决方案 - http://1drv.ms/1eUzLHl

+0

实际的项目都是问题。我的标题是在正确的位置,但项目都聚集起来。他们似乎都是一个规模和所有聚​​集起来,不像你的。我的代码也完全一样。我无法让我的视觉工作室在我的活动视觉树中显示属性:/ – shady

+0

@shady我已经添加了完整解决方案的链接,请看一看。 –

+0

如果这回答了您的问题,请将答案标记为已接受。 –