如何将 DataTemplate 宽度绑定到父级并能够更新 viewmodel 属性？答案

【问题标题】：How to bind DataTemplate width to parent and be able to update viewmodel property?如何将 DataTemplate 宽度绑定到父级并能够更新 viewmodel 属性？
【发布时间】：2015-10-16 15:13:05
【问题描述】：

我有一个名为 MeditationDiaryListView 的 ListView 有两列和两个标题。我的列表视图中DataTemplate 的宽度等于MeditationDiaryListViewHeaders 的宽度：

<Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition />
</Grid.RowDefinitions>
<Grid Name="MeditationDiaryListViewHeaders">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*" />
        <ColumnDefinition Width="1*" />
    </Grid.ColumnDefinitions>
    <TextBlock 
        Grid.Column="0" 
        Text="Start time" 
        FontSize="16" />
    <TextBlock 
        Grid.Column="1" 
        Text="Time meditated"
        FontSize="16" />
</Grid>
<ListView 
    Grid.ColumnSpan="2"
    Grid.Row="1"
    Name="MeditationDiaryListView" 
    ItemsSource="{Binding MeditationDiary}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Grid Width="{Binding ActualWidth, ElementName=MeditationDiaryListViewHeaders}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1*" />
                    <ColumnDefinition Width="1*" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="{Binding StartTime}" 
                            Grid.Column="0" />
                <TextBlock Text="{Binding TimeMeditated}" 
                            Grid.Column="1" />
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

不幸的是，当我为 ItemsSource 绑定中的属性分配新值时，ListView 变为空。如果我从ListView 中删除Width="{Binding ActualWidth, ElementName=MeditationDiaryListViewHeaders} 部分，则不会发生这种情况，但是宽度不等于父级。

我怎样才能既让宽度等于父级，又能够更新MeditationDiaryListView 的ItemsSource 的内容？

【问题讨论】：

binding the ListView becomes empty 是什么意思？我认为它不会解决问题，但我会将 Grids HorizontalAlignment 设置为 Stretch

标签： c# xaml windows-phone-8.1

【解决方案1】：

删除DataTemplate 中的Width 并将ListView 上的项目容器宽度设置为Stretch：

<ListView 
    Grid.ColumnSpan="2"
    Grid.Row="1"
    x:Name="MeditationDiaryListView" 
    ItemsSource="{Binding MeditationDiary}"
    HorizontalAlignment="Stretch"
    HorizontalContentAlignment="Stretch">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1*" />
                    <ColumnDefinition Width="1*" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="{Binding StartTime}" 
                            Grid.Column="0" />
                <TextBlock Text="{Binding TimeMeditated}" 
                            Grid.Column="1" />
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

您的 ListView 和标题 Grid 现在应该具有相同的宽度，因为它们的父容器。

【讨论】：

对我来说，HorizontalContentAlignment="Stretch" 有效