语义缩放-点击项目以导航到特定页面

Question

How can I get my app to navigate to a specific page based on the item within the semantic zoom that was tapped? Each item has a link to its own page and I want to use the 'item.Link' element so that the app reads the link and uses it to navigate to the specified page.

MetropolitanDataSource.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Exits_Expert_London_Lite
{
    using System;
    using Windows.UI.Xaml.Data;
    using Windows.UI.Xaml.Media;

    // To significantly reduce the sample data footprint in your production application, you can set
    // the DISABLE_SAMPLE_DATA conditional compilation constant and disable sample data at runtime.
#if DISABLE_SAMPLE_DATA
    internal class SampleDataSource { }
#else

    public class Item : System.ComponentModel.INotifyPropertyChanged
    {
        public event System.ComponentModel.PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged(string propertyName)
        {
            if (this.PropertyChanged != null)
            {
                this.PropertyChanged(this, new System.ComponentModel.PropertyChangedEventArgs(propertyName));
            }
        }

        private string _Station = string.Empty;
        public string Station
        {
            get
            {
                return this._Station;
            }

            set
            {
                if (this._Station != value)
                {
                    this._Station = value;
                    this.OnPropertyChanged("Station");
                }
            }
        }

        private string _Zone = string.Empty;
        public string Zone
        {
            get
            {
                return this._Zone;
            }

            set
            {
                if (this._Zone != value)
                {
                    this._Zone = value;
                    this.OnPropertyChanged("Zone");
                }
            }
        }

        private string _Link = string.Empty;
        public string Link
        {
            get
            {
                return this._Link;
            }

            set
            {
                if (this._Link != value)
                {
                    this._Link = value;
                    this.OnPropertyChanged("Link");
                }
            }
        }
    }

    public class GroupInfoList<T> : List<object>
    {

        public object Key { get; set; }


        public new IEnumerator<object> GetEnumerator()
        {
            return (System.Collections.Generic.IEnumerator<object>)base.GetEnumerator();
        }
    }


    public class StoreData
    {
        public StoreData()
        {
            Item item;

            item = new Item();
            item.Station = "Amersham";
            item.Zone = "Fare zone 9";
            item.Link = "/Lines and Stations/Metropolitan/AMR_(Metropolitan).xaml";
            Collection.Add(item);

            item = new Item();
            item.Station = "Chalfont & Latimer";
            item.Zone = "Fare zone 8";
            item.Link = "/Lines and Stations/Metropolitan/CFO_(Metropolitan).xaml";
            Collection.Add(item);

            item = new Item();
            item.Station = "Chesham";
            item.Zone = "Fare zone 9";
            item.Link = "/Lines and Stations/Metropolitan/Chesham.xaml";
            Collection.Add(item);
        }



        private ItemCollection _Collection = new ItemCollection();

        public ItemCollection Collection
        {
            get
            {
                return this._Collection;
            }
        }

        internal List<GroupInfoList<object>> GetGroupsByCategory()
        {
            List<GroupInfoList<object>> groups = new List<GroupInfoList<object>>();

            var query = from item in Collection
                        orderby ((Item)item).Zone
                        group item by ((Item)item).Zone into g
                        select new { GroupName = g.Key, Items = g };
            foreach (var g in query)
            {
                GroupInfoList<object> info = new GroupInfoList<object>();
                info.Key = g.GroupName;
                foreach (var item in g.Items)
                {
                    info.Add(item);
                }
                groups.Add(info);
            }

            return groups;
        }

        internal List<GroupInfoList<object>> GetGroupsByLetter()
        {
            List<GroupInfoList<object>> groups = new List<GroupInfoList<object>>();

            var query = from item in Collection
                        orderby ((Item)item).Station
                        group item by ((Item)item).Station[0] into g
                        select new { GroupName = g.Key, Items = g };
            foreach (var g in query)
            {
                GroupInfoList<object> info = new GroupInfoList<object>();
                info.Key = g.GroupName;
                foreach (var item in g.Items)
                {
                    info.Add(item);
                }
                groups.Add(info);
            }

            return groups;
        }
    }

    // Workaround: data binding works best with an enumeration of objects that does not implement IList
    public class ItemCollection : IEnumerable<Object>
    {
        private System.Collections.ObjectModel.ObservableCollection<Item> itemCollection = new System.Collections.ObjectModel.ObservableCollection<Item>();

        public IEnumerator<Object> GetEnumerator()
        {
            return itemCollection.GetEnumerator();
        }

        System.Collections.IEnumerator System.Collections.IEnumerable.GetEnumerator()
        {
            return GetEnumerator();
        }

        public void Add(Item item)
        {
            itemCollection.Add(item);
        }
    }

#endif
}

