将SemanticZoom内的GridView滚动到SemanticZoom外部的某个组

时间:2013-09-10 12:22:02

标签: c# xaml windows-8 microsoft-metro semantic-zoom

除了SemanticZoom中的字母选择之外,我正在尝试在ZoomedOutView之外添加自定义字母选择,但我无法操纵GridView中的ZoomedInView {1}}

<code>ZoomedOutView</code> with the alphabetical selection in the top right

<code>ZoomedInView</code> with the alphabetical selection in the top right

截至目前,两个字母视图中的ItemSource是相同的,并在代码隐藏中设置。

SemanticZoom工作正常,但我想要实现的是当点击右上角的一个字母时,它会滚动到ZoomedInView中的相应组。

有没有办法实现这个目标?

(我没有包含任何代码,因为代码本身不是主要问题,但是如果它应该被包括在内请告诉我)

1 个答案:

答案 0 :(得分:1)

最后我想出了一个解决方案。我正在提供代码,但在此之前从msdn链接下载Gridview示例。

GridView Sample

要在 ScenarioOutput1.xaml ScenarioOutput1.xaml.cs 中进行更改才能看到效果。

所以让我们开始使用ScenarioOutput1.xaml代码我改变了请将它复制粘贴到项目中(来自msdn的GridView Demo),以便在理解代码时看到效果。

ScenarioOutput1.xaml

    <Page
    x:Class="ListViewSimple.ScenarioOutput1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">

    <Grid Height="300" VerticalAlignment="Top" Tapped="Grid_Tapped">
        <ScrollViewer x:Name="scroller" HorizontalScrollMode="Enabled" Width="auto" HorizontalScrollBarVisibility="Visible">
            <GridView x:Name="ItemGridView" Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
            ItemTemplate="{StaticResource StoreFrontTileTemplate}"
            ItemContainerStyle="{StaticResource StoreFrontTileStyle}"
            ItemsPanel="{StaticResource StoreFrontGridItemsPanelTemplate}"
            BorderBrush="LightGray"
            VerticalAlignment="Top"
                      ScrollViewer.HorizontalScrollBarVisibility="Hidden"
            BorderThickness="1" ScrollViewer.VerticalScrollBarVisibility="Auto"
            SelectionMode="None"/>

        </ScrollViewer>
    </Grid>
</Page>

现在下一部分是cs文件。

ScenarioOutput1.xaml.cs

using System;
using System.Linq;
using System.Collections.Generic;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.Graphics.Display;
using Windows.UI.ViewManagement;
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;
using SDKTemplateCS;
using Expression.Blend.SampleData.SampleDataSource;

namespace ListViewSimple
{
    public sealed partial class ScenarioOutput1 : Page
    {
        // A pointer back to the main page which is used to gain access to the input and output frames and their content.
        MainPage rootPage = null;
        StoreData storeData = null;
        private Item item;
        private Expression.Blend.SampleData.SampleDataSource.ItemCollection _collectionNew = new Expression.Blend.SampleData.SampleDataSource.ItemCollection();
        public ScenarioOutput1()
        {
            InitializeComponent();

            storeData = new StoreData();
            ItemGridView.ItemsSource = storeData.Collection;
        }

        #region Template-Related Code - Do not remove
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            // Get a pointer to our main page.
            rootPage = e.Parameter as MainPage;

            // We want to be notified with the OutputFrame is loaded so we can get to the content.
            rootPage.InputFrameLoaded += new System.EventHandler(rootPage_InputFrameLoaded);
        }

        protected override void OnNavigatedFrom(NavigationEventArgs e)
        {
            rootPage.InputFrameLoaded -= new System.EventHandler(rootPage_InputFrameLoaded);
        }
        #endregion

