刷新ViewModel中的SemanticZoom ObservableCollection

Question

使用SemanticZoom控件时，是否有方法在表更改后更新ViewModel中的ObservableCollection？在SQLite中对表进行更改后，在同一页面（categories.xaml.cs）中，SemanticZoom控件不会更新。从菜单导航重新加载页面确实重新加载页面的正确数据。如果控件只是将一个ObservableCollection作为其源项目，ObservableCollection才可以刷新。使用ViewModel是我能找到的SemanticZoom控件的唯一代码示例。提前致谢！

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>