Refresh SemanticZoom ViewModelのObservableCollection

Question

SemanticZoomコントロールを使用しているときに、テーブルの変更後にViewModelのObservableCollectionを更新する方法はありますか？同じページ（categories.xaml.cs）内のSQLite内のテーブルを変更すると、SemanticZoomコントロールは更新されません。メニューナビゲーションからページをリロードすると、ページが正しいデータでリロードされます。コントロールがObservableCollectionをアイテムソースとして取得したばかりの場合、ObservableCollectionは単にリフレッシュできます。 SemanticZoomコントロールで使用できる唯一のコード例は、ViewModelです。前もって感謝します！

categories.xaml

<Page.DataContext> 
    <vm:CategoriesViewModel></vm:CategoriesViewModel> 
</Page.DataContext> 
<Page.Resources> 
    <CollectionViewSource x:Name="Collection" IsSourceGrouped="true" ItemsPath="Items" Source="{Binding CategoryGroups}" /> 
</Page.Resources> 

<SemanticZoom Name="szCategories" ScrollViewer.ZoomMode="Enabled"> 
    <SemanticZoom.ZoomedOutView> 
     <GridView ScrollViewer.IsHorizontalScrollChainingEnabled="False"> 
      <GridView.ItemTemplate> 
       <DataTemplate> 
        <TextBlock Text="{Binding Group.Name }" Foreground="Gray" Margin="5" FontSize="25" /> 
       </DataTemplate> 
      </GridView.ItemTemplate> 
     </GridView> 
    </SemanticZoom.ZoomedOutView> 
    <SemanticZoom.ZoomedInView> 
     <ListView Name="lvCategories" ItemsSource="{Binding Source={StaticResource Collection}}" Tapped="lvCategories_Tapped"> 
      <ListView.ItemTemplate> 
       <DataTemplate x:DataType="data:Category"> 
        <StackPanel> 
         <TextBlock Text="{Binding Title}" Margin="5" /> 
        </StackPanel> 
       </DataTemplate> 
      </ListView.ItemTemplate> 
      <ListView.GroupStyle> 
       <GroupStyle> 
        <GroupStyle.HeaderTemplate> 
         <DataTemplate> 
          <StackPanel Orientation="Vertical"> 
           <TextBlock Text='{Binding Name}' Foreground="Gray" FontSize="25" Margin="5,5,5,0" /> 
          </StackPanel> 
         </DataTemplate> 
        </GroupStyle.HeaderTemplate> 
       </GroupStyle> 
      </ListView.GroupStyle> 
     </ListView> 
    </SemanticZoom.ZoomedInView> 
</SemanticZoom> 

categories.xaml.cs

public Categories() 
    { 
     this.InitializeComponent(); 

     var collectionGroups = Collection.View.CollectionGroups; 
     ((ListViewBase)this.szCategories.ZoomedOutView).ItemsSource = collectionGroups; 
    } 

CategoriesViewModel.cs

internal class CategoriesViewModel : BindableBase 
{ 
    public CategoriesViewModel() 
    { 
     CategoryGroups = new ObservableCollection<CategoryDataGroup>(CategoryDataGenerator.GetGroupedData()); 
    } 

    private ObservableCollection<CategoryDataGroup> _groups; 
    public ObservableCollection<CategoryDataGroup> CategoryGroups 
    { 
     get { return _groups; } 
     set { SetProperty(ref _groups, value); } 
    } 
} 

public abstract class BindableBase : INotifyPropertyChanged 
{ 
    public event PropertyChangedEventHandler PropertyChanged; 

    protected virtual bool SetProperty<T>(ref T storage, T value, [CallerMemberName] string propertyName = null) 
    { 
     if (object.Equals(storage, value)) return false; 

     storage = value; 
     this.OnPropertyChanged(propertyName); 

     return true; 
    } 
    protected void OnPropertyChanged(string propertyName) 
    { 
     var eventHandler = this.PropertyChanged; 
     if (eventHandler != null) 
     { 
      eventHandler(this, new PropertyChangedEventArgs(propertyName)); 
     } 
    } 
} 

SymanticZoom.cs

