绑定到视图模型的UWP Gridview

Question

我在UserControl中使用GridView来显示一个五乘四的方形图形按钮，这些按钮允许选择课程。

这是在我要升级到Windows 10 UWP的Windows 8.1应用商店应用中。

我之前通过SelectionChanged事件使用“点击和右键点击操作”来选择课程或激活CommandBar来执行课程的相关操作。然而，交互在Windows10下的工作方式发生了变化，我根本无法让Gridview将SelectedItem绑定到视图模型中选定的LessonButton，也无法将SelectionChanged和ItemClick事件用于此类目的。网格视图选择行为不起作用，因为一旦选择了一个项目，它就永远不会被取消选择。因此，最后，我采取了不同的策略，尝试使用Gridview项目的Tap和Right-Tap事件。然而，问题是，无论我采用哪种方法，我都不能让绑定正常工作。

所以我有一个名为LessonButton的对象：

public class LessonButton : INotifyPropertyChanged
{
    //public LessonButton() { }
    public LessonButton(SolidColorBrush inBackground, bool inComplete, double inHeight, int inNumber, bool inSelected, bool inStarted,
        Status inState, double inWidth)
    {
        ...
        Started = inStarted;
        ...
    }
    ...
    private bool _started;
    public bool Started
    {
        get { return _started; }
        set { if (_started != value) { _started = value; OnPropertyChanged(); } }
    }
    ...
    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        var handler = PropertyChanged;
        handler?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

它将被添加到View Model中的可观察集合中：

public class LessonsViewModel : INotifyPropertyChanged
{
    public ObservableCollection<LessonButton> Lessons { get; } = new ObservableCollection<LessonButton>();

    private LessonButton _selectedLessonButton;

    public LessonButton SelectedLessonButton
    {
        get { return _selectedLessonButton; }
        set { if (_selectedLessonButton != value) { _selectedLessonButton = value; OnPropertyChanged(); } }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        var handler = PropertyChanged;
        handler?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
} 

在一个用户控件中，我用以下参数设置DataContext：

<UserControl.DataContext>
    <classes:LessonsViewModel/>
</UserControl.DataContext>

然后，..and I将GridView定义为：

        <GridView x:Name="LessonGridView" ItemContainerStyle="{StaticResource GridViewItemStyle}" ItemsSource="{Binding Lessons}"
              SelectionMode="Single" IsItemClickEnabled="False" SelectedItem="{Binding Path=SelectedLessonButton, Mode=TwoWay}">
        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <VariableSizedWrapGrid HorizontalChildrenAlignment="Left" MaximumRowsOrColumns="5" Orientation="Horizontal" VerticalChildrenAlignment="Top"/>
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>
    </GridView>

其中GridView项格式在ControlTemplate中定义为GridViewItemStyle的一部分。

我尝试过使用Binding和xBind以各种方式访问LessonButton变量，但只能使用下面的XAML让程序在ControlTemplate中运行：

    <Image Grid.Row="1" Grid.Column="1" Width="{StaticResource BadgeSize}" 
    Height="{StaticResource BadgeSize}" HorizontalAlignment="Right" VerticalAlignment="Top"
    Opacity="{Binding Started, Converter={StaticResource OpacityConverterTrueValueIsVisible}}"
    Source="/Assets/SelectionButtonGroup/square310x310logobw.png" Stretch="Uniform"/>

根据bool Started的值，Converter只返回1或0。

尽管此代码可以正常工作，但不知何故它并不正确，Visual Studio报告了一个未知错误，并声明它找不到Started属性。事实上，它找不到LessonButton的任何属性，我也找不到公开它们的正确语法，即使使用x:Bind代码也是如此：

{x:Bind LessonViewModel.Lessons.LessonButton.Selected}

其..or版本，使用造型等。

我使用的是Visual Studio2017企业版，它报告了上述错误，并在整个ControlTemplate上显示了波浪线，其中有一个错误，它找不到另一个甚至与此代码无关的转换器工件。就其本身而言，我觉得非常恼火。是我的问题，还是VS中的XAML智能看起来非常古怪，因为它放弃了，如果不能确定真正错误的根本原因，就会报告错误？

理想情况下，我希望Gridview SelectedItem与ViewModel绑定。但是，即使尝试通过Tap事件执行操作，我也无法获得在ControlTemplate XAML中正确公开LessonButton属性的绑定。

任何帮助都将不胜感激。

Answer 1

您不应该使用ItemContainerStyle将LessonButton变量绑定到。ItemContainerStyle用于设置带有选择标记、悬停和按下状态等项的样式。

相反，您应该使用存储在UserControl资源中的DataTemplate，如下所示：

<Grid>
  <Grid.Resources>
    <DataTemplate x:Name="GridViewTemplate">
      <TextBlock Text="{Binding LessonName}">
    </DataTemplate>
  </StackPanel.Resources>
  <GridView x:Name="GridView"
            ItemsSource="{Binding Lessons}"
            ItemTemplate="{StaticResource GridViewTemplate}">
  </GridView>
</Grid>

然后给你的DataTemplate一个名字(在“GridViewTemplate”上面)，并将它设置为你的GridView的ItemTemplate。