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。