locked
SemanticZoom Problem RRS feed

  • Question

  • Why my SemanticZoom cannot show GroupedItemsPage correctly?

    <common:LayoutAwarePage
        x:Name="pageRoot"
        x:Class="WordpressTemplate.GroupedItemsPage"
        DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
        IsTabStop="false"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:WordpressTemplate"
        xmlns:data="using:WordpressTemplate.Data"
        xmlns:common="using:WordpressTemplate.Common"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">

        <Page.Resources>

            <!--
                Collection of grouped items displayed by this page, bound to a subset
                of the complete item list because items in groups cannot be virtualized
            -->
            <CollectionViewSource
                x:Name="groupedItemsViewSource"
                Source="{Binding Groups}"
                IsSourceGrouped="true"
                ItemsPath="Items"
                d:Source="{Binding AllGroups, Source={d:DesignInstance Type=data:SampleDataSource, IsDesignTimeCreatable=True}}"/>
        </Page.Resources>

        <Page.TopAppBar>
            <AppBar>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="30*" />
                        <ColumnDefinition Width="70*" />                 
                    </Grid.ColumnDefinitions>
                    <StackPanel Grid.Column="0" Orientation="Horizontal" HorizontalAlignment="Left">
                        <TextBlock Text="Background Color" FontSize="36" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </StackPanel>

                    <StackPanel Grid.Column="1" Orientation="Horizontal" HorizontalAlignment="Right" Height="130">
                        <!--<Rectangle Width="100" Height="100" Fill="Red" Margin="0,0,20,0" 
                               Tapped="Rectangle_Tapped" Stroke="Beige"/>
                        <Rectangle Width="100" Height="100" Fill="Orange" Margin="0,0,20,0"
                               Tapped="Rectangle_Tapped" Stroke="Beige"/>
                        <Rectangle Width="100" Height="100" Fill="Yellow" Margin="0,0,20,0" 
                               Tapped="Rectangle_Tapped" Stroke="Beige"/>
                        <Rectangle Width="100" Height="100" Fill="Green" Margin="0,0,20,0" 
                               Tapped="Rectangle_Tapped" Stroke="Beige"/>
                        <Rectangle Width="100" Height="100" Fill="Blue" Margin="0,0,20,0"
                               Tapped="Rectangle_Tapped" Stroke="Beige"/>
                        <Rectangle Width="100" Height="100" Fill="Purple" Margin="0,0,20,0"
                               Tapped="Rectangle_Tapped" Stroke="Beige"/>
                        <Rectangle Width="100" Height="100" Fill="Transparent" Margin="0,0,20,0"
                               Tapped="Rectangle_Tapped" Stroke="Beige"/>-->
                      <!--<Button Width="100" Height="100"></Button>
                        <Image Source="Assets/Logo.png"/>-->
                                        </StackPanel>
                </Grid>
            </AppBar>
        </Page.TopAppBar>

        <Page.BottomAppBar>
            <AppBar>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="50*" />
                        <ColumnDefinition Width="50*" />
                    </Grid.ColumnDefinitions>
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                        <Button x:Name="ThemeButton" Style="{StaticResource SwitchAppBarButtonStyle}" Tag="Switch Theme" Click="ThemeButton_Click" />
                    </StackPanel>
                    <StackPanel Grid.Column="1" Orientation="Horizontal" HorizontalAlignment="Right">
                        <Button Style="{StaticResource HomeAppBarButtonStyle}" Click="btnHome_Click" />
                        <Button Style="{StaticResource RefreshAppBarButtonStyle}" Click="btnRefresh_Click" />
                    </StackPanel>
                </Grid>
            </AppBar>
        </Page.BottomAppBar>

        <!--
            This grid acts as a root panel for the page that defines two rows:
            * Row 0 contains the back button and page title
            * Row 1 contains the rest of the page layout
        -->

       
            <Grid x:Name="LayoutRoot" Style="{StaticResource LayoutRootStyle}">
                <Grid.Background>
                    <ImageBrush ImageSource="Assets/BG19.JPG"/>
                </Grid.Background>
                <Grid.RowDefinitions>
                    <RowDefinition Height="140"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>

                <!-- Back button and page title -->
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="2*"/>
                    <ColumnDefinition Width="621*"/>
                </Grid.ColumnDefinitions>
                <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}" Margin="36,0,0,36">
                <Button.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="Black"/>
                <GradientStop Color="#FF714040" Offset="1"/>
                </LinearGradientBrush>
                </Button.Background>
                </Button>
                <TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Grid.Column="1" Style="{StaticResource PageHeaderTextStyle}" Grid.ColumnSpan="2">
                <TextBlock.Foreground>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="Red"/>
                <GradientStop Color="#FFCFAAAA" Offset="1"/>
                </LinearGradientBrush>
                </TextBlock.Foreground>
                </TextBlock>
            </Grid>

            <!-- Horizontal scrolling grid used in most view states -->
            <SemanticZoom Grid.Row="1" Margin="120,0,0,0">
                <SemanticZoom.ZoomedInView>
                    <GridView  
                x:Name="itemGridView"
                AutomationProperties.AutomationId="ItemGridView"
                AutomationProperties.Name="Grouped Items"
                Margin="0,137,0,0"
                Padding="116,0,40,46"
                ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
                ItemTemplate="{StaticResource Standard250x250ItemTemplate}"
                SelectionMode="None"
                IsItemClickEnabled="True"
                ItemClick="ItemView_ItemClick" Grid.RowSpan="3" Foreground="White" FontFamily="Jing Jing" FontSize="13.333" SelectionChanged="itemGridView_SelectionChanged">

                <GridView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <VirtualizingStackPanel Orientation="Horizontal"/>
                    </ItemsPanelTemplate>
                </GridView.ItemsPanel>
                <GridView.GroupStyle>
                    <GroupStyle>
                        <GroupStyle.HeaderTemplate>
                            <DataTemplate>
                                <Grid Margin="1,0,0,6">
                                    <Button
                                        AutomationProperties.Name="Group Title"
                                        Content="{Binding Title}"
                                        Click="Header_Click"
                                        Style="{StaticResource TextButtonStyle}" FontWeight="Bold">
                                    <Button.Foreground>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="Black"/>
                                    <GradientStop Color="#FF662E2E" Offset="1"/>
                                    </LinearGradientBrush>
                                    </Button.Foreground>
                                    </Button>
                                </Grid>
                            </DataTemplate>
                        </GroupStyle.HeaderTemplate>
                        <GroupStyle.Panel>
                            <ItemsPanelTemplate>
                                <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/>
                            </ItemsPanelTemplate>
                        </GroupStyle.Panel>
                    </GroupStyle>
                </GridView.GroupStyle>
            </GridView>
                </SemanticZoom.ZoomedInView>
                <SemanticZoom.ZoomedOutView>
                    <GridView x:Name="GridIn" ItemsSource=" {Binding Source={StaticResource groupedDetailPage}" SelectionMode="None">
                        <GridView.ItemTemplate>
                            <DataTemplate>
                                <Grid Width="300" Height="75" Background="#33FFFFFF">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="25*" />
                                        <ColumnDefinition Width="25*" />
                                        <ColumnDefinition Width="25*" />
                                        <ColumnDefinition Width="25*" />
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="25*" />
                                        <RowDefinition Height="25*" />
                                        <RowDefinition Height="25*" />
                                        <RowDefinition Height="25*" />
                                                                        </Grid.RowDefinitions>
                                    <TextBlock Text="{Binding Source={StaticResource groupedItemsViewSource}}" Grid.Column="0" Grid.Row="0" FontSize="20" />
                                                               </Grid>
                            </DataTemplate>
                        </GridView.ItemTemplate>
                        <GridView.GroupStyle>
                            <GroupStyle HidesIfEmpty="True">
                                <GroupStyle.HeaderTemplate>
                                    <DataTemplate>
                                        <StackPanel Background="LightGray" Margin="0,0,20,0">
                                            <TextBlock Text="{Binding Key}" Foreground="Black" Margin="30" FontSize="32" Width="350" />
                                        </StackPanel>
                                    </DataTemplate>
                                </GroupStyle.HeaderTemplate>
                                <GroupStyle.Panel>
                                    <ItemsPanelTemplate>
                                        <VariableSizedWrapGrid/>
                                    </ItemsPanelTemplate>
                                </GroupStyle.Panel>
                            </GroupStyle>
                        </GridView.GroupStyle>
                    </GridView>
                </SemanticZoom.ZoomedOutView>
            </SemanticZoom>
            <ListView
                x:Name="itemListView"
                AutomationProperties.AutomationId="ItemListView"
                AutomationProperties.Name="Grouped Items"
                Visibility="Collapsed"
                Margin="0,130,0,0"
                Padding="10,0,0,60"
                ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
                ItemTemplate="{StaticResource Standard80ItemTemplate}"
                SelectionMode="None"
                IsItemClickEnabled="True"
                ItemClick="ItemView_ItemClick" Grid.RowSpan="3" FontFamily="Kootenay" FontSize="12">

                <ListView.GroupStyle>
                <GroupStyle>
                <GroupStyle.HeaderTemplate>
                <DataTemplate>
                <Grid Margin="7,7,0,0">
                <Button
                AutomationProperties.Name="Group Title"
                Content="{Binding Title}"
                Click="Header_Click"
                Style="{StaticResource TextButtonStyle}" Background="{x:Null}"/>
                </Grid>
                </DataTemplate>
                </GroupStyle.HeaderTemplate>
                </GroupStyle>
                </ListView.GroupStyle>
            </ListView>

            <!-- Vertical scrolling list only used when snapped -->

            <VisualStateManager.VisualStateGroups>

                <!-- Visual states reflect the application's view state -->
                <VisualStateGroup x:Name="ApplicationViewStates">
                    <VisualState x:Name="FullScreenLandscape"/>
                    <VisualState x:Name="Filled"/>

                    <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
                    <VisualState x:Name="FullScreenPortrait">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
                            </ObjectAnimationUsingKeyFrames>

                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Padding">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="96,0,10,56"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>

                    <!--
                        The back button and title have different styles when snapped, and the list representation is substituted
                        for the grid displayed in all other view states
                    -->
                    <VisualState x:Name="Snapped">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
                            </ObjectAnimationUsingKeyFrames>

                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        </Grid>
    </common:LayoutAwarePage>

    using WordpressTemplate.Data;

    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using Windows.Foundation;
    using Windows.Foundation.Collections;
    using Windows.UI;
    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 WordpressTemplate.DataModel;
    using Windows.UI.Xaml.Shapes;

    // The Grouped Items Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234231

    namespace WordpressTemplate
    {
        /// <summary>
        /// A page that displays a grouped collection of items.
        /// </summary>
        public sealed partial class GroupedItemsPage : WordpressTemplate.Common.LayoutAwarePage
        {
            public GroupedItemsPage()
            {
                this.InitializeComponent();

                var settings = Windows.Storage.ApplicationData.Current.RoamingSettings;

                if (settings.Values.ContainsKey("bgColor") && (string)settings.Values["bgColor"] != "Transparent")
                {
                    string colour = (string)settings.Values["bgColor"];

                    LayoutRoot.Background = new SolidColorBrush(Color.FromArgb(
                        Convert.ToByte(colour.Substring(1, 2), 16),
                        Convert.ToByte(colour.Substring(3, 2), 16),
                        Convert.ToByte(colour.Substring(5, 2), 16),
                        Convert.ToByte(colour.Substring(7, 2), 16)));
                }
            }

            /// <summary>
            /// Populates the page with content passed during navigation.  Any saved state is also
            /// provided when recreating a page from a prior session.
            /// </summary>
            /// <param name="navigationParameter">The parameter value passed to
            /// <see cref="Frame.Navigate(Type, Object)"/> when this page was initially requested.
            /// </param>
            /// <param name="pageState">A dictionary of state preserved by this page during an earlier
            /// session.  This will be null the first time a page is visited.</param>
            protected override void LoadState(Object navigationParameter, Dictionary<String, Object> pageState)
            {
                // TODO: Create an appropriate data model for your problem domain to replace the sample data
                //if (!App.ViewModel.IsLoaded)
                //{
                //    App.ViewModel.LoadData();
                //}
                var sampleDataGroups = App.ViewModel.Feed.Categories;
                this.DefaultViewModel["Groups"] = sampleDataGroups;
            }

            /// <summary>
            /// Invoked when a group header is clicked.
            /// </summary>
            /// <param name="sender">The Button used as a group header for the selected group.</param>
            /// <param name="e">Event data that describes how the click was initiated.</param>
            void Header_Click(object sender, RoutedEventArgs e)
            {
                // Determine what group the Button instance represents
                var group = (sender as FrameworkElement).DataContext;

                // Navigate to the appropriate destination page, configuring the new page
                // by passing required information as a navigation parameter
                this.Frame.Navigate(typeof(GroupDetailPage), ((FeedCategory)group).UniqueId);
            }

            /// <summary>
            /// Invoked when an item within a group is clicked.
            /// </summary>
            /// <param name="sender">The GridView (or ListView when the application is snapped)
            /// displaying the item clicked.</param>
            /// <param name="e">Event data that describes the item clicked.</param>
            void ItemView_ItemClick(object sender, ItemClickEventArgs e)
            {
                // Navigate to the appropriate destination page, configuring the new page
                // by passing required information as a navigation parameter
                var itemId = ((FeedItem)e.ClickedItem).UniqueId;
                this.Frame.Navigate(typeof(ItemDetailPage), itemId);
            }

            private void Rectangle_Tapped(object sender, TappedRoutedEventArgs e)
            {
                Rectangle rect = sender as Rectangle;
                LayoutRoot.Background = rect.Fill;
                Windows.Storage.ApplicationData.Current.RoamingSettings.Values["bgColor"] = (((Rectangle)sender).Fill as SolidColorBrush).Color.ToString();

                TopAppBar.IsOpen = false;
                BottomAppBar.IsOpen = false;
            }

            private void btnHome_Click(object sender, RoutedEventArgs e)
            {
                if (this.Frame != null)
                {
                    while (this.Frame.CanGoBack) this.Frame.GoBack();
                }
            }

            private void btnRefresh_Click(object sender, RoutedEventArgs e)
            {
                this.Frame.Navigate(typeof(GroupedItemsPage));
            }

            private async void ThemeButton_Click(object sender, RoutedEventArgs e)
            {
                var settings = Windows.Storage.ApplicationData.Current.RoamingSettings;
                Windows.Storage.ApplicationData.Current.RoamingSettings.Values["bgColor"] = null;

                string currentTheme = null;
                if (settings.Values.ContainsKey("currentTheme"))
                {
                    currentTheme = settings.Values["currentTheme"] as string;
                    settings.Values.Remove("currentTheme");
                }

                settings.Values.Add("currentTheme", currentTheme == "light" ? "dark" : "light");

                Windows.UI.Popups.MessageDialog dlg = new Windows.UI.Popups.MessageDialog("You need to restart and apply the theme setting.");
                await dlg.ShowAsync();
            }

            private void itemGridView_SelectionChanged(object sender, SelectionChangedEventArgs e)
            {

            }
        }
    }

    Sunday, August 18, 2013 2:19 PM

