UWP Gridview绑定到视图模型

Question

我在UserControl中使用GridView来显示允许选择教程的五乘四平方的图形按钮。

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

我以前使用过Tap和Right-Tap操作来选择课程或激活CommandBar以通过SelectionChanged事件为课程执行相关操作。然而，Interactions现在在Windows 10下如何工作已经发生了变化，我一直无法让Gridview工作，将SelectedItem绑定到视图模型中选定的LessonButton，也没有将SelectionChanged和ItemClick事件用于这种目的。 Gridview选择行为不起作用，因为一旦选择了一个项目，它就不会被取消选择。所以最后，我采取了不同的方式，尝试使用Gridview项目的Tap和Right-Tap事件。然而问题是，无论我采用哪种方式，我都无法使Binding正常工作。

所以我有一个名为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)); 
    } 
} 

它被添加到可观察到的集合中的视图模型：

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> 

..然后我有一个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的一部分。

我试图访问使用绑定和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"/> 

转换器只返回一个1或0取决于bool Started的值。

虽然此代码可以工作，但它以某种方式不正确，Visual Studio报告未知错误并指出它找不到Started属性。事实上，它找不到任何LessonButton的属性，我一直无法找到正确的语法揭露他们，即使有X：绑定代码，如：其

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

..或版本，使用铸造等

我正在使用Visual Studio 2017企业，它报告上述错误并显示在整个ControlTemplate上的波浪线与一个错误，其中它找不到与此代码甚至没有其他转换器artefact。这本身就令我非常恼火。是我还是VS中的XAML Intellisence看起来很片面，因为如果它不能识别真正的根本原因，它会放弃并报告错误的错误？

理想情况下，我希望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。