Metropolitan_line.xaml.cs

using Exits_Expert_London_Lite.Common;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// The Basic Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234237

namespace Exits_Expert_London_Lite.Lines_and_Stations.Metropolitan
{
    public sealed partial class Metropolitan_line : Page
    {
        public Metropolitan_line()
        {
            this.InitializeComponent();

            StoreData _storeData = null;

            // creates a new instance of the sample data
            _storeData = new StoreData();

            // sets the list of categories to the groups from the sample data
            List<GroupInfoList<object>> dataLetter = _storeData.GetGroupsByLetter();
            // sets the CollectionViewSource in the XAML page resources to the data groups
            cvsMetropolitan.Source = dataLetter;
            // sets the items source for the zoomed out view to the group data as well
            (semanticZoom.ZoomedOutView as ListViewBase).ItemsSource = cvsMetropolitan.View.CollectionGroups;

            (semanticZoom.ZoomedInView as ListViewBase).SelectedIndex = -1;
        }

        #region Data Visualization

        void ItemsGridView_ContainerContentChanging(ListViewBase sender, ContainerContentChangingEventArgs args)
        {
            ItemViewer iv = args.ItemContainer.ContentTemplateRoot as ItemViewer;

            if (args.InRecycleQueue == true)
            {
                iv.ClearData();
            }
            else if (args.Phase == 0)
            {
                iv.ShowPlaceholder(args.Item as Item);
                args.RegisterUpdateCallback(ContainerContentChangingDelegate);
            }
            else if (args.Phase == 1)
            {
                iv.ShowStation();
                args.RegisterUpdateCallback(ContainerContentChangingDelegate);
            }
            else if (args.Phase == 2)
            {
                iv.ShowZone();
            }

            args.Handled = true;
        }

        private TypedEventHandler<ListViewBase, ContainerContentChangingEventArgs> ContainerContentChangingDelegate
        {
            get
            {
                if (_delegate == null)
                {
                    _delegate = new TypedEventHandler<ListViewBase, ContainerContentChangingEventArgs>(ItemsGridView_ContainerContentChanging);
                }
                return _delegate;
            }
        }
        private TypedEventHandler<ListViewBase, ContainerContentChangingEventArgs> _delegate;

        #endregion //Data Visualization

        private void backButton_Tapped(object sender, TappedRoutedEventArgs e)
        {
            this.Frame.Navigate(typeof(Station_Chooser));
        }

        void GridView_ItemClicked(object sender, ItemClickEventArgs args)
        {
            var item = (Item)args.ClickedItem;

            if (item.Link == "/Lines and Stations/Metropolitan/AMR_(Metropolitan).xaml")
                ((Frame)Window.Current.Content).Navigate(typeof(AMR__Metropolitan_));
            else if (item.Link == "/Lines and Stations/Metropolitan/CFO_(Metropolitan).xaml")
                ((Frame)Window.Current.Content).Navigate(typeof(CFO__Metropolitan_));
            else if (item.Link == "/Lines and Stations/Metropolitan/Chesham.xaml")
                ((Frame)Window.Current.Content).Navigate(typeof(Chesham));
        }
    }
}

ItemViewer.xaml

<UserControl
    x:Class="Exits_Expert_London_Lite.ItemViewer"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Exits_Expert_London_Lite"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Margin="0,0,0,20" HorizontalAlignment="Left">
        <StackPanel>
            <StackPanel Margin="10,0,0,0" Width="420">
                <TextBlock x:Name="stationTextBlock" Foreground="{StaticResource ApplicationForegroundThemeBrush}" VerticalAlignment="Center" HorizontalAlignment="Left" FontFamily="Segoe UI" FontSize="32" FontWeight="Light" />
                <TextBlock x:Name="zoneTextBlock" TextWrapping="Wrap" Foreground="White" FontSize="20" FontWeight="Light" VerticalAlignment="Center" HorizontalAlignment="Left"/>
            </StackPanel>
        </StackPanel>
    </Grid>
</UserControl>

Metropolitan_line.xaml

