xaml - 数据模板之外的 UWP 引用控件

Question

我正在尝试创建一个具有列标题的 ListView ，并且列表字段模仿其相应标题的宽度。没有绑定(bind)失败，但数据模板中的文本 block 宽度与其标题宽度不匹配。我猜测是因为数据模板找不到该元素。有什么想法可以让它发挥作用吗？

                <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

绑定(bind)工作正常。但是您假设标题行中的 TextBlock 元素将填充整个表格单元格，但事实并非如此。它们只填充与其包含的文本一样多的空间。在你的例子中，大约是 30px。您可以使用 VS 2015 的实时可视化树功能找到此信息。

您可以通过将 header 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