Answers

  • Hi Tommyng715,

    You have a SemanticZoom and the ZoomInView are totally correct, but there are two things I'd like to point out from your code to help you with the project.

    The first one, before debugging the project, make sure that the code(line 171) in your xaml are correct:

    ItemsSource=" {Binding Source={StaticResource groupedDetailPage}"

    should be something like below, without the right brace,  the code will not function at all:

    ItemsSource="{Binding Source={StaticResource groupedDetailPage}}"

    Then the second thing is you cannot bind any Page to the ItemsSource, a CollectionViewSource is necessary, for instance you did a quite good job for ZoomInView Grid Binding:

    <CollectionViewSource
                x:Name="groupedItemsViewSource"
                Source="{Binding Groups}"
                IsSourceGrouped="true"
                ItemsPath="Items"
                d:Source="{Binding AllGroups, Source={d:DesignInstance Type=data:SampleDataSource, IsDesignTimeCreatable=True}}"/>

    Here I have a example for you to step forward, by the third scenario in the project you will be able to get some hint. And some tutorial I think you may use.

    Best Regards,

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Tuesday, August 20, 2013 2:24 AM
    Moderator

All replies

  • Hi tommyng715,

    Thank you for supporting the forum.

    It seems you have lots of code, and I strongly recommend you can upload your project to the skydrive, thus the community members can easy testing it. And I'm trying to build a project from your code, if a project is possible, it would be nice.

    Best Regards,

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Monday, August 19, 2013 4:52 AM
    Moderator
  • https://www.dropbox.com/s/81be6mpoed6amdh/W8app_travel_SemanticZoom.7z
    Monday, August 19, 2013 9:35 AM
  • Hi tommyng715,

    Thanks and I downloaded the package and will do a test on it.

    I will back to this later today.

    Best Regards,

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Tuesday, August 20, 2013 1:07 AM
    Moderator
  • Hi Tommyng715,

    You have a SemanticZoom and the ZoomInView are totally correct, but there are two things I'd like to point out from your code to help you with the project.

    The first one, before debugging the project, make sure that the code(line 171) in your xaml are correct:

    ItemsSource=" {Binding Source={StaticResource groupedDetailPage}"

    should be something like below, without the right brace,  the code will not function at all:

    ItemsSource="{Binding Source={StaticResource groupedDetailPage}}"

    Then the second thing is you cannot bind any Page to the ItemsSource, a CollectionViewSource is necessary, for instance you did a quite good job for ZoomInView Grid Binding:

    <CollectionViewSource
                x:Name="groupedItemsViewSource"
                Source="{Binding Groups}"
                IsSourceGrouped="true"
                ItemsPath="Items"
                d:Source="{Binding AllGroups, Source={d:DesignInstance Type=data:SampleDataSource, IsDesignTimeCreatable=True}}"/>

    Here I have a example for you to step forward, by the third scenario in the project you will be able to get some hint. And some tutorial I think you may use.

    Best Regards,

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Tuesday, August 20, 2013 2:24 AM
    Moderator