Question

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

categories.xaml

languageName

categories.xaml.cs

<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>

CategoriesViewModel.cs

    public Categories()
    {
        this.InitializeComponent();

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

SymanticZoom.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));
        }
    }
}

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>

在ViewModel中刷新SemanticZoom ObservableCollection

1 个答案: