Posted by: Zeeshan Amjad | October 16, 2012

SemanticZoom


With Windows 8, Microsoft added one class named SemanticZoom to enable two different view states of the page. SemanticZoom class defines two dependency properties ZoomedIn and ZoomOut to defined two different visual state of the page. This class is inherited by Control class, therefore it has all the properties which control has. In fact this is also known as SemanticZoom control. Here is a class diagram of SemanticZoom class.

SemanticZoom

In simplest form we define semantic zoom something like this.

Code Snippet
<SemanticZoom>
    <SemanticZoom.ZoomedInView>
        <!– Define Zoom In Visual Presentation –>
    </SemanticZoom.ZoomedInView>
    <SemanticZoom.ZoomedOutView>
        <!– Define Zoom Out Visual Presentation –>
    </SemanticZoom.ZoomedOutView>
</SemanticZoom>

 

It means that we have to defined two different visual representations. One important thing is that we can only make those control child of ZoomedInView or ZoomedOutView those implement ISemanticZoomInformation. This interface provide the basic information related to zooming such as IsZoomedInView, IsActiveView etc and methods to implements the zooming. Here is a code to define this interface (extracted from Visual Studio 2012).

Code Snippet
/// <summary>Communicates the info needed for a view to serve as one of the two possible
/// views (ZoomedOutView or ZoomedInView) of a SemanticZoom.</summary>
[Windows.Foundation.Metadata.WebHostHiddenAttribute()]
[Windows.Foundation.Metadata.VersionAttribute(100794368)]
[Windows.Foundation.Metadata.GuidAttribute(2808757091, 8859, 19909, 170, 17, 157, 146, 47, 191, 138, 152)]
public interface ISemanticZoomInformation
{

    /// <summary>Initializes the changes to related aspects of presentation (such as
    /// scrolling UI or state) when the overall view for a SemanticZoom is about to change.
    /// </summary>
    void InitializeViewChange();

    /// <summary>Changes related aspects of presentation (such as scrolling UI or state)
    /// when the overall view for a SemanticZoom changes.</summary>
    void CompleteViewChange();

    /// <summary>Forces content in the view to scroll until the item specified by SemanticZoomLocation
    /// is visible. Also focuses that item if found.</summary>
    /// <param name="item">The item in the view to scroll to.</param>
    void MakeVisible(Windows.UI.Xaml.Controls.SemanticZoomLocation item);

    /// <summary>Initializes item-wise operations related to a view change when the implementing
    /// view is the source view and the pending destination view is a potentially different
    /// implementing view.</summary>
    /// <param name="source">The view item as represented in the source view.</param>
    /// <param name="destination">The view item as represented in the destination view.
    /// </param>
    void StartViewChangeFrom(Windows.UI.Xaml.Controls.SemanticZoomLocation source, Windows.UI.Xaml.Controls.SemanticZoomLocation destination);

    /// <summary>Initializes item-wise operations related to a view change when the source
    /// view is a different view and the pending destination view is the implementing
    /// view.</summary>
    /// <param name="source">The view item as represented in the source view.</param>
    /// <param name="destination">The view item as represented in the destination view.
    /// </param>
    void StartViewChangeTo(Windows.UI.Xaml.Controls.SemanticZoomLocation source, Windows.UI.Xaml.Controls.SemanticZoomLocation destination);

    /// <summary>Completes item-wise operations related to a view change when the implementing
    /// view is the source view and the new view is a potentially different implementing
    /// view.</summary>
    /// <param name="source">The view item as represented in the source view.</param>
    /// <param name="destination">The view item as represented in the destination view.
    /// </param>
    void CompleteViewChangeFrom(Windows.UI.Xaml.Controls.SemanticZoomLocation source, Windows.UI.Xaml.Controls.SemanticZoomLocation destination);

