public PressAndHoldPage() :
base(
"PressAndHold",
"Press and hold to learn",
"Press and hold an item to bring up detailed info or teaching visuals without invoking an action. The Tooltip control is the easiest way to implement this. This action might also bring up a context menu.",
"Similar to when you use a mouse and hover over an item.",
"Assets/press_and_hold.png")
{
this.InitializeComponent();
// Configure the app bar items for this page
// GesturePageBase.Selected uses this._nonContextualItems to populate the global app bar when the page is selected.
// Links button
this._links["Doc: Guidelines for targeting"] = new Uri("http://msdn.microsoft.com/en-us/library/windows/apps/hh465326.aspx");
this._links["API: Holding event"] = new Uri("http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.input.gesturerecognizer.holding.aspx");
this._links["API: HoldingEventArgs"] = new Uri("http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.input.holdingeventargs.aspx");
this._nonContextualItems.Add(GesturePageBase.CreateLinksAppBarButton(this._links));
this._brushes = new Windows.UI.Xaml.Media.Brush[]
{
App.Current.Resources["AppWhiteBrush"] as Windows.UI.Xaml.Media.Brush,
App.Current.Resources["AppBlueBrush"] as Windows.UI.Xaml.Media.Brush,
App.Current.Resources["AppOrangeBrush"] as Windows.UI.Xaml.Media.Brush
};
this._brushIndex = 0;
}
public SemanticZoomPage()
{
this.InitializeComponent();
SemanticZoomPage.Current = this;
// Links button
this._links = new Dictionary <string, Uri>();
this._links["Doc: Touch Interaction Design"] = new Uri("http://msdn.microsoft.com/en-us/library/windows/apps/hh465415.aspx");
this._links["Doc: Guidelines for panning"] = new Uri("http://msdn.microsoft.com/en-us/library/windows/apps/hh465310.aspx");
this._links["API: Windows.UI.Input namespace"] = new Uri("http://msdn.microsoft.com/en-us/library/windows/apps/br212145.aspx");
this._links["API: GestureRecognizer class"] = new Uri("http://msdn.microsoft.com/en-us/library/windows/apps/br241937.aspx");
this._links["API: ManipulationStarted event"] = new Uri("http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.input.gesturerecognizer.manipulationstarted.aspx");
this._linksButton = GesturePageBase.CreateLinksAppBarButton(this._links);
// Create the data source for the semantic zoom.
// This is the actual content of this app: there is one item (page) for each gesture.
this._pages = new List <IGesturePageInfo>
{
new WelcomePage().AppPageInfo,
new AppEdgyPage().AppPageInfo,
new SysEdgyPage().AppPageInfo,
new TapPage().AppPageInfo,
new PressAndHoldPage().AppPageInfo,
new SwipePage().AppPageInfo,
new ObjectZoomPage().AppPageInfo,
new RotatePage().AppPageInfo,
new SemanticZoomPage.GesturePage().AppPageInfo
};
this.gesturesViewSource.Source = this._pages;
}
public ObjectZoomPage() :
base(
"ObjectZoom",
"Pinch and stretch to zoom",
"Pinch or stretch two or more fingers on the screen to resize that object. If an object also supports panning, the user should be able to zoom and pan at the same time.",
"Similar to when you use Ctrl+scrollwheel on a mouse.",
"Assets/pinch.png")
{
this.InitializeComponent();
// Configure the app bar items for this page
// GesturePageBase.Selected uses this._nonContextualItems to populate the global app bar when the page is selected.
// Links button
this._links["Doc: Guidelines for optical zoom and resizing"] = new Uri("http://msdn.microsoft.com/en-us/library/windows/apps/hh465307.aspx");
this._nonContextualItems.Add(GesturePageBase.CreateLinksAppBarButton(this._links));
// Reset button
this._resetButton = new Windows.UI.Xaml.Controls.Button
{
Style = App.Current.Resources["ResetAppBarButtonStyle"] as Windows.UI.Xaml.Style
};
this._resetButton.Click += (object sender, Windows.UI.Xaml.RoutedEventArgs e) =>
{
this._manipulationManager.ResetManipulation();
};
}
public RotatePage() :
base(
"Rotate",
"Turn to rotate",
"Put two or more fingers on an object and turn your hand to rotate it. An object must be coded to support rotation for this to work.",
"Similar to when you use Shift+Ctrl+scrollwheel on a mouse.",
"Assets/rotate.png")
{
this.InitializeComponent();
// Configure the app bar items for this page
// GesturePageBase.Selected uses this._nonContextualItems to populate the global app bar when the page is selected.
// Links button
this._links["Doc: Guidelines for rotation"] = new Uri("http://msdn.microsoft.com/en-us/library/windows/apps/hh465315.aspx");
this._links["API: Pivot center property"] = new Uri("http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.input.gesturerecognizer.pivotcenter.aspx");
this._links["API: Pivot radius property"] = new Uri("http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.input.gesturerecognizer.pivotradius.aspx");
this._nonContextualItems.Add(GesturePageBase.CreateLinksAppBarButton(this._links));
// Reset button
this._resetButton = new Windows.UI.Xaml.Controls.Button
{
Style = App.Current.Resources["ResetAppBarButtonStyle"] as Windows.UI.Xaml.Style
};
this._resetButton.Click += (object sender, Windows.UI.Xaml.RoutedEventArgs e) =>
{
this._manipulationManager[this.leftImage].ResetManipulation();
this._manipulationManager[this.rightImage].ResetManipulation();
};
this._manipulationManager = new Dictionary <Windows.UI.Xaml.UIElement, Manipulations.ManipulationManager>();
}
public SysEdgyPage() :
base(
"SysEdgy",
"Swipe in from the left or right for system commands",
"Swipe in from the right side of the screen to show the charms (Search, Share, Start, Devices, and Settings).\nSwipe in from the left side of the screen to return to recently used apps.",
"Similar to when you move the mouse pointer into the upper-left corner and click to switch apps, and when you move the pointer into the upper-right corner, move it down the edge, and then click the charm you want.",
"Assets/sys_edgy.png")
{
this.InitializeComponent();
// Configure the app bar items for this page
// GesturePageBase.Selected uses this._nonContextualItems to populate the global app bar when the page is selected.
// Links button
this._links["API: EdgeGesture class"] = new Uri("http://msdn.microsoft.com/en-US/library/windows/apps/windows.ui.input.edgegesture");
this._links["API: EdgeGestureEventArgs class"] = new Uri("http://msdn.microsoft.com/en-US/library/windows/apps/windows.ui.input.edgegestureeventargs");
this._nonContextualItems.Add(GesturePageBase.CreateLinksAppBarButton(this._links));
}
public AppEdgyPage() :
base(
"AppEdgy",
"Swipe in from the top or bottom for app commands or to close an app",
"Swipe from the bottom or top edge to show the app commands (New, Delete, etc.). The easiest way to include commands in your app is to use the app bar.\nA longer swipe down from the top forces an app to close.",
"Similar to when you use a mouse and right-click within the app.",
"Assets/app_edgy.png")
{
this.InitializeComponent();
// Configure the app bar items for this page
// GesturePageBase.Selected uses this._nonContextualItems to populate the global app bar when the page is selected.
// Links button
this._links["API: EdgeGesture class"] = new Uri("http://msdn.microsoft.com/en-US/library/windows/apps/windows.ui.input.edgegesture");
this._links["API: EdgeGestureEventArgs"] = new Uri("http://msdn.microsoft.com/en-US/library/windows/apps/windows.ui.input.edgegestureeventargs");
this._nonContextualItems.Add(GesturePageBase.CreateLinksAppBarButton(this._links));
}
// SelectionChanged event handler for the SemanticFlipView
private void OnSelectionChanged(object sender, Windows.UI.Xaml.Controls.SelectionChangedEventArgs e)
{
// Close the app bar
this.globalAppBar.IsOpen = false;
// Let the page know it is has been unselected
foreach (var item in e.RemovedItems)
{
GesturePageBase gesturePage = (item as IGesturePageInfo).PlayArea;
gesturePage.Selected = false;
}
// Let the page know it has been selected
foreach (var item in e.AddedItems)
{
GesturePageBase gesturePage = (item as IGesturePageInfo).PlayArea;
gesturePage.Selected = true;
}
}
public SwipePage() :
base(
"Swipe",
"Swipe to select",
"Slide a short distance perpendicular to the scrolling direction to select an item. For example, if a page scrolls left and right, slide the object up or down. This selects the item and brings up the relevant app commands.",
"Similar to when you use a mouse and right-click an item.",
"Assets/swipe.png")
{
this.InitializeComponent();
// Configure the grid view that displays the tiles that can be swiped for selection
this._items = new List <string>();
for (int i = 1; i < 11; i++)
{
this._items.Add("../Assets/swipe-" + i + ".png");
}
this.itemsViewSource.Source = this._items;
// Configure the app bar items for this page
// GesturePageBase.Selected uses this._nonContextualItems to populate the global app bar when the page is selected.
// Links button
this._links["Doc: Guidelines for swipe to select/cross-slide"] = new Uri("http://msdn.microsoft.com/en-us/library/windows/apps/hh465299.aspx");
this._links["Doc: Guidelines for visual feedback"] = new Uri("http://msdn.microsoft.com/en-us/library/windows/apps/hh465342.aspx");
this._links["API: CrossSliding event"] = new Uri("http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.input.gesturerecognizer.crosssliding.aspx");
this._links["API: CrossSlidingEventArgs"] = new Uri("http://msdn.microsoft.com/en-US/library/windows/apps/windows.ui.input.crossslidingeventargs");
this._nonContextualItems.Add(GesturePageBase.CreateLinksAppBarButton(this._links));
// Store a reference to the globally shared AppBar. We will need it to automatically open the AppBar when something is selected in the grid view.
this._appBar = (Windows.UI.Xaml.Controls.AppBar)GesturesApp.Pages.SemanticZoomPage.Current.FindName("globalAppBar");
// Clear selection button
this._clearSelectionButton = new Windows.UI.Xaml.Controls.Button
{
Style = App.Current.Resources["ClearSelectionAppBarButtonStyle"] as Windows.UI.Xaml.Style
};
this._clearSelectionButton.Click += (object sender, Windows.UI.Xaml.RoutedEventArgs e) =>
{
this.tilesGridView.SelectedItems.Clear();
};
}
public TapPage() :
base(
"Tap",
"Tap for primary action",
"Tap an object to invoke the primary action, such as opening an app or executing a command. The size of the object affects how easy it is to tap accurately, so consider these guidelines when designing your touch targets.",
"Similar to when you use a mouse and single left-click.",
"Assets/tap.png")
{
this.InitializeComponent();
this._tapButtons = new Windows.UI.Xaml.Controls.Primitives.ToggleButton[]
{
tap00, tap01, tap02, tap10, tap11, tap12, tap20, tap21, tap22
};
// Configure the app bar items for this page
// GesturePageBase.Selected uses this._nonContextualItems to populate the global app bar when the page is selected.
// Links button
this._links["Doc: Guidelines for targeting"] = new Uri("http://msdn.microsoft.com/en-us/library/windows/apps/hh465326.aspx");
this._links["API: Tapped event"] = new Uri("http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.input.gesturerecognizer.tapped.aspx");
this._links["TappedEventArgs class"] = new Uri("http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.input.tappedeventargs.aspx");
this._nonContextualItems.Add(GesturePageBase.CreateLinksAppBarButton(this._links));
}
public GesturePage() :
base(
"SemanticZoom",
"Pinch to semantic zoom",
"Semantic zoom is a new concept in our touch language. It’s designed to make it fast and fluid to jump within a list of content. Pinch two or more fingers on the screen to change to an overview view. Then tap or stretch the region or item you want to see more details for. For example, in People, pinch your contact list to see alphabet tiles (A, B, etc.), and then tap the desired letter to get back to the individual contact level (J for Jan).",
"Similar to when you use a mouse and click the “-” button, usually found in the lower-right corner.",
"Assets/pinch_sezo.png")
{
// Configure the app bar items for this page
// GesturePageBase.Selected uses this._nonContextualItems to populate the global app bar when the page is selected.
// Links button
this._links["Doc: Guidelines for semantic zoom"] = new Uri("http://msdn.microsoft.com/en-us/library/windows/apps/hh465319.aspx");
this._nonContextualItems.Add(GesturePageBase.CreateLinksAppBarButton(this._links));
// Create the play area for this page
var grid = new Windows.UI.Xaml.Controls.Grid();
var row = new Windows.UI.Xaml.Controls.RowDefinition();
row.Height = new Windows.UI.Xaml.GridLength(1, Windows.UI.Xaml.GridUnitType.Star);
grid.RowDefinitions.Add(row);
row = new Windows.UI.Xaml.Controls.RowDefinition();
row.Height = new Windows.UI.Xaml.GridLength(1, Windows.UI.Xaml.GridUnitType.Auto);
grid.RowDefinitions.Add(row);
var col = new Windows.UI.Xaml.Controls.ColumnDefinition();
col.Width = new Windows.UI.Xaml.GridLength(2, Windows.UI.Xaml.GridUnitType.Star);
grid.ColumnDefinitions.Add(col);
col = new Windows.UI.Xaml.Controls.ColumnDefinition();
col.Width = new Windows.UI.Xaml.GridLength(1, Windows.UI.Xaml.GridUnitType.Star);
grid.ColumnDefinitions.Add(col);
var image = new Windows.UI.Xaml.Controls.Image
{
Margin = new Windows.UI.Xaml.Thickness(30, 30, 30, 30),
Source = new Windows.UI.Xaml.Media.Imaging.BitmapImage(new Uri("ms-appx:///Assets/semantic_zoom.png")),
Stretch = Windows.UI.Xaml.Media.Stretch.Uniform
};
grid.Children.Add(image);
Windows.UI.Xaml.Controls.Grid.SetColumn(image, 0);
Windows.UI.Xaml.Controls.Grid.SetRow(image, 0);
var textBlock = new Windows.UI.Xaml.Controls.TextBlock
{
Style = App.Current.Resources["AppSubtitleTextStyle"] as Windows.UI.Xaml.Style,
Text = "Pinch anywhere in this app to zoom out",
HorizontalAlignment = Windows.UI.Xaml.HorizontalAlignment.Center,
VerticalAlignment = Windows.UI.Xaml.VerticalAlignment.Center,
TextWrapping = Windows.UI.Xaml.TextWrapping.Wrap,
TextAlignment = Windows.UI.Xaml.TextAlignment.Center
};
grid.Children.Add(textBlock);
Windows.UI.Xaml.Controls.Grid.SetColumn(textBlock, 1);
Windows.UI.Xaml.Controls.Grid.SetRow(textBlock, 0);
this.Content = grid;
}
