Actualiser SemanticZoom ObservableCollection dans ViewModel

Question

Lors de l'utilisation d'un contrôle SemanticZoom, existe-t-il un moyen de mettre à jour ObservableCollection dans le ViewModel après un changement de table? Après avoir apporté des modifications à la table dans SQLite, dans la même page (categories.xaml.cs), le contrôle SemanticZoom ne met pas à jour. Recharger la page à partir de la navigation dans le menu recharge la page avec les données correctes. Si le contrôle a juste pris un ObservableCollection comme c'est la source des éléments, le ObservableCollection pourrait simplement être actualisé. L'utilisation d'un ViewModel était le seul exemple de code que je pouvais trouver pour le contrôle SemanticZoom. Merci d'avance!

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

La vue agrandie et la vue agrandie doivent être synchronisées. Ainsi, si un utilisateur sélectionne un groupe dans la vue agrandie, les détails de ce même groupe s'affichent dans la vue agrandie. Vous pouvez utiliser une CollectionViewSource ou ajouter du code pour synchroniser les vues.

Pour plus d'informations, voir Semantic zoom.

Nous pouvons utiliser le contrôle CollectionViewSource dans notre page, il fournit une source de données qui ajoute le groupement et la prise en charge des éléments actuels aux classes de collection. Ensuite, nous pouvons lier les GridView.ItemSource et ListView.ItemSource au . Lorsque nous définissons de nouvelles données au CollectionViewSource, le GridView dans SemanticZoom.ZoomedOutView et ListView dans SemanticZoom.ZoomedInView sera mis à jour.

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>