internal class CategoryDataGroup 
{ 
    public string Name { get; set; } 

    public List<CategoryData> Items { get; set; } 
} 

internal class CategoryData 
{ 
    public CategoryData(string grp, string title) 
    { 
     Grp = grp; 
     Title = title; 
    } 

    public string Grp { get; private set; } 
    public string Title { get; private set; } 
} 

internal class CategoryDataGenerator 
{ 
    private static List<CategoryData> _data; 

    public static List<CategoryDataGroup> GetGroupedData() 
    { 
     if (_data != null) 
      _data.Clear(); 
     GenerateData(); 

     return _data.GroupBy(d => d.Grp[0], 
      (key, items) => new CategoryDataGroup() { Name = key.ToString(), Items = items.ToList() }).ToList(); 
    } 

    private static void GenerateData() 
    { 
     ObservableCollection<Category> ocCategories = new ObservableCollection<Category>(); 
     SQLiteManager.Categories.Select(ocCategories); 

     _data = new List<CategoryData>(); 
     foreach (var temp in ocCategories) 
     { 
      _data.Add(new CategoryData(temp.Name.Substring(0,1), temp.Name)); 
     }    
    } 
} 

Answer 1

ズームインビューとズームアウトビューは同期する必要があります。そのため、ズームアウトビューでグループを選択すると、同じグループの詳細がズームイン表示されます。 CollectionViewSourceを使用するか、コードを追加してビューを同期させることができます。

詳細については、Semantic zoomを参照してください。

私たちのページでCollectionViewSourceコントロールを使用すると、コレクションクラスに現在のアイテムをグループ化してサポートするデータソースが提供されます。次に、GridView.ItemSourceとListView.ItemSourceをCollectionViewSourceにバインドすることができます。 CollectionViewSourceに新しいデータを設定すると、GridViewはSemanticZoom.ZoomedOutView、ListViewはSemanticZoom.ZoomedInViewに更新されます。

xmlns:wuxdata="using:Windows.UI.Xaml.Data"> 

<Page.Resources> 
    <CollectionViewSource x:Name="ContactsCVS" IsSourceGrouped="True" /> 
    <DataTemplate x:Key="ZoomedInTemplate" x:DataType="data:Contact"> 
     <StackPanel Margin="20,0,0,0"> 
      <TextBlock Text="{x:Bind Name}" /> 
      <TextBlock Text="{x:Bind Position}" TextWrapping="Wrap" HorizontalAlignment="Left" Width="300" /> 
     </StackPanel> 
    </DataTemplate> 
    <DataTemplate x:Key="ZoomedInGroupHeaderTemplate" x:DataType="data:GroupInfoList"> 
     <TextBlock Text="{x:Bind Key}"/> 
    </DataTemplate> 
    <DataTemplate x:Key="ZoomedOutTemplate" x:DataType="wuxdata:ICollectionViewGroup"> 
     <TextBlock Text="{x:Bind Group.(data:GroupInfoList.Key)}" TextWrapping="Wrap"/> 
    </DataTemplate> 
</Page.Resources> 
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <StackPanel> 
     <SemanticZoom x:Name="Control1" Height="500"> 
      <SemanticZoom.ZoomedInView> 
       <GridView ItemsSource="{x:Bind ContactsCVS.View,Mode=OneWay}" ScrollViewer.IsHorizontalScrollChainingEnabled="False" SelectionMode="None" 
       ItemTemplate="{StaticResource ZoomedInTemplate}"> 
        <GridView.GroupStyle> 
         <GroupStyle HeaderTemplate="{StaticResource ZoomedInGroupHeaderTemplate}" /> 
        </GridView.GroupStyle> 
       </GridView> 
      </SemanticZoom.ZoomedInView> 
      <SemanticZoom.ZoomedOutView> 
       <ListView ItemsSource="{x:Bind ContactsCVS.View.CollectionGroups}" SelectionMode="None" ItemTemplate="{StaticResource ZoomedOutTemplate}" /> 
      </SemanticZoom.ZoomedOutView> 
     </SemanticZoom> 
    </StackPanel> 
</Grid>