UWP参考控制在数据模板之外

Question

我正在尝试创建一个包含列标题的列表视图，列表字段模仿其相应标题的宽度。没有绑定失败，但数据模板中的文本块宽度与其标题宽度不匹配。我猜是因为数据模板找不到元素。有什么想法让它发挥作用吗？

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

Answer 1

绑定工作正常。但是你假设标题行中的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>

这将产生以下效果，我相信这就是你所追求的。

以下是完整解决方案的链接 - http://1drv.ms/1eUzLHl