Обновить SemanticZoom ObservableCollection в ViewModel

При использовании элемента управления SemanticZoom есть ли способ обновить ObservableCollection в ViewModel после изменения таблицы? После внесения изменений в таблицу в SQLite на той же странице (category.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));
        }            
    }
}

person detailCode    schedule 07.08.2017    source источник


Ответы (1)


Увеличенный вид и уменьшенный вид должны быть синхронизированы, поэтому, если пользователь выбирает группу в увеличенном виде, детали этой же группы отображаются в увеличенном виде. Вы можете использовать CollectionViewSource или добавить код для синхронизации представлений.

Для получения дополнительной информации см. Семантическое масштабирование.

Мы можем использовать элемент управления 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>
person Jayden    schedule 09.08.2017
comment
Спасибо Джейдену за информацию. Я изменил сообщение, включив в него CollectionViewSource, которого не было в исходном сообщении. Элемент управления уже работает, как вы упомянули (уменьшенные ссылки правильно увеличили элементы). Проблема заключается в обновлении данных на той же странице в элементе управления после их изменения в базе данных. Могу ли я получить доступ к ObservableCollection из SemanticZoomPage.xaml.cs? - person detailCode; 09.08.2017