<Page
    x:Class="Exits_Expert_London_Lite.Lines_and_Stations.Metropolitan.Metropolitan_line"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Exits_Expert_London_Lite"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>
        <CollectionViewSource x:Name="cvsMetropolitan" IsSourceGrouped="true" />
    </Page.Resources>

    <Grid Background="Black">
        <Grid.ChildrenTransitions>
            <TransitionCollection>
                <EntranceThemeTransition/>
            </TransitionCollection>
        </Grid.ChildrenTransitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Grid Grid.Row="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="120"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton" Margin="39,59,39,0" 
                        Style="{StaticResource NavigationBackButtonNormalStyle}"
                        VerticalAlignment="Top"
                        AutomationProperties.Name="Back"
                        AutomationProperties.AutomationId="BackButton"
                        AutomationProperties.ItemType="Navigation Button" Tapped="backButton_Tapped"/>
            <TextBlock x:Name="pageTitle" Text="Metropolitan line" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" 
                        IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,30,40" Foreground="#FF9B0056"/>
        </Grid>
        <Grid x:Name="Output" Grid.Row="1">
            <!-- This shows a hard-coded width to show within the SDK Sample framework.  In a real application you likely wouldn't set a width on the SemanticZoom -->
            <SemanticZoom x:Name="semanticZoom" Margin="0,0,0,0">
                <SemanticZoom.ZoomedOutView>
                    <GridView ScrollViewer.IsHorizontalScrollChainingEnabled="False" >
                        <GridView.ItemTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding Group.Key}" HorizontalAlignment="Center" FontFamily="Segoe UI" FontWeight="Light" FontSize="56" Foreground="White"/>
                            </DataTemplate>
                        </GridView.ItemTemplate>
                        <GridView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <ItemsWrapGrid ItemWidth="200" ItemHeight="200" MaximumRowsOrColumns="4" VerticalAlignment="Center"/>
                            </ItemsPanelTemplate>
                        </GridView.ItemsPanel>
                        <GridView.ItemContainerStyle>
                            <Style TargetType="GridViewItem">
                                <Setter Property="Margin" Value="4" />
                                <Setter Property="Padding" Value="10" />
                                <Setter Property="Background" Value="#9B0056" />
                                <Setter Property="VerticalAlignment" Value="Center"/>
                                <Setter Property="HorizontalContentAlignment" Value="Center" />
                                <Setter Property="VerticalContentAlignment" Value="Center" />
                            </Style>
                        </GridView.ItemContainerStyle>
                    </GridView>
                </SemanticZoom.ZoomedOutView>
                <SemanticZoom.ZoomedInView>
                    <GridView x:Name="ItemsGridView"
                              ItemsSource="{Binding Source={StaticResource cvsMetropolitan}}" 
                              ShowsScrollingPlaceholders="False"
                              ContainerContentChanging="ItemsGridView_ContainerContentChanging"
                              IsSwipeEnabled="True" ScrollViewer.IsHorizontalScrollChainingEnabled="False" ItemClick="GridView_ItemClicked">
                        <GridView.ItemTemplate>
                            <DataTemplate>
                                <local:ItemViewer/>
                            </DataTemplate>
                        </GridView.ItemTemplate>

                        <GridView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <ItemsWrapGrid/>
                            </ItemsPanelTemplate>
                        </GridView.ItemsPanel>

                        <GridView.GroupStyle>
                            <GroupStyle>
                                <GroupStyle.HeaderTemplate>
                                    <DataTemplate>
                                        <TextBlock Text='{Binding Key}' Foreground="#FF9B0056" Margin="5" FontSize="50" FontFamily="Segoe UI" FontWeight="Light" />
                                    </DataTemplate>
                                </GroupStyle.HeaderTemplate>
                            </GroupStyle>
                        </GridView.GroupStyle>
                    </GridView>
                </SemanticZoom.ZoomedInView>
            </SemanticZoom>
        </Grid>
    </Grid>
</Page>

Answer 1

Here you go. In your code-behind...

void GridView_ItemClicked(object sender, ItemClickEventArgs args)
{
    var item = (Item)args.ClickedItem;

    if (item.Link == "/Page_1.xaml")
        ((Frame)Window.Current.Content).Navigate(typeof (Page_1));
    else if (item.Link == "/Page_2.xaml")
        ((Frame)Window.Current.Content).Navigate(typeof (Page_2));
    else if (item.Link == "/Page_3.xaml")
        ((Frame)Window.Current.Content).Navigate(typeof (Page_3));
}

Best of luck!