        #region Use this code if you need access to elements in the input frame - otherwise delete
        void rootPage_InputFrameLoaded(object sender, object e)
        {
            // At this point, we know that the Input Frame has been loaded and we can go ahead
            // and reference elements in the page contained in the Input Frame.

            // Get a pointer to the content within the IntputFrame.
            Page inputFrame = (Page)rootPage.InputFrame.Content;

            // Go find the elements that we need for this scenario
            // ex: flipView1 = inputFrame.FindName("FlipView1") as FlipView;
        }
        #endregion

        Uri _baseUri = new Uri("ms-appx:///");
        private DispatcherTimer _timer;
        private async void Grid_Tapped(object sender, TappedRoutedEventArgs e)
        {
            try
            {
                item = new Item();
                item.Title = "This is a new One First";
                item.SetImage(_baseUri, "SampleData/Images/60SprinklesRainbow.png");
                item.Subtitle = "Ultrices rutrum sapien vehicula semper lorem volutpat sociis sit maecenas praesent taciti magna nunc odio orci vel tellus nam sed accumsan iaculis dis est";
                item.Link = "http://www.blueyonderairlines.com/";
                item.Category = "Ice Cream";
                item.Description = "Consectetuer lacinia vestibulum tristique sit adipiscing laoreet fusce nibh suspendisse natoque placerat pulvinar ultricies condimentum scelerisque nisi ullamcorper nisl parturient vel suspendisse nam venenatis nunc lorem sed dis sagittis pellentesque luctus sollicitudin morbi posuere vestibulum potenti magnis pellentesque vulputate mattis mauris mollis consectetuer pellentesque pretium montes vestibulum condimentum nulla adipiscing sollicitudin scelerisque ullamcorper pellentesque odio orci rhoncus pede sodales suspendisse parturient viverra curabitur proin aliquam integer augue quam condimentum quisque senectus quis urna scelerisque nostra phasellus ullamcorper cras duis suspendisse sociosqu dolor vestibulum condimentum consectetuer vivamus est fames felis suscipit hac";
                item.Content = "aaaA";

                _collectionNew.Add(item);

                item = new Item();
                item.Title = "This is a new One Second";
                item.Subtitle = "Ultrices rutrum sapien vehicula semper lorem volutpat sociis sit maecenas praesent taciti magna nunc odio orci vel tellus nam sed accumsan iaculis dis est";
                item.Link = "http://www.blueyonderairlines.com/";
                item.Category = "Ice Cream";
                item.SetImage(_baseUri, "SampleData/Images/60SprinklesRainbow.png");
                item.Description = "Consectetuer lacinia vestibulum tristique sit adipiscing laoreet fusce nibh suspendisse natoque placerat pulvinar ultricies condimentum scelerisque nisi ullamcorper nisl parturient vel suspendisse nam venenatis nunc lorem sed dis sagittis pellentesque luctus sollicitudin morbi posuere vestibulum potenti magnis pellentesque vulputate mattis mauris mollis consectetuer pellentesque pretium montes vestibulum condimentum nulla adipiscing sollicitudin scelerisque ullamcorper pellentesque odio orci rhoncus pede sodales suspendisse parturient viverra curabitur proin aliquam integer augue quam condimentum quisque senectus quis urna scelerisque nostra phasellus ullamcorper cras duis suspendisse sociosqu dolor vestibulum condimentum consectetuer vivamus est fames felis suscipit hac";
                item.Content = "aaaa";

                _collectionNew.Add(item);
                scroller.ScrollToHorizontalOffset(2000);
                _timer = new DispatcherTimer();
                _timer.Interval = new TimeSpan(3000);
                _timer.Tick += _timer_Tick;
                _timer.Start();

            }
            catch (Exception ex)
            {
                throw ex;
            }
        }

        void _timer_Tick(object sender, object e)
        {
            ItemGridView.ItemsSource = null;
            ItemGridView.ItemsSource = _collectionNew;
                 _timer.Stop();
        }
    }


}

请在演示中实现它并查看效果。可能还有其他工作,但希望尽快清除这些东西。如果您在理解方面有任何问题,请告诉我们。)