    /// <summary>Completes item-wise operations related to a view change when the implementing
    /// view is the destination view and the source view is a potentially different implementing
    /// view.</summary>
    /// <param name="source">The view item as represented in the source view.</param>
    /// <param name="destination">The view item as represented in the destination view.
    /// </param>
    void CompleteViewChangeTo(Windows.UI.Xaml.Controls.SemanticZoomLocation source, Windows.UI.Xaml.Controls.SemanticZoomLocation destination);

    /// <summary>Gets or sets a value that indicates whether the implementing view is
    /// the active view.</summary>
    /// <returns>True if the implementing view is the active view; otherwise, false.
    /// </returns>
    bool IsActiveView
    {
        get;
        set;
    }

    /// <summary>Gets or sets a value that indicates whether the implementing view is
    /// the semantically more complete zoomed-in view.</summary>
    /// <returns>True if the implementing view is the zoomed-in view; otherwise, false.
    /// </returns>
    bool IsZoomedInView
    {
        get;
        set;
    }

    /// <summary>Gets or sets the SemanticZoom owner that hosts the implementing view.
    /// </summary>
    /// <returns>The SemanticZoom that hosts this view. </returns>
    Windows.UI.Xaml.Controls.SemanticZoom SemanticZoomOwner
    {
        get;
        set;
    }

}

 

Here is a class diagram of this interface.

ISemanticZoomInformation

ListView and GridView implement this interface. In fact this interface is implemented by ListViewBase class and both ListView and GridView are inherited by ListViewBase and got this functionality. Here is a class diagram of ListViewBase class.

ListViewBase

Now lets make a simple program to demonstrate semantic zoom. We just display two different text blocks.

Code Snippet
<SemanticZoom.ZoomedInView>
    <GridView VerticalAlignment="Center" HorizontalAlignment="Center" ScrollViewer.IsDeferredScrollingEnabled="False">
        <TextBlock Text="Zoom In"/>
    </GridView>
</SemanticZoom.ZoomedInView>
<SemanticZoom.ZoomedOutView>
    <GridView VerticalAlignment="Center" HorizontalAlignment="Center" ScrollViewer.IsDeferredScrollingEnabled="False">
        <TextBlock Text="Zoom Out"/>
    </GridView>
</SemanticZoom.ZoomedOutView>

 

And that’s it. We got the semantic zooming functionality in our page. It is important to note that when we are using GridView then set the ScrollViewer.IsHorizontalScrollChainingEnabled attached dependency property to false.

Here is complete XAML code of our program.

Code Snippet
<common:LayoutAwarePage
    x:Name="pageRoot"
    x:Class="BlankApp.BasicPage"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml&quot;
    xmlns:local="using:BlankApp"
    xmlns:common="using:BlankApp.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008&quot;
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006&quot;
    mc:Ignorable="d"><Page.Resources>

    <!– TODO: Delete this line if the key AppName is declared in App.xaml –>
    <x:String x:Key="AppName">SemanticZoom Demo</x:String>
</Page.Resources>

<!–
        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 Style="{StaticResource LayoutRootStyle}">
    <Grid.RowDefinitions>
        <RowDefinition Height="140"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!– Back button and page title –>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
        <TextBlock x:Name="pageTitle" Grid.Column="1" Text="{StaticResource AppName}" Style="{StaticResource PageHeaderTextStyle}" Margin="0,0,30,30"/>
    </Grid>

    <SemanticZoom Grid.Column="1" Grid.Row="1">
        <SemanticZoom.ZoomedInView>
            <GridView VerticalAlignment="Center" HorizontalAlignment="Center" ScrollViewer.IsDeferredScrollingEnabled="False">
                <TextBlock Text="Zoom In"/>
            </GridView>
        </SemanticZoom.ZoomedInView>
        <SemanticZoom.ZoomedOutView>
            <GridView VerticalAlignment="Center" HorizontalAlignment="Center" ScrollViewer.IsDeferredScrollingEnabled="False">
                <TextBlock Text="Zoom Out"/>
            </GridView>
        </SemanticZoom.ZoomedOutView>
    </SemanticZoom>

</Grid>
</common:LayoutAwarePage>

 

Here is the output of the program in different view states.

ZoomedIn

 

ZoomedOut

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: