在GridView中绑定ListView

时间:2017-01-21 19:03:30

标签: c# xaml uwp

我想创建一个日历周视图并在其中显示一些内容。因此它将有一个标题,这是日期和附加的在此日期过生日的人员列表。 我的方法是使用GridView显示一周中的每一天,并在GridView的数据模板内部,我想显示人员列表的ListView。

我的代码如下所示:

1)存储在其中的数据是一个可观察的集合:

public class WeekView
{
    public System.DateTime Date { get; set; }
    public int MaxTemperature { get; set; }
    public int MinTemperature { get; set; }
    public string TemperatureIcon { get; set; }
    public ObservableCollection<CalendarItem> BirthdayList { get; set; }

    public WeekView(System.DateTime date, int v1, int v2, string temperatureIcon, ObservableCollection<CalendarItem> birthdayList)
    {
       this.Date = date;
       this.MaxTemperature = v1;
       this.MinTemperature = v2;
       this.TemperatureIcon = temperatureIcon;
       this.BirthdayList = birthdayList;
    }        
}

和BirthdayList是另一个具有相似结构的ObservableCollection。

2)我的用户控件看起来像这样(为了更容易理解我已经删除了一些格式化的东西):

<Grid>
<GridView ItemsSource="{Binding}">
    <GridView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="360" />
                </Grid.ColumnDefinitions>
                <StackPanel Orientation="Horizontal">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="180" />
                        </Grid.ColumnDefinitions>
                        <TextBlock Grid.Row="0" Text="{Binding Date, Converter={StaticResource DateTimeToDayNameConverter}, FallbackValue=Donnerstag}" 
                                   Grid.Column="0"/>
                        <TextBlock Grid.Row="1" Text="{Binding Date, Converter={StaticResource DateTimeToDateStringConverter}, FallbackValue='16. Februar 2016'}" 
                               Grid.Column="0"/>
                    </Grid>
                    <TextBlock Text="{Binding TemperatureIcon}" 
                               Grid.Row="0"
                               Grid.Column="0"/>
                    </TextBlock>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="30" />
                            <ColumnDefinition Width="60" />
                        </Grid.ColumnDefinitions>
                        <TextBlock x:Name="MaxTemperatureIcon"    
                                   Grid.Row="0"
                                   Grid.Column="0"
                                   Text="&#xf055;">
                        </TextBlock>
                        <TextBlock Text="{Binding MaxTemperature, FallbackValue='23°C'}" 
                                   Grid.Row="0"
                                   Grid.Column="1">                                            
                        </TextBlock>
                        <TextBlock x:Name="MinTemperatureIcon"    
                                   Grid.Row="1"
                                   Grid.Column="0">
                        </TextBlock>
                        <TextBlock Text="{Binding MinTemperature, FallbackValue='15°C'}" 
                                   Grid.Row="1"
                                   Grid.Column="1">
                        </TextBlock>
                    </Grid>
                </StackPanel>
                <StackPanel Grid.Row="1">
                    <ListView ItemsSource="{Binding}" x:Name="BirthdayListView" >
                        <ListView.ItemTemplate>
                            <DataTemplate >
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>
                                    <TextBlock Text="{Binding BirthdayList.BirthdayString}" 
                                               Grid.Column="1"/>
                                    <TextBlock Text="{Binding BirthdayList.NameString}" 
                                               Grid.Column="2"/>
                                </Grid>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                        <ListView.ItemContainerStyle>
                            <Style TargetType="ListViewItem">
                                <Setter Property="Padding" Value="0"/>
                                <Setter Property="Margin" Value="0,0,0,0"/>
                            </Style>
                        </ListView.ItemContainerStyle>
                    </ListView>
                </StackPanel>
            </Grid>
        </DataTemplate>
    </GridView.ItemTemplate>
    <GridView.ItemContainerStyle>
        <Style TargetType="GridViewItem">
            <Setter Property="Padding" Value="0"/>
            <Setter Property="Margin" Value="0,20,0,0"/>
        </Style>
    </GridView.ItemContainerStyle>
</GridView>

3)我使用以下代码将日期绑定到GridView项目:

this.WeekView1.DataContext = this.WeekViewModel.WeekViewList1;

WeekViewList1类型为ObservableCollection<WeekView>

显示元素日期和天气有效(因此基本网格视图有效),但如何将BirthdayList绑定到GridView内的ListView?

1 个答案:

答案 0 :(得分:2)

GridView中项目的DataContext将是相应的WeekView对象,因此@Aybe在评论中建议您将ListView的ItemsSource属性绑定到WeekView的BirthdayList属性:

<ListView ItemsSource="{Binding BirthdayList}" x:Name="BirthdayListView">
...

内部“BirthdayListView”中项目的DataContext将是CalendarItem对象,因此您应该将其DataTemplate中的TextBlocks绑定到CalendarItem类的属性。

假设“BirthdayString”和“NameString”都是CalendarItem类型的属性,绑定应该如下所示:

<ListView ItemsSource="{Binding BirthdayList}" x:Name="BirthdayListView" >
    <ListView.ItemTemplate>
        <DataTemplate >
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <TextBlock Text="{Binding BirthdayString}" 
                                               Grid.Column="1"/>
                <TextBlock Text="{Binding NameString}" 
                                               Grid.Column="2"/>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="Padding" Value="0"/>
            <Setter Property="Margin" Value="0,0,0,0"/>
        </Style>
    </ListView.ItemContainerStyle>
</ListView>