This sample showcases basic speech synthesis using WinRT APIs to convert text to speech.
+Last word boundary hit
+ +Last sentence boundary hit
+ +
/// public MyPage()
@@ -32,22 +32,22 @@ namespace AppUIBasics.Common
/// this.navigationHelper.LoadState += navigationHelper_LoadState;
/// this.navigationHelper.SaveState += navigationHelper_SaveState;
/// }
- ///
+ ///
/// private void navigationHelper_LoadState(object sender, LoadStateEventArgs e)
/// { }
/// private void navigationHelper_SaveState(object sender, LoadStateEventArgs e)
/// { }
///
- ///
- /// 2) Register the page to call into the NavigationManager whenever the page participates
- /// in navigation by overriding the
/// protected override void OnNavigatedTo(NavigationEventArgs e)
/// {
/// navigationHelper.OnNavigatedTo(e);
/// }
- ///
+ ///
/// protected override void OnNavigatedFrom(NavigationEventArgs e)
/// {
/// navigationHelper.OnNavigatedFrom(e);
@@ -186,7 +186,6 @@ public RootFrameNavigationHelper(Frame rootFrame)
// Handle keyboard and mouse navigation requests
this.systemNavigationManager = SystemNavigationManager.GetForCurrentView();
systemNavigationManager.BackRequested += SystemNavigationManager_BackRequested;
- UpdateBackButton();
// Listen to the window directly so we will respond to hotkeys regardless
// of which element has focus.
@@ -196,7 +195,6 @@ public RootFrameNavigationHelper(Frame rootFrame)
this.CoreWindow_PointerPressed;
// Update the Back button whenever a navigation occurs.
- this.Frame.Navigated += (s, e) => UpdateBackButton();
}
private bool TryGoBack()
@@ -235,7 +233,7 @@ private void UpdateBackButton()
systemNavigationManager.AppViewBackButtonVisibility =
this.Frame.CanGoBack ? AppViewBackButtonVisibility.Visible : AppViewBackButtonVisibility.Collapsed;
}
-
+
///
/// Invoked on every keystroke, including system keys such as Alt key combinations.
/// Used to detect keyboard navigation between pages even when the page itself
@@ -322,7 +320,7 @@ private void CoreWindow_PointerPressed(CoreWindow sender,
public class LoadStateEventArgs : EventArgs
{
///
- /// The parameter value passed to
public Object NavigationParameter { get; private set; }
@@ -336,7 +334,7 @@ public class LoadStateEventArgs : EventArgs
/// Initializes a new instance of the
///
- /// The parameter value passed to GetDescendantsOfType(this DependencyObject start) where T : DependencyObject
+ {
+ return start.GetDescendants().OfType();
+ }
+
+ public static IEnumerable GetDescendants(this DependencyObject start)
+ {
+ var queue = new Queue();
+ var count1 = VisualTreeHelper.GetChildrenCount(start);
+
+ for (int i = 0; i < count1; i++)
+ {
+ var child = VisualTreeHelper.GetChild(start, i);
+ yield return child;
+ queue.Enqueue(child);
+ }
+
+ while (queue.Count > 0)
+ {
+ var parent = queue.Dequeue();
+ var count2 = VisualTreeHelper.GetChildrenCount(parent);
+
+ for (int i = 0; i < count2; i++)
+ {
+ var child = VisualTreeHelper.GetChild(parent, i);
+ yield return child;
+ queue.Enqueue(child);
+ }
+ }
+ }
+ }
+}
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/Common/ValueToStringConverter.cs b/Samples/XamlUIBasics/cs/AppUIBasics/Common/ValueToStringConverter.cs
index 940bef3d36..247632dbb5 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/Common/ValueToStringConverter.cs
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/Common/ValueToStringConverter.cs
@@ -20,7 +20,7 @@ public sealed class ValueToStringConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
- return value.ToString();
+ return value?.ToString();
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlExample.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/ControlExample.xaml
index 479c02e5ce..d95fd41f66 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ControlExample.xaml
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlExample.xaml
@@ -5,24 +5,75 @@
xmlns:local="using:AppUIBasics"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+ xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
+ xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
+ xmlns:Media="using:Microsoft.Xaml.Interactions.Media"
mc:Ignorable="d"
d:DesignHeight="300"
- d:DesignWidth="400">
-
-
-
-
-
-
+ d:DesignWidth="580"
+ x:Name="RootPanel"
+ Width="627"
+ HorizontalAlignment="Left"
+ Margin="0,0,0,24">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/AcrylicPage.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/AcrylicPage.xaml
new file mode 100644
index 0000000000..7bcf9b110c
--- /dev/null
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/AcrylicPage.xaml
@@ -0,0 +1,198 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <Rectangle
+ Fill="{ThemeResource SystemControlAcrylicElementBrush}" />
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <Rectangle
+ Fill="{ThemeResource SystemControlAcrylicWindowBrush}" />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <Rectangle
+ Fill="{ThemeResource CustomAcrylicInAppBrush}" />
+
+ <ResourceDictionary x:Key="Default">
+ <media:AcrylicBrush
+ x:Key="CustomAcrylicBrush" BackgroundSource="Backdrop"
+
+ TintOpacity="
+ </ResourceDictionary>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <Rectangle
+ Fill="{ThemeResource CustomAcrylicBackgroundBrush}" />
+
+ <ResourceDictionary x:Key="Default">
+ <media:AcrylicBrush
+ x:Key="CustomAcrylicBackgroundBrush" BackgroundSource="HostBackdrop"
+
+ TintOpacity="
+ </ResourceDictionary>
+
+
+
+
+
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/AcrylicPage.xaml.cs b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/AcrylicPage.xaml.cs
new file mode 100644
index 0000000000..e8918c7f1d
--- /dev/null
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/AcrylicPage.xaml.cs
@@ -0,0 +1,48 @@
+using System.Linq;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Controls.Primitives;
+using Windows.UI.Xaml.Media;
+using Windows.UI.Xaml.Shapes;
+
+// The Blank Page item template is documented at https://go.microsoft.com/fwlink/?LinkId=234238
+
+namespace AppUIBasics.ControlPages
+{
+ ///
+ /// An empty page that can be used on its own or navigated to within a Frame.
+ ///
+ public sealed partial class AcrylicPage : Page
+ {
+ public AcrylicPage()
+ {
+ this.InitializeComponent();
+ Loaded += AcrylicPage_Loaded;
+ }
+
+ private void AcrylicPage_Loaded(object sender, RoutedEventArgs e)
+ {
+ ColorSelector.SelectedIndex = ColorSelectorInApp.SelectedIndex = 0;
+ FallbackColorSelector.SelectedIndex = FallbackColorSelectorInApp.SelectedIndex = 0;
+ OpacitySlider.Value = OpacitySliderInApp.Value = 0.8;
+ }
+
+ private void Slider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
+ {
+ Rectangle shape = (sender == OpacitySliderInApp) ? CustomAcrylicShapeInApp : CustomAcrylicShape;
+ ((AcrylicBrush)shape.Fill).TintOpacity = e.NewValue;
+ }
+
+ private void ColorSelector_SelectionChanged(object sender, SelectionChangedEventArgs e)
+ {
+ Rectangle shape = (sender == ColorSelectorInApp) ? CustomAcrylicShapeInApp : CustomAcrylicShape;
+ ((AcrylicBrush)shape.Fill).TintColor = ((SolidColorBrush)e.AddedItems.First()).Color;
+ }
+
+ private void FallbackColorSelector_SelectionChanged(object sender, SelectionChangedEventArgs e)
+ {
+ Rectangle shape = (sender == FallbackColorSelectorInApp) ? CustomAcrylicShapeInApp : CustomAcrylicShape;
+ ((AcrylicBrush)shape.Fill).FallbackColor = ((SolidColorBrush)e.AddedItems.First()).Color;
+ }
+ }
+}
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/AppBarButtonPage.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/AppBarButtonPage.xaml
index 2c01982ca8..d48e4974ed 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/AppBarButtonPage.xaml
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/AppBarButtonPage.xaml
@@ -9,124 +9,87 @@
//
//*********************************************************
-->
-
-
-
-
-
-
-
-
-
-
- <AppBarButton Icon="Like" Label="SymbolIcon" Click="AppBarButton_Click"/>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- <AppBarButton Label="BitmapIcon" Click="AppBarButton_Click">
- <AppBarButton.Icon>
- <BitmapIcon UriSource="ms-appx:///Assets/Slices2.png"/>
- </AppBarButton.Icon>
- </AppBarButton>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- <AppBarButton Label="FontIcon" Click="AppBarButton_Click">
- <AppBarButton.Icon>
- <FontIcon FontFamily="Candara" Glyph="Σ"/>
- </AppBarButton.Icon>
- </AppBarButton>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- <AppBarButton Label="PathIcon" Click="AppBarButton_Click">
- <AppBarButton.Content>
- <Viewbox Stretch="Uniform">
- <PathIcon Data="F1 M 20,20L 24,10L 24,24L 5,24"/>
- </Viewbox>
- </AppBarButton.Content>
- </AppBarButton>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+ <AppBarButton Icon="Like" Label="SymbolIcon" Click="AppBarButton_Click"/>
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <AppBarButton Label="BitmapIcon" Click="AppBarButton_Click">
+ <AppBarButton.Icon>
+ <BitmapIcon UriSource="ms-appx:///Assets/Slices2.png"/>
+ </AppBarButton.Icon>
+ </AppBarButton>
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <AppBarButton Label="FontIcon" Click="AppBarButton_Click">
+ <AppBarButton.Icon>
+ <FontIcon FontFamily="Candara" Glyph="Σ"/>
+ </AppBarButton.Icon>
+ </AppBarButton>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <AppBarButton Label="PathIcon" Click="AppBarButton_Click">
+ <AppBarButton.Content>
+ <Viewbox Stretch="Uniform">
+ <PathIcon Data="F1 M 20,20L 24,10L 24,24L 5,24"/>
+ </Viewbox>
+ </AppBarButton.Content>
+ </AppBarButton>
+
+
+
+
\ No newline at end of file
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/AppBarButtonPage.xaml.cs b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/AppBarButtonPage.xaml.cs
index 40894b67d7..60b421c148 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/AppBarButtonPage.xaml.cs
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/AppBarButtonPage.xaml.cs
@@ -22,48 +22,39 @@ namespace AppUIBasics.ControlPages
public sealed partial class AppBarButtonPage : Page
{
AppBarToggleButton compactButton = null;
+ AppBarSeparator separator = null;
public AppBarButtonPage()
{
this.InitializeComponent();
Loaded += AppBarButtonPage_Loaded;
+ Unloaded += AppBarButtonPage_Unloaded;
}
- protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
+ private void AppBarButtonPage_Unloaded(object sender, RoutedEventArgs e)
{
- // Remove compact button from the command bar.
- base.OnNavigatingFrom(e);
- Frame rootFrame = Window.Current.Content as Frame;
- ItemPage rootPage = rootFrame.Content as ItemPage;
-
- if (rootPage != null)
- {
- CommandBar appBar = rootPage.BottomCommandBar;
- compactButton.Click -= CompactButton_Click;
- appBar.PrimaryCommands.Remove(compactButton);
- }
+ CommandBar appBar = NavigationRootPage.Current.PageHeader.TopCommandBar;
+ compactButton.Click -= CompactButton_Click;
+ appBar.PrimaryCommands.Remove(compactButton);
+ appBar.PrimaryCommands.Remove(separator);
}
void AppBarButtonPage_Loaded(object sender, RoutedEventArgs e)
{
// Add compact button to the command bar. It provides functionality specific
// to this page, and is removed when leaving the page.
- ItemPage itemPage = NavigationRootPage.RootFrame.Content as ItemPage;
- if (itemPage != null)
- {
- CommandBar appBar = itemPage.BottomCommandBar;
-
- appBar.PrimaryCommands.Insert(0, new AppBarSeparator());
+ CommandBar appBar = NavigationRootPage.Current.PageHeader.TopCommandBar;
+ separator = new AppBarSeparator();
+ appBar.PrimaryCommands.Insert(0, separator);
compactButton = new AppBarToggleButton();
compactButton.Icon = new SymbolIcon(Symbol.FontSize);
compactButton.Label = "IsCompact";
compactButton.Click += CompactButton_Click;
appBar.PrimaryCommands.Insert(0, compactButton);
- }
}
-
+
private void CompactButton_Click(object sender, RoutedEventArgs e)
{
ToggleButton toggle = sender as ToggleButton;
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/AppBarPage.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/AppBarPage.xaml
index f36254a95a..da8d11ae6d 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/AppBarPage.xaml
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/AppBarPage.xaml
@@ -18,7 +18,8 @@
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" NavigationCacheMode="Disabled">
-
+
+
-
-
-
+
-
-
+
+
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/AppBarPage.xaml.cs b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/AppBarPage.xaml.cs
index 74b1797771..292a5e9bce 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/AppBarPage.xaml.cs
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/AppBarPage.xaml.cs
@@ -28,23 +28,19 @@ public AppBarPage()
private void topAppBar_Opened(object sender, object e)
{
- ItemPage itemPage = NavigationRootPage.RootFrame.Content as ItemPage;
- if (itemPage != null)
- {
- CommandBar bottomAppBar = itemPage.BottomCommandBar;
- bottomAppBar.IsOpen = false;
- }
+ CommandBar headerTopAppBar = NavigationRootPage.Current.PageHeader.TopCommandBar;
+ headerTopAppBar.IsOpen = false;
}
private void OpenButton_Click(object sender, RoutedEventArgs e)
{
- this.TopAppBar.IsOpen = true;
+ topAppBar.IsOpen = true;
}
private void CloseButton_Click(object sender, RoutedEventArgs e)
{
- this.TopAppBar.IsOpen = false;
+ topAppBar.IsOpen = false;
}
private void NavBarButton_Click(object sender, RoutedEventArgs e)
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/AppBarSeparatorPage.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/AppBarSeparatorPage.xaml
index ab86725fec..17a4574eac 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/AppBarSeparatorPage.xaml
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/AppBarSeparatorPage.xaml
@@ -20,17 +20,19 @@
-
-
+
+
+
+
-
+
<StackPanel Orientation="Horizontal">
<AppBarButton Icon="AttachCamera" Label="Attach Camera"/>
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/AppBarSeparatorPage.xaml.cs b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/AppBarSeparatorPage.xaml.cs
index 3bb91ea1bd..ecd853e2ba 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/AppBarSeparatorPage.xaml.cs
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/AppBarSeparatorPage.xaml.cs
@@ -22,46 +22,37 @@ namespace AppUIBasics.ControlPages
public sealed partial class AppBarSeparatorPage : Page
{
AppBarToggleButton compactButton = null;
+ AppBarSeparator separator = null;
public AppBarSeparatorPage()
{
this.InitializeComponent();
Loaded += AppBarButtonPage_Loaded;
+ Unloaded += AppBarSeparatorPage_Unloaded;
}
- protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
+ private void AppBarSeparatorPage_Unloaded(object sender, RoutedEventArgs e)
{
- // Remove compact button from the command bar.
- base.OnNavigatingFrom(e);
- Frame rootFrame = Window.Current.Content as Frame;
- ItemPage rootPage = rootFrame.Content as ItemPage;
-
- if (rootPage != null)
- {
- CommandBar appBar = rootPage.BottomCommandBar;
- compactButton.Click -= CompactButton_Click;
- appBar.PrimaryCommands.Remove(compactButton);
- }
+ CommandBar appBar = NavigationRootPage.Current.PageHeader.TopCommandBar;
+ compactButton.Click -= CompactButton_Click;
+ appBar.PrimaryCommands.Remove(compactButton);
+ appBar.PrimaryCommands.Remove(separator);
}
void AppBarButtonPage_Loaded(object sender, RoutedEventArgs e)
{
// Add compact button to the command bar. It provides functionality specific
// to this page, and is removed when leaving the page.
- ItemPage itemPage = NavigationRootPage.RootFrame.Content as ItemPage;
- if (itemPage != null)
- {
- CommandBar appBar = itemPage.BottomCommandBar;
-
- appBar.PrimaryCommands.Insert(0, new AppBarSeparator());
+ CommandBar appBar = NavigationRootPage.Current.PageHeader.TopCommandBar;
+ separator = new AppBarSeparator();
+ appBar.PrimaryCommands.Insert(0, separator);
compactButton = new AppBarToggleButton();
compactButton.Icon = new SymbolIcon(Symbol.FontSize);
compactButton.Label = "IsCompact";
compactButton.Click += CompactButton_Click;
appBar.PrimaryCommands.Insert(0, compactButton);
- }
}
private void CompactButton_Click(object sender, RoutedEventArgs e)
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/AppBarToggleButtonPage.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/AppBarToggleButtonPage.xaml
index e89fed8357..683e6eb527 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/AppBarToggleButtonPage.xaml
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/AppBarToggleButtonPage.xaml
@@ -9,131 +9,94 @@
//
//*********************************************************
-->
-
-
-
-
-
-
-
-
-
-
-
-
- <AppBarToggleButton Icon="Shuffle" Label="SymbolIcon" Click="AppBarButton_Click"/>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- <AppBarToggleButton Label="BitmapIcon" Click="AppBarButton_Click">
- <AppBarToggleButton.Icon>
- <BitmapIcon UriSource="ms-appx:///Assets/Slices2.png"/>
- </AppBarToggleButton.Icon>
- </AppBarToggleButton>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- <AppBarToggleButton Label="FontIcon" Click="AppBarButton_Click">
- <AppBarToggleButton.Icon>
- <FontIcon FontFamily="Candara" Glyph="
-
- </AppBarToggleButton.Icon>
- </AppBarToggleButton>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- <AppBarToggleButton Label="PathIcon" Click="AppBarButton_Click" IsThreeState="True">
- <AppBarToggleButton.Icon>
- <PathIcon Data="F1 M 20,20L 24,10L 24,24L 5,24"/>
- </AppBarToggleButton.Icon>
- </AppBarToggleButton>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+ <AppBarToggleButton Icon="Shuffle" Label="SymbolIcon" Click="AppBarButton_Click"/>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <AppBarToggleButton Label="BitmapIcon" Click="AppBarButton_Click">
+ <AppBarToggleButton.Icon>
+ <BitmapIcon UriSource="ms-appx:///Assets/Slices2.png"/>
+ </AppBarToggleButton.Icon>
+ </AppBarToggleButton>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <AppBarToggleButton Label="FontIcon" Click="AppBarButton_Click">
+ <AppBarToggleButton.Icon>
+ <FontIcon FontFamily="Candara" Glyph="
+ </AppBarToggleButton.Icon>
+ </AppBarToggleButton>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <AppBarToggleButton Label="PathIcon" Click="AppBarButton_Click" IsThreeState="True">
+ <AppBarToggleButton.Icon>
+ <PathIcon Data="F1 M 20,20L 24,10L 24,24L 5,24"/>
+ </AppBarToggleButton.Icon>
+ </AppBarToggleButton>
+
+
+
+
\ No newline at end of file
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/AppBarToggleButtonPage.xaml.cs b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/AppBarToggleButtonPage.xaml.cs
index 1c79b76bc5..bca7d2710e 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/AppBarToggleButtonPage.xaml.cs
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/AppBarToggleButtonPage.xaml.cs
@@ -22,46 +22,37 @@ namespace AppUIBasics.ControlPages
public sealed partial class AppBarToggleButtonPage : Page
{
AppBarToggleButton compactButton = null;
+ AppBarSeparator separator = null;
public AppBarToggleButtonPage()
{
this.InitializeComponent();
Loaded += AppBarButtonPage_Loaded;
+ Unloaded += AppBarToggleButtonPage_Unloaded;
}
- protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
+ private void AppBarToggleButtonPage_Unloaded(object sender, RoutedEventArgs e)
{
- // Remove compact button from the command bar.
- base.OnNavigatingFrom(e);
- Frame rootFrame = Window.Current.Content as Frame;
- ItemPage rootPage = rootFrame.Content as ItemPage;
-
- if (rootPage != null)
- {
- CommandBar appBar = rootPage.BottomCommandBar;
- compactButton.Click -= CompactButton_Click;
- appBar.PrimaryCommands.Remove(compactButton);
- }
+ CommandBar appBar = NavigationRootPage.Current.PageHeader.TopCommandBar;
+ compactButton.Click -= CompactButton_Click;
+ appBar.PrimaryCommands.Remove(compactButton);
+ appBar.PrimaryCommands.Remove(separator);
}
void AppBarButtonPage_Loaded(object sender, RoutedEventArgs e)
{
// Add compact button to the command bar. It provides functionality specific
// to this page, and is removed when leaving the page.
- ItemPage itemPage = NavigationRootPage.RootFrame.Content as ItemPage;
- if (itemPage != null)
- {
- CommandBar appBar = itemPage.BottomCommandBar;
-
- appBar.PrimaryCommands.Insert(0, new AppBarSeparator());
+ CommandBar appBar = NavigationRootPage.Current.PageHeader.TopCommandBar;
+ separator = new AppBarSeparator();
+ appBar.PrimaryCommands.Insert(0, separator);
compactButton = new AppBarToggleButton();
compactButton.Icon = new SymbolIcon(Symbol.FontSize);
compactButton.Label = "IsCompact";
compactButton.Click += CompactButton_Click;
appBar.PrimaryCommands.Insert(0, compactButton);
- }
}
private void CompactButton_Click(object sender, RoutedEventArgs e)
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/AutoSuggestBoxPage.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/AutoSuggestBoxPage.xaml
index df62d1f49f..054b0a60d1 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/AutoSuggestBoxPage.xaml
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/AutoSuggestBoxPage.xaml
@@ -1,20 +1,15 @@
-
-
-
+
+
-
@@ -24,27 +19,22 @@
-
-
+
-
-
+
@@ -57,29 +47,5 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/BorderPage.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/BorderPage.xaml
index edb904f011..6f301312bb 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/BorderPage.xaml
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/BorderPage.xaml
@@ -9,80 +9,58 @@
//
//*********************************************************
-->
-
-
-
-
-
-
-
-
+
+
+
+
- <Border BorderThickness="<Border BorderThickness="
<TextBlock Text="Text inside a border" FontSize="18" Foreground="Black"/>
</Border>
-
-
+
-
-
-
-
-
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
\ No newline at end of file
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ButtonPage.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ButtonPage.xaml
index 24cb9fc601..41b4d49aa2 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ButtonPage.xaml
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ButtonPage.xaml
@@ -9,88 +9,58 @@
//
//*********************************************************
-->
-
-
+
-
-
-
+
+
+
+
+
+
+
+
+ <Button Content="Button" Click="Button_Click"/>
+
+
+
+
+
+
+
+
+
+
+
+ <Button Content="Button" Click="Button_Click"/>
+
+ <Image Source="/Assets/Slices.png" />
+
+ </Button>
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
- <Button Content="Button" Click="Button_Click"/>
-
-
-
-
-
-
-
-
-
-
-
-
- <Button Content="Button" Click="Button_Click"/>
-
- <Image Source="/Assets/Slices.png" />
-
- </Button>
-
-
-
-
+
-
-
-
-
-
-
-
-
-
+
+
+
+
+ <Button Background="#FF42A214" Foreground="White"
+ FontFamily="Segoe Print" FontSize="22"
+ Click="Button_Click">
+ <Button.Resources>
+ <SolidColorBrush x:Key="ButtonBackgroundPointerOver">#FF42A214</SolidColorBrush>
+ <SolidColorBrush x:Key="ButtonBackgroundPressed">#FF359308</SolidColorBrush>
+ <SolidColorBrush x:Key="ButtonForegroundPointerOver">white</SolidColorBrush>
+ <SolidColorBrush x:Key="ButtonForegroundPressed">white</SolidColorBrush>
+ <SolidColorBrush x:Key="ButtonBorderBrushPointerOver">#FF267600</SolidColorBrush>
+ <SolidColorBrush x:Key="ButtonBorderBrushPressed">#FF267600</SolidColorBrush>
+ </Button.Resources>
+ <StackPanel Orientation="Horizontal">
+ <SymbolIcon Symbol="Accept" Margin="0,0,10,0"/>
+ <TextBlock Text="Custom styles"/>
+ </StackPanel>
+ </Button>
+
+
+
+
+
+
+
+
+
+
+
+ <Button Content="Button" Click="Button_Click"/>
+
+ Style="{StaticResource refreshButtonStyle}" />
+
+
+
+
+
\ No newline at end of file
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/CalendarDatePickerPage.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/CalendarDatePickerPage.xaml
new file mode 100644
index 0000000000..8bcd19c6ce
--- /dev/null
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/CalendarDatePickerPage.xaml
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+ <CalendarDatePicker PlaceholderText="Pick a date" Header="Calendar" />
+
+
+
+
+
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/CalendarDatePickerPage.xaml.cs b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/CalendarDatePickerPage.xaml.cs
new file mode 100644
index 0000000000..fb6424c799
--- /dev/null
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/CalendarDatePickerPage.xaml.cs
@@ -0,0 +1,17 @@
+using Windows.UI.Xaml.Controls;
+
+// The Blank Page item template is documented at https://go.microsoft.com/fwlink/?LinkId=234238
+
+namespace AppUIBasics.ControlPages
+{
+ ///
+ /// An empty page that can be used on its own or navigated to within a Frame.
+ ///
+ public sealed partial class CalendarDatePickerPage : Page
+ {
+ public CalendarDatePickerPage()
+ {
+ this.InitializeComponent();
+ }
+ }
+}
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/CalendarViewPage.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/CalendarViewPage.xaml
index 0faa2a9df5..954a588845 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/CalendarViewPage.xaml
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/CalendarViewPage.xaml
@@ -1,32 +1,28 @@
-
-
-
+
+
-
-
+
+
None
Single
Multiple
-
+
- <CalendarView SelectionMode="
- IsOutOfScopeEnabled="
- CalendarIdentifier="
+ <CalendarView SelectionMode="
+ IsOutOfScopeEnabled="
+ CalendarIdentifier="
-
-
-
+
-
-
-
+
-
-
-
+
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/CanvasPage.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/CanvasPage.xaml
index fd8cd3986f..f7c0727ff3 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/CanvasPage.xaml
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/CanvasPage.xaml
@@ -9,38 +9,42 @@
//
//*********************************************************
-->
-
-
-
-
+
+
+
+
+
+
+
<Canvas Width="120" Height="120" Background="Gray">
- <Rectangle Fill="Red" Canvas.Left="<Rectangle Fill="Red" Canvas.Left="
<Rectangle Fill="Blue" Canvas.Left="20" Canvas.Top="20" Canvas.ZIndex="1"/>
<Rectangle Fill="Green" Canvas.Left="40" Canvas.Top="40" Canvas.ZIndex="2"/>
@@ -49,39 +53,24 @@
-
-
-
-
-
-
+
-
-
+
-
-
-
+
-
-
-
+
\ No newline at end of file
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/CheckBoxPage.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/CheckBoxPage.xaml
index e610c0a039..cb1d34da65 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/CheckBoxPage.xaml
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/CheckBoxPage.xaml
@@ -9,22 +9,17 @@
//
//*********************************************************
-->
-
-
-
-
+
+
+
-
@@ -33,13 +28,12 @@
-
-
+
-
@@ -48,15 +42,18 @@
-
-
+
-
@@ -71,34 +68,5 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
\ No newline at end of file
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ColorPickerPage.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ColorPickerPage.xaml
new file mode 100644
index 0000000000..ff12eb27ac
--- /dev/null
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ColorPickerPage.xaml
@@ -0,0 +1,80 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <controls:ColorPicker
+ IsColorSliderVisible="
+ IsColorChannelTextInputVisible="
+ IsHexInputVisible="
+ IsAlphaEnabled="
+ IsAlphaSliderVisible="
+ IsAlphaTextInputVisible="
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ColorPickerPage.xaml.cs b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ColorPickerPage.xaml.cs
new file mode 100644
index 0000000000..4ec560c442
--- /dev/null
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ColorPickerPage.xaml.cs
@@ -0,0 +1,18 @@
+using System.Linq;
+using Windows.UI.Xaml.Controls;
+
+// The Blank Page item template is documented at https://go.microsoft.com/fwlink/?LinkId=234238
+
+namespace AppUIBasics.ControlPages
+{
+ ///
+ /// An empty page that can be used on its own or navigated to within a Frame.
+ ///
+ public sealed partial class ColorPickerPage : Page
+ {
+ public ColorPickerPage()
+ {
+ this.InitializeComponent();
+ }
+ }
+}
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ComboBoxPage.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ComboBoxPage.xaml
index a1eac02c3d..eab11121bd 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ComboBoxPage.xaml
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ComboBoxPage.xaml
@@ -9,27 +9,22 @@
//
//*********************************************************
-->
-
-
-
-
+
+
+
-
+
Blue
Green
Red
Yellow
-
@@ -43,13 +38,14 @@
-
-
+
-
@@ -59,29 +55,5 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
\ No newline at end of file
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/CommandBarPage.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/CommandBarPage.xaml
index 9cb5f147b5..cc646fd8ee 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/CommandBarPage.xaml
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/CommandBarPage.xaml
@@ -18,29 +18,36 @@
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
-
+
+
+
+
+
+
-
-
-
+
+
+
-
-
+
+
-
-
-
+
+
+
-
-
+
+
-
+
- <CommandBar Background="Transparent" IsOpen="False">
+ <CommandBar Background="Transparent" IsOpen="False" DefaultLabelPosition="Right">
<AppBarButton Icon="Add" Label="Add"/>
<AppBarButton Icon="ReShare" Label="Share"/>
<AppBarButton Icon="Edit" Label="Edit"/>
@@ -63,5 +70,24 @@
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/CommandBarPage.xaml.cs b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/CommandBarPage.xaml.cs
index 37097b8b02..52e54d1ab7 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/CommandBarPage.xaml.cs
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/CommandBarPage.xaml.cs
@@ -27,63 +27,44 @@ public CommandBarPage()
private void OpenButton_Click(object sender, RoutedEventArgs e)
{
- ItemPage itemPage = NavigationRootPage.RootFrame.Content as ItemPage;
-
- if (itemPage != null)
- {
- CommandBar appBar = itemPage.BottomCommandBar;
-
- appBar.IsOpen = true;
- appBar.IsSticky = true;
- }
+ PrimaryCommandBar.IsOpen = true;
+ PrimaryCommandBar.IsSticky = true;
}
private void CloseButton_Click(object sender, RoutedEventArgs e)
{
- ItemPage itemPage = NavigationRootPage.RootFrame.Content as ItemPage;
-
- if (itemPage != null)
- {
- CommandBar commandBar = itemPage.BottomCommandBar;
-
- commandBar.IsOpen = false;
- }
+ PrimaryCommandBar.IsOpen = false;
+ PrimaryCommandBar.IsSticky = false;
}
private void AddSecondaryCommands_Click(object sender, RoutedEventArgs e)
{
// Add compact button to the command bar. It provides functionality specific
// to this page, and is removed when leaving the page.
- ItemPage itemPage = NavigationRootPage.RootFrame.Content as ItemPage;
- if (itemPage != null)
+ if (PrimaryCommandBar.SecondaryCommands.Count == 1)
{
- CommandBar commandBar = itemPage.BottomCommandBar;
-
- if (commandBar.SecondaryCommands.Count == 1)
- {
- var newButton = new AppBarButton();
- newButton.Icon = new SymbolIcon(Symbol.Add);
- newButton.Label = "Button 1";
- commandBar.SecondaryCommands.Add(newButton);
-
- newButton = new AppBarButton();
- newButton.Icon = new SymbolIcon(Symbol.Delete);
- newButton.Label = "Button 2";
- commandBar.SecondaryCommands.Add(newButton);
-
- commandBar.SecondaryCommands.Add(new AppBarSeparator());
-
- newButton = new AppBarButton();
- newButton.Icon = new SymbolIcon(Symbol.FontDecrease);
- newButton.Label = "Button 3";
- commandBar.SecondaryCommands.Add(newButton);
-
- newButton = new AppBarButton();
- newButton.Icon = new SymbolIcon(Symbol.FontIncrease);
- newButton.Label = "Button 4";
- commandBar.SecondaryCommands.Add(newButton);
- }
+ var newButton = new AppBarButton();
+ newButton.Icon = new SymbolIcon(Symbol.Add);
+ newButton.Label = "Button 1";
+ PrimaryCommandBar.SecondaryCommands.Add(newButton);
+
+ newButton = new AppBarButton();
+ newButton.Icon = new SymbolIcon(Symbol.Delete);
+ newButton.Label = "Button 2";
+ PrimaryCommandBar.SecondaryCommands.Add(newButton);
+
+ PrimaryCommandBar.SecondaryCommands.Add(new AppBarSeparator());
+
+ newButton = new AppBarButton();
+ newButton.Icon = new SymbolIcon(Symbol.FontDecrease);
+ newButton.Label = "Button 3";
+ PrimaryCommandBar.SecondaryCommands.Add(newButton);
+
+ newButton = new AppBarButton();
+ newButton.Icon = new SymbolIcon(Symbol.FontIncrease);
+ newButton.Label = "Button 4";
+ PrimaryCommandBar.SecondaryCommands.Add(newButton);
}
}
@@ -100,16 +81,9 @@ protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
private void RemoveSecondaryCommands()
{
- ItemPage itemPage = NavigationRootPage.RootFrame.Content as ItemPage;
-
- if (itemPage != null)
+ while (PrimaryCommandBar.SecondaryCommands.Count > 1)
{
- CommandBar commandBar = itemPage.BottomCommandBar;
-
- while (commandBar.SecondaryCommands.Count > 1)
- {
- commandBar.SecondaryCommands.RemoveAt(commandBar.SecondaryCommands.Count - 1);
- }
+ PrimaryCommandBar.SecondaryCommands.RemoveAt(PrimaryCommandBar.SecondaryCommands.Count - 1);
}
}
}
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ContentDialogExample.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ContentDialogExample.xaml
index 1bcba515fc..0e0bbaf9b2 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ContentDialogExample.xaml
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ContentDialogExample.xaml
@@ -2,24 +2,17 @@
x:Class="AppUIBasics.ControlPages.ContentDialogExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
- xmlns:local="using:AppUIBasics.ControlPages"
- xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
- xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
- mc:Ignorable="d"
- Title="SIGN IN"
- PrimaryButtonText="sign in"
- SecondaryButtonText="cancel"
- PrimaryButtonClick="ContentDialog_PrimaryButtonClick"
- SecondaryButtonClick="ContentDialog_SecondaryButtonClick">
+ Title="Save your work?"
+ PrimaryButtonText="Save"
+ SecondaryButtonText="Don't Save"
+ CloseButtonText="Cancel"
+ DefaultButton="Primary"
+ >
-
+
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ContentDialogExample.xaml.cs b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ContentDialogExample.xaml.cs
index 14bcf5b747..760493becb 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ContentDialogExample.xaml.cs
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ContentDialogExample.xaml.cs
@@ -17,63 +17,14 @@
namespace AppUIBasics.ControlPages
{
- public enum SignInResult
- {
- SignInOK,
- SignInFail,
- SignInCancel,
- Nothing
- }
-
///
/// An empty page that can be used on its own or navigated to within a Frame.
///
public sealed partial class ContentDialogExample : ContentDialog
{
- public SignInResult Result { get; private set; }
-
public ContentDialogExample()
{
this.InitializeComponent();
-
- this.Result = SignInResult.Nothing;
- }
-
- private void ContentDialog_PrimaryButtonClick(ContentDialog sender, ContentDialogButtonClickEventArgs args)
- {
- // Ensure the user name and password fields aren't empty. If a required field
- // is empty, set args.Cancel = true to keep the dialog open.
- if (string.IsNullOrEmpty(userNameTextBox.Text))
- {
- args.Cancel = true;
- errorTextBlock.Text = "User name is required.";
- }
- else if (string.IsNullOrEmpty(passwordTextBox.Password))
- {
- args.Cancel = true;
- errorTextBlock.Text = "Password is required.";
- }
-
- // If you're performing async operations in the button click handler,
- // get a deferral before you await the operation. Then, complete the
- // deferral when the async operation is complete.
-
- ContentDialogButtonClickDeferral deferral = args.GetDeferral();
- //if (await SomeAsyncSignInOperation())
- //{
- this.Result = SignInResult.SignInOK;
- //}
- //else
- //{
- // this.Result = SignInResult.SignInFail;
- //}
- deferral.Complete();
- }
-
- private void ContentDialog_SecondaryButtonClick(ContentDialog sender, ContentDialogButtonClickEventArgs args)
- {
- // User clicked Cancel.
- this.Result = SignInResult.SignInCancel;
}
}
}
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ContentDialogPage.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ContentDialogPage.xaml
index f2a6a828f9..bb51f29b82 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ContentDialogPage.xaml
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ContentDialogPage.xaml
@@ -17,27 +17,24 @@
<ContentDialog
- x:Class="AppUIBasics.ControlPages.ContentDialogExample"
- xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
- xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
- xmlns:local="using:AppUIBasics.ControlPages"
- xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
- xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
- mc:Ignorable="d"
- Title="SIGN IN"
- PrimaryButtonText="sign in"
- SecondaryButtonText="cancel"
- PrimaryButtonClick="ContentDialog_PrimaryButtonClick"
- SecondaryButtonClick="ContentDialog_SecondaryButtonClick">
+ x:Class="AppUIBasics.ControlPages.ContentDialogExample"
+ xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+ xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+ Title="Save your work?"
+ PrimaryButtonText="Save"
+ SecondaryButtonText="Don't Save"
+ CloseButtonText="Cancel"
+ DefaultButton="Primary">
+ <StackPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
- <TextBox Name="userNameTextBox" Header="User name"/>
- <PasswordBox Name="passwordTextBox" Header="Password" IsPasswordRevealButtonEnabled="True"/>
- <CheckBox Name="saveUserNameCheckBox" Content="Save user name"/>
- <TextBlock x:Name="errorTextBlock" />
- <TextBlock Text="Lorem ipsum dolor sit amet, consectetur adipisicing elit." TextWrapping="Wrap" />
+ <CheckBox Content="Upload your content to the cloud."/>
+ <TextBlock Text="Lorem ipsum dolor sit amet, adipisicing elit."
+ TextWrapping="Wrap" />
</StackPanel>
+ </ContentDialog>
-
+
\ No newline at end of file
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ContentDialogPage.xaml.cs b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ContentDialogPage.xaml.cs
index bdddebae64..cf22c125f7 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ContentDialogPage.xaml.cs
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ContentDialogPage.xaml.cs
@@ -30,19 +30,19 @@ public ContentDialogPage()
private async void ShowDialog_Click(object sender, RoutedEventArgs e)
{
ContentDialogExample dialog = new ContentDialogExample();
- await dialog.ShowAsync();
+ var result = await dialog.ShowAsync();
- if(dialog.Result == SignInResult.SignInOK)
+ if (result == ContentDialogResult.Primary)
{
- DialogResult.Text = "Dialog result successful.";
+ DialogResult.Text = "User saved their work";
}
- else if(dialog.Result == SignInResult.SignInCancel)
+ else if (result == ContentDialogResult.Secondary)
{
- DialogResult.Text = "Dialog result canceled.";
+ DialogResult.Text = "User did not save their work";
}
- else if(dialog.Result == SignInResult.Nothing)
+ else
{
- DialogResult.Text = "Dialog dismissed.";
+ DialogResult.Text = "User cancelled the dialog";
}
}
}
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/DatePickerPage.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/DatePickerPage.xaml
index ca3aa9822b..9e4f5f5b9c 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/DatePickerPage.xaml
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/DatePickerPage.xaml
@@ -9,17 +9,13 @@
//
//*********************************************************
-->
-
-
-
-
+
+
+
@@ -29,45 +25,21 @@
-
-
+
-
-
- <DatePicker
+
+ <DatePicker
DayFormat="{}{day.integer} ({dayofweek.abbreviated})" YearVisible="False" />
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
\ No newline at end of file
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/FlipViewPage.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/FlipViewPage.xaml
index 0cf1fc4cc2..318bb8b899 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/FlipViewPage.xaml
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/FlipViewPage.xaml
@@ -9,18 +9,14 @@
//
//*********************************************************
-->
-
-
-
-
+
+
+
-
-
+
+ ItemsSource="{x:Bind Items, Mode=OneWay}">
-
+
-
-
+
+
+
-
+
- <FlipView MaxWidth="400" Height="180" BorderBrush="Black" BorderThickness="1" ItemsSource="{x:Bind Groups, Mode=OneWay}">
+ <FlipView MaxWidth="400" Height="180" BorderBrush="Black" BorderThickness="1" ItemsSource="{x:Bind Items, Mode=OneWay}">
<FlipView.ItemTemplate>
- <DataTemplate x:DataType="data:ControlInfoDataGroup"">
+ <DataTemplate x:DataType="data:ControlInfoDataItem"">
<Grid>
<Image Height="120" Source="{x:Bind ImagePath}" Stretch="Uniform" VerticalAlignment="Top"/>
<Border Background="#A5FFFFFF" Height="60" VerticalAlignment="Bottom">
@@ -76,29 +78,5 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
\ No newline at end of file
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/FlipViewPage.xaml.cs b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/FlipViewPage.xaml.cs
index 564e74b16f..5c55332470 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/FlipViewPage.xaml.cs
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/FlipViewPage.xaml.cs
@@ -10,8 +10,9 @@
using AppUIBasics.Common;
using AppUIBasics.Data;
using System.Collections.Generic;
-using Windows.UI.Xaml.Navigation;
+using System.Linq;
using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Navigation;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
@@ -22,22 +23,30 @@ namespace AppUIBasics.ControlPages
///
public sealed partial class FlipViewPage : Page
{
- private IEnumerable _groups;
+ private List _items;
public FlipViewPage()
{
this.InitializeComponent();
}
- public IEnumerable Groups
+ public List Items
{
- get { return this._groups; }
+ get { return this._items; }
}
-
+
protected async override void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);
- _groups = await ControlInfoDataSource.GetGroupsAsync();
+ var groups = NavigationRootPage.Current.Groups.Any() ? NavigationRootPage.Current.Groups : await ControlInfoDataSource.GetGroupsAsync();
+ _items = new List();
+ foreach (var group in groups.Take(3))
+ {
+ foreach (var item in group.Items)
+ {
+ _items.Add(item);
+ }
+ }
}
}
}
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/FlyoutPage.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/FlyoutPage.xaml
index 236cf45cc5..a80d3d30cf 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/FlyoutPage.xaml
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/FlyoutPage.xaml
@@ -9,31 +9,26 @@
//
//*********************************************************
-->
-
-
+
-
-
-
-
+
+
-
-
+
-
-
-
+
@@ -74,17 +67,17 @@
<TextBox x:Name="MyTextBox" Text="You can edit this text by tapping it."/>
</Flyout>
</FlyoutBase.AttachedFlyout>
- </TextBlock>
+ </TextBlock>
-
-
+
-
+
@@ -100,31 +93,5 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
\ No newline at end of file
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/GridPage.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/GridPage.xaml
index c1060402c8..f58c9ab8fb 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/GridPage.xaml
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/GridPage.xaml
@@ -9,44 +9,39 @@
//
//*********************************************************
-->
-
+
-
-
-
-
+
+
-
-
-
-
@@ -61,7 +56,10 @@
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
- <Rectangle Fill="Red" Grid.Column="<Rectangle Fill="Red" Grid.Column="
<Rectangle Fill="Blue" Grid.Row="1"/>
<Rectangle Fill="Green" Grid.Column="1"/>
@@ -70,38 +68,14 @@
-
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
\ No newline at end of file
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/GridViewPage.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/GridViewPage.xaml
index 91884983bb..1846498521 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/GridViewPage.xaml
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/GridViewPage.xaml
@@ -9,83 +9,82 @@
//
//*********************************************************
-->
-
+
-
-
-
-
+
+
+
+
+
-
-
-
-
+
+
+
-
+
-
-
-
-
+
+
+
-
+
-
-
+
-
-
-
-
+
-
-
+
-
-
-
-
+
+
None
Single
Multiple
@@ -95,55 +94,43 @@
- <GridView ItemsSource="{x:Bind Groups}"
- ItemTemplate="{StaticResource
- ImageOverlayTemplate }"
+ <GridView ItemsSource="{x:Bind Items}"
+ ItemTemplate="{StaticResource ImageOverlayTemplate }"
- IsItemClickEnabled="
- IsItemClickEnabled="
+ IsSwipeEnabled="
- IsSwipeEnabled="
- CanDragItems="
- CanDragItems="
-
- SelectionMode="
- SelectionMode="
SelectionChanged="Control1_SelectionChanged"
ItemClick="Control1_ItemClick" />
-
-
-
-
+
-
-
-
+
-
-
-
+
\ No newline at end of file
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/GridViewPage.xaml.cs b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/GridViewPage.xaml.cs
index bb5e0df507..7725f0d8d9 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/GridViewPage.xaml.cs
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/GridViewPage.xaml.cs
@@ -10,6 +10,7 @@
using AppUIBasics.Common;
using AppUIBasics.Data;
using System.Collections.Generic;
+using System.Linq;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;
@@ -23,22 +24,30 @@ namespace AppUIBasics.ControlPages
///
public sealed partial class GridViewPage : Page
{
- private IEnumerable _groups;
+ private List _items;
public GridViewPage()
{
this.InitializeComponent();
}
- public IEnumerable Groups
+ public List Groups
{
- get { return this._groups; }
+ get { return this._items; }
}
protected async override void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);
- _groups = await ControlInfoDataSource.GetGroupsAsync();
+ var groups = NavigationRootPage.Current.Groups.Any() ? NavigationRootPage.Current.Groups : await ControlInfoDataSource.GetGroupsAsync();
+ _items = new List();
+ foreach (var group in groups.Take(3))
+ {
+ foreach (var item in group.Items)
+ {
+ _items.Add(item);
+ }
+ }
}
private void ItemTemplate_Click(object sender, RoutedEventArgs e)
@@ -53,8 +62,8 @@ private void Control1_SelectionChanged(object sender, SelectionChangedEventArgs
GridView gridView = sender as GridView;
if (gridView != null)
{
- SelectionOutput.Text = string.Format("You have selected {0} item(s).", gridView.SelectedItems.Count);
- }
+ SelectionOutput.Text = string.Format("You have selected {0} item(s).", gridView.SelectedItems.Count);
+ }
}
private void Control1_ItemClick(object sender, ItemClickEventArgs e)
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/HubPage.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/HubPage.xaml
index c8b7f6a901..c32e5eeb97 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/HubPage.xaml
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/HubPage.xaml
@@ -22,11 +22,11 @@
-
-
+
+
-
@@ -48,7 +48,7 @@
@@ -59,7 +59,7 @@
@@ -70,7 +70,7 @@
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/HyperlinkButtonPage.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/HyperlinkButtonPage.xaml
index 0a128a3e6e..57141be2c6 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/HyperlinkButtonPage.xaml
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/HyperlinkButtonPage.xaml
@@ -49,7 +49,7 @@
-
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ImagePage.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ImagePage.xaml
index 3d00e0c0af..6db8c7d75b 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ImagePage.xaml
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ImagePage.xaml
@@ -1,112 +1,89 @@
-
-
-
-
-
-
-
-
-
- <Image Source="/Assets/treetops.jpg" Height="100" />
-
-
-
-
-
-
-
-
-
-
-
-
-
- None <Image Height="100">
- <Image.Source>
- <BitmapImage UriSource="/Assets/treetops.jpg"
- DecodePixelHeight="100" />
- </Image.Source>
- </Image>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- <Image Stretch="None " Height="100" Width="100" Source="/Assets/valley.jpg" />
-
-
-
-
-
-
-
-
-
-
-
-
- <Image Source="/Assets/ninegrid.gif" Height="82" />
- <Image Source="/Assets/ninegrid.gif" NineGrid="3,3,3,3" Height="164" />
- <Image Source="/Assets/ninegrid.gif" NineGrid="30,20,30,20" Height="164" />
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+ <Image Source="/Assets/treetops.jpg" Height="100" />
+
+
+
+
+
+
+
+
+
+
+
+
+
+ None
+
+ <Image Height="100">
+ <Image.Source>
+ <BitmapImage UriSource="/Assets/treetops.jpg"
+ DecodePixelHeight="100" />
+ </Image.Source>
+ </Image>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <Image Stretch="None " Height="100" Width="100" Source="/Assets/valley.jpg" />
+
+
+
+
+
+
+
+
+
+
+
+ <Image Source="/Assets/ninegrid.gif" Height="82" />
+ <Image Source="/Assets/ninegrid.gif" NineGrid="3,3,3,3" Height="164" />
+ <Image Source="/Assets/ninegrid.gif" NineGrid="30,20,30,20" Height="164" />
+
+
+
+
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/InkCanvasPage.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/InkCanvasPage.xaml
index d37b4c2894..350c99c633 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/InkCanvasPage.xaml
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/InkCanvasPage.xaml
@@ -1,31 +1,28 @@
-
-
-
-
-
+
+
+
+
-
+ SelectionChanged="penColor_SelectionChanged">
Black
Red
Blue
Green
-
@@ -34,29 +31,5 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ListBoxPage.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ListBoxPage.xaml
index 304b2efbcf..863c9b77c5 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ListBoxPage.xaml
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ListBoxPage.xaml
@@ -9,47 +9,42 @@
//
//*********************************************************
-->
-
-
-
-
-
-
-
-
- Blue
- Green
- Red
- Yellow
-
-
-
-
-
- <ListBox SelectionChanged="ColorListBox_SelectionChanged" Width="200">
- <x:String>Blue<x:String>
- <x:String>Green<x:String>
- <x:String>Red<x:String>
- <x:String>Yellow<x:String>
- </ListBox>
-
-
-
-
-
+
+
+
-
+ Blue
+ Green
+ Red
+ Yellow
+
+
+
+
+
+ <ListBox SelectionChanged="ColorListBox_SelectionChanged" Width="200">
+ <x:String>Blue<x:String>
+ <x:String>Green<x:String>
+ <x:String>Red<x:String>
+ <x:String>Yellow<x:String>
+ </ListBox>
+
+
+
+
+
+
+
@@ -58,29 +53,5 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
\ No newline at end of file
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ListViewPage.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ListViewPage.xaml
index 89269deed0..e00f189a5d 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ListViewPage.xaml
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ListViewPage.xaml
@@ -9,96 +9,109 @@
//
//*********************************************************
-->
-
+
-
-
-
-
+
+
+
+
+
-
+
-
-
-
-
+
+
+
-
+
-
-
-
-
+
+
-
-
-
+
+
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
-
-
-
-
+
None
Single
Multiple
@@ -127,35 +140,10 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
\ No newline at end of file
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ListViewPage.xaml.cs b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ListViewPage.xaml.cs
index f71d26fa0c..530cd71107 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ListViewPage.xaml.cs
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ListViewPage.xaml.cs
@@ -10,6 +10,7 @@
using AppUIBasics.Common;
using AppUIBasics.Data;
using System.Collections.Generic;
+using System.Linq;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;
@@ -23,22 +24,30 @@ namespace AppUIBasics.ControlPages
///
public sealed partial class ListViewPage : Page
{
- private IEnumerable _groups;
+ private List _items;
public ListViewPage()
{
this.InitializeComponent();
}
- public IEnumerable Groups
+ public List Items
{
- get { return this._groups; }
+ get { return this._items; }
}
protected async override void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);
- _groups = await ControlInfoDataSource.GetGroupsAsync();
+ var groups = NavigationRootPage.Current.Groups.Any() ? NavigationRootPage.Current.Groups : await ControlInfoDataSource.GetGroupsAsync();
+ _items = new List();
+ foreach (var group in groups.Take(3))
+ {
+ foreach (var item in group.Items)
+ {
+ _items.Add(item);
+ }
+ }
}
private void ItemTemplate_Click(object sender, RoutedEventArgs e)
@@ -54,7 +63,7 @@ private void Control1_SelectionChanged(object sender, SelectionChangedEventArgs
if (listView != null)
{
SelectionOutput.Text = string.Format("You have selected {0} item(s).", listView.SelectedItems.Count);
- }
+ }
}
private void Control1_ItemClick(object sender, ItemClickEventArgs e)
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/MediaElementPage.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/MediaElementPage.xaml
index 231091f588..8031b6d928 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/MediaElementPage.xaml
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/MediaElementPage.xaml
@@ -1,19 +1,13 @@
-
-
-
+
+
-
@@ -24,12 +18,9 @@
-
-
@@ -39,29 +30,5 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/MediaPlayerElementPage.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/MediaPlayerElementPage.xaml
new file mode 100644
index 0000000000..bd78643a95
--- /dev/null
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/MediaPlayerElementPage.xaml
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
+ <MediaPlayerElement Source="/Assets/ladybug.wmv"
+ MaxWidth="400"
+ AutoPlay="False"
+ AreTransportControlsEnabled="True" />
+
+
+
+
+
+
+
+
+ <MediaPlayerElement Source="Assets/fishes.wmv"
+ MaxWidth="400"
+ AutoPlay="True" />
+
+
+
+
+
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/MediaPlayerElementPage.xaml.cs b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/MediaPlayerElementPage.xaml.cs
new file mode 100644
index 0000000000..5e5e828085
--- /dev/null
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/MediaPlayerElementPage.xaml.cs
@@ -0,0 +1,30 @@
+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 Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
+
+namespace AppUIBasics.ControlPages
+{
+ ///
+ /// An empty page that can be used on its own or navigated to within a Frame.
+ ///
+ public sealed partial class MediaPlayerElementPage : Page
+ {
+ public MediaPlayerElementPage()
+ {
+ this.InitializeComponent();
+ }
+ }
+}
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/MenuFlyoutPage.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/MenuFlyoutPage.xaml
index 8d69dc1ec0..15f8a72984 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/MenuFlyoutPage.xaml
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/MenuFlyoutPage.xaml
@@ -9,78 +9,71 @@
//
//*********************************************************
-->
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- <AppBarButton Icon="Sort" IsCompact="True">
- <AppBarButton.Flyout>
- <MenuFlyout>
- <MenuFlyoutItem Text="By rating" Click="MenuFlyoutItem_Click" Tag="rating">
- <MenuFlyoutItem Text="By match" Click="MenuFlyoutItem_Click" Tag="match">
- <MenuFlyoutItem Text="By distance" Click="MenuFlyoutItem_Click" Tag="distance>
- </MenuFlyout>
- </AppBarButton.Flyout>
- </AppBarButton>
-
-
-
-
-
-
-
-
- <Button Content="Options">
- <Button.Flyout>
- <MenuFlyout>
- <MenuFlyoutItem Text="Reset"/>
- <MenuFlyoutSeparator/>
- <MenuFlyoutItem Text="Repeat"/>
- <MenuFlyoutItem Text="Shuffle"/>
- </MenuFlyout>
- </Button.Flyout>
- </Button>
-
-
-
-
-
+
+
+
+ <AppBarButton Icon="Sort" IsCompact="True">
+ <AppBarButton.Flyout>
+ <MenuFlyout>
+ <MenuFlyoutItem Text="By rating" Click="MenuFlyoutItem_Click" Tag="rating">
+ <MenuFlyoutItem Text="By match" Click="MenuFlyoutItem_Click" Tag="match">
+ <MenuFlyoutItem Text="By distance" Click="MenuFlyoutItem_Click" Tag="distance>
+ </MenuFlyout>
+ </AppBarButton.Flyout>
+ </AppBarButton>
+
+
+
+
+
+
+
+ <Button Content="Options">
+ <Button.Flyout>
+ <MenuFlyout>
+ <MenuFlyoutItem Text="Reset"/>
+ <MenuFlyoutSeparator/>
+ <ToggleMenuFlyoutItem Text="Repeat"/>
+ <ToggleMenuFlyoutItem Text="Shuffle"/>
+ </MenuFlyout>
+ </Button.Flyout>
+ </Button>
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+ <Button Content="Edit Options">
+ <Button.Flyout>
+ <MenuFlyout>
+ <MenuFlyoutItem Text="Share">
+ <MenuFlyoutItem.Icon>
+ <FontIcon Glyph=""/>
+ </MenuFlyoutItem.Icon>
+ </MenuFlyoutItem>
+ <MenuFlyoutItem Text="Copy"/>
+ <MenuFlyoutItem Text="Delete"/>
+ <MenuFlyoutSeparator/>
+ <MenuFlyoutItem Text="Rename"/>
+ <MenuFlyoutItem Text="Select"/>
+ </MenuFlyout>
+ </Button.Flyout>
+ </Button>
+
+
+
+
\ No newline at end of file
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/NavigationViewPage.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/NavigationViewPage.xaml
new file mode 100644
index 0000000000..af4263ee47
--- /dev/null
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/NavigationViewPage.xaml
@@ -0,0 +1,63 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <controls:NavigationView IsSettingsVisible="
+ <controls:NavigationView.MenuItems>
+ <controls:NavigationMenuItem Icon="Play" Text="Menu Item1" />
+ <controls:NavigationMenuItemSeparator/>
+ <controls:NavigationMenuItem Icon="Save" Text="Menu Item2" />
+ <controls:NavigationMenuItem Icon="Refresh" Text="Menu Item3" />
+ </controls:NavigationView.MenuItems>
+ <Frame x:Name="contentFrame" />
+ </controls:NavigationView>
+
+
+
+
+
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/NavigationViewPage.xaml.cs b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/NavigationViewPage.xaml.cs
new file mode 100644
index 0000000000..37ec8406ed
--- /dev/null
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/NavigationViewPage.xaml.cs
@@ -0,0 +1,62 @@
+using AppUIBasics.SamplePages;
+using Windows.Foundation;
+using Windows.UI.Xaml.Controls;
+
+// The Blank Page item template is documented at https://go.microsoft.com/fwlink/?LinkId=234238
+
+namespace AppUIBasics.ControlPages
+{
+ ///
+ /// An empty page that can be used on its own or navigated to within a Frame.
+ ///
+ public sealed partial class NavigationViewPage : Page
+ {
+ public NavigationViewPage()
+ {
+ this.InitializeComponent();
+
+ AddMenuItem(Symbol.Play, "Menu Item1", NavigationMenuItem_Invoked);
+ AddMenuItem(Symbol.Save, "Menu Item2", NavigationMenuItem_Invoked_1);
+ AddMenuItem(Symbol.Refresh, "Menu Item3", NavigationMenuItem_Invoked_2);
+ }
+
+ private void AddMenuItem(Symbol icon, string text, TypedEventHandler handler)
+ {
+ var item = new NavigationMenuItem() {
+ Icon = new SymbolIcon(icon),
+ Text = text };
+ item.Invoked += handler;
+ nvSample.MenuItems.Add(item);
+ }
+
+ private void NavigationMenuItem_Invoked(Windows.UI.Xaml.Controls.NavigationMenuItem sender, object args)
+ {
+ contentFrame.Navigate(typeof(SamplePage1));
+ }
+
+ private void NavigationMenuItem_Invoked_1(Windows.UI.Xaml.Controls.NavigationMenuItem sender, object args)
+ {
+ contentFrame.Navigate(typeof(SamplePage2));
+ }
+
+ private void NavigationMenuItem_Invoked_2(Windows.UI.Xaml.Controls.NavigationMenuItem sender, object args)
+ {
+ contentFrame.Navigate(typeof(SamplePage3));
+ }
+
+ private void NavigationView_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
+ {
+ contentFrame.Navigate(typeof(SamplePage1));
+ }
+
+ private void rootGrid_SizeChanged(object sender, Windows.UI.Xaml.SizeChangedEventArgs e)
+ {
+ Example1.Width = e.NewSize.Width;
+ }
+
+ private void NavigationView_SettingsInvoked(Windows.UI.Xaml.Controls.NavigationView sender, object args)
+ {
+ contentFrame.Navigate(typeof(SampleSettingsPage));
+ }
+ }
+}
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ParallaxViewPage.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ParallaxViewPage.xaml
new file mode 100644
index 0000000000..1985029186
--- /dev/null
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ParallaxViewPage.xaml
@@ -0,0 +1,63 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <Grid>
+ <controls:ParallaxView Source="{Binding ElementName=listView}" VerticalShift="500">
+ <Image Source="ms-appx:///Assets/cliff.jpg" />
+ </controls:ParallaxView>
+ <ListView x:Name="listView" ItemsSource="{x:Bind Items}">
+ <ListView.Header>
+ <Grid>
+ <controls:ParallaxView Source="{x:Bind listView}" VerticalShift="100"
+ VerticalSourceOffsetKind="Absolute" VerticalSourceStartOffset="-50"
+ VerticalSourceEndOffset="250">
+ <Image Source="ms-appx:///Assets/cliff.jpg" />
+ </controls:ParallaxView>
+ <TextBlock Text="Scroll the list to see parallaxing of images" />
+ </Grid>
+ </ListView.Header>
+ </ListView>
+ </Grid>
+
+
+
+
+
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ParallaxViewPage.xaml.cs b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ParallaxViewPage.xaml.cs
new file mode 100644
index 0000000000..53c805ba76
--- /dev/null
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ParallaxViewPage.xaml.cs
@@ -0,0 +1,64 @@
+using AppUIBasics.Data;
+using System;
+using System.Collections.Generic;
+using System.ComponentModel;
+using System.Linq;
+using System.Runtime.CompilerServices;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Navigation;
+
+// The Blank Page item template is documented at https://go.microsoft.com/fwlink/?LinkId=234238
+
+namespace AppUIBasics.ControlPages
+{
+ ///
+ /// An empty page that can be used on its own or navigated to within a Frame.
+ ///
+ public sealed partial class ParallaxViewPage : Page, INotifyPropertyChanged
+ {
+ private List _items;
+
+ public ParallaxViewPage()
+ {
+ this.InitializeComponent();
+ }
+
+ public List Items
+ {
+ get { return _items; }
+ set { SetProperty(ref _items, value); }
+ }
+
+ protected async override void OnNavigatedTo(NavigationEventArgs e)
+ {
+ base.OnNavigatedTo(e);
+
+ IEnumerable groups = await ControlInfoDataSource.GetGroupsAsync();
+ List items = new List();
+ foreach (ControlInfoDataGroup group in groups)
+ {
+ foreach (ControlInfoDataItem item in group.Items)
+ {
+ items.Add(item);
+ }
+ }
+ Items = items.OrderBy(item => item.Title).ToList();
+ }
+
+ public event PropertyChangedEventHandler PropertyChanged;
+
+ private bool SetProperty(ref T storage, T value, [CallerMemberName] String propertyName = null)
+ {
+ if (Equals(storage, value)) return false;
+
+ storage = value;
+ this.OnPropertyChanged(propertyName);
+ return true;
+ }
+
+ private void OnPropertyChanged([CallerMemberName] string propertyName = null)
+ {
+ this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
+ }
+ }
+}
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/PersonPicturePage.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/PersonPicturePage.xaml
new file mode 100644
index 0000000000..79c1a6567e
--- /dev/null
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/PersonPicturePage.xaml
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <PersonPicture ProfilePicture="ms-appx:///Assets/grapes.jpg" />
+
+
+ <PersonPicture DisplayName="John Doe" />
+
+
+ <PersonPicture Initials="SB" />
+
+
+
+
+
+
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/PersonPicturePage.xaml.cs b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/PersonPicturePage.xaml.cs
new file mode 100644
index 0000000000..e9c756ad4f
--- /dev/null
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/PersonPicturePage.xaml.cs
@@ -0,0 +1,17 @@
+using Windows.UI.Xaml.Controls;
+
+// The Blank Page item template is documented at https://go.microsoft.com/fwlink/?LinkId=234238
+
+namespace AppUIBasics.ControlPages
+{
+ ///
+ /// An empty page that can be used on its own or navigated to within a Frame.
+ ///
+ public sealed partial class PersonPicturePage : Page
+ {
+ public PersonPicturePage()
+ {
+ this.InitializeComponent();
+ }
+ }
+}
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/PivotPage.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/PivotPage.xaml
index 5598384501..251731140c 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/PivotPage.xaml
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/PivotPage.xaml
@@ -6,39 +6,40 @@
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- <Pivot Title="EMAIL">
- <PivotItem Header="All">
- <TextBlock Text="all emails go here." />
- </PivotItem>
- <PivotItem Header="Unread">
- <TextBlock Text="unread emails go here." />
- </PivotItem>
- <PivotItem Header="Flagged">
- <TextBlock Text="flagged emails go here." />
- </PivotItem>
- <PivotItem Header="Urgent">
- <TextBlock Text="urgent emails go here." />
- </PivotItem>
- </Pivot>
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <Pivot Title="EMAIL">
+ <PivotItem Header="All">
+ <TextBlock Text="all emails go here." />
+ </PivotItem>
+ <PivotItem Header="Unread">
+ <TextBlock Text="unread emails go here." />
+ </PivotItem>
+ <PivotItem Header="Flagged">
+ <TextBlock Text="flagged emails go here." />
+ </PivotItem>
+ <PivotItem Header="Urgent">
+ <TextBlock Text="urgent emails go here." />
+ </PivotItem>
+ </Pivot>
+
+
+
+
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ProgressBarPage.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ProgressBarPage.xaml
index daaa6d9e99..38572d6be4 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ProgressBarPage.xaml
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ProgressBarPage.xaml
@@ -9,42 +9,38 @@
//
//*********************************************************
-->
-
-
-
-
-
-
-
+
+
+
+
+
- <ProgressBar Width="130" IsIndeterminate="True" ShowPaused="<ProgressBar Width="130" IsIndeterminate="True"
+ ShowPaused="
-
-
+
-
@@ -53,5 +49,24 @@
-
-
\ No newline at end of file
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ProgressRingPage.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ProgressRingPage.xaml
index 9e5676b942..186ca239b1 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ProgressRingPage.xaml
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ProgressRingPage.xaml
@@ -17,18 +17,20 @@
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
-
-
-
-
+
+
+
+
+
+ <ProgressRing IsActive="
+
+
+
-
-
-
- <ProgressRing IsActive="
-
-
-
\ No newline at end of file
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/PullToRefreshPage.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/PullToRefreshPage.xaml
new file mode 100644
index 0000000000..f59e73d96b
--- /dev/null
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/PullToRefreshPage.xaml
@@ -0,0 +1,58 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/PullToRefreshPage.xaml.cs b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/PullToRefreshPage.xaml.cs
new file mode 100644
index 0000000000..c8e059b8fe
--- /dev/null
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/PullToRefreshPage.xaml.cs
@@ -0,0 +1,64 @@
+//*********************************************************
+//
+// Copyright (c) Microsoft. All rights reserved.
+// THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF
+// ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY
+// IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR
+// PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.
+//
+//*********************************************************
+//using Microsoft.UI.Preview;
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+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 Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
+
+namespace AppUIBasics.ControlPages
+{
+ ///
+ /// An empty page that can be used on its own or navigated to within a Frame.
+ ///
+ public sealed partial class PullToRefreshPage : Page
+ {
+#if false
+ private ObservableCollection items = new ObservableCollection();
+
+ public PullToRefreshPage()
+ {
+ this.InitializeComponent();
+ foreach (var c in @"AcrylicBrush ColorPicker NavigationView ParallaxView PersonPicture PullToRefresh RatingsControl RevealBrush TreeView".Split(' '))
+ items.Add(c);
+ lv.ItemsSource = items;
+ }
+
+ private void Rc_Loaded(object sender, RoutedEventArgs e)
+ {
+ rc.RefreshVisualizer.RefreshRequested += RefreshVisualizer_RefreshRequested;
+ }
+
+ private void RefreshVisualizer_RefreshRequested(Windows.UI.Xaml.Controls.RefreshVisualizer sender, Windows.UI.Xaml.Controls.RefreshRequestedEventArgs args)
+ {
+ items.Insert(0, "NewControl");
+ args.GetDeferral().Complete();
+ }
+#else
+ public PullToRefreshPage()
+ {
+ this.InitializeComponent();
+ }
+#endif
+ }
+}
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/RadioButtonPage.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/RadioButtonPage.xaml
index cde7228b99..e302e15369 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/RadioButtonPage.xaml
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/RadioButtonPage.xaml
@@ -9,30 +9,28 @@
//
//*********************************************************
-->
-
-
+
-
+
-
-
-
@@ -45,28 +43,41 @@
-
-
+
-
-
+
+
+
+
-
-
+
+
+
+
-
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/RatingsControlPage.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/RatingsControlPage.xaml
new file mode 100644
index 0000000000..d2ba98579c
--- /dev/null
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/RatingsControlPage.xaml
@@ -0,0 +1,47 @@
+
+
+
+
+
+
+
+
+
+
+
+ <controls:RatingsControl IsClearEnabled="
+
+
+
+
+
+
+
+
+
+
+ <controls:RatingsControl PlaceholderValue="
+
+
+
+
+
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/RatingsControlPage.xaml.cs b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/RatingsControlPage.xaml.cs
new file mode 100644
index 0000000000..f31725a19b
--- /dev/null
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/RatingsControlPage.xaml.cs
@@ -0,0 +1,17 @@
+using Windows.UI.Xaml.Controls;
+
+// The Blank Page item template is documented at https://go.microsoft.com/fwlink/?LinkId=234238
+
+namespace AppUIBasics.ControlPages
+{
+ ///
+ /// An empty page that can be used on its own or navigated to within a Frame.
+ ///
+ public sealed partial class RatingsControlPage : Page
+ {
+ public RatingsControlPage()
+ {
+ this.InitializeComponent();
+ }
+ }
+}
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/RepeatButtonPage.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/RepeatButtonPage.xaml
index e044e66a1a..6aae2113ae 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/RepeatButtonPage.xaml
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/RepeatButtonPage.xaml
@@ -17,17 +17,22 @@
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
-
-
-
-
-
-
- <RepeatButton Content="Click and hold" Click="RepeatButton_Click"/>
-
-
-
+
+
+
+
+
+
+ <RepeatButton Content="Click and hold" Click="RepeatButton_Click"/>
+
+
+
+
\ No newline at end of file
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/RevealPage.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/RevealPage.xaml
new file mode 100644
index 0000000000..23671832c2
--- /dev/null
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/RevealPage.xaml
@@ -0,0 +1,114 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <Button Style="{StaticResource ButtonRevealStyle}" Content="Button" />
+
+
+
+
+
+
+
+
+
+
+
+
+ <Grid BorderThickness="3" BorderBrush="{ThemeResource SystemControlRevealBorderListMediumBrush}">
+ <TextBlock Text="SystemControlRevealBorderChromeWhiteBrush" />
+ </Grid>
+
+
+
+
+
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/RevealPage.xaml.cs b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/RevealPage.xaml.cs
new file mode 100644
index 0000000000..87e4e5eac2
--- /dev/null
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/RevealPage.xaml.cs
@@ -0,0 +1,17 @@
+using Windows.UI.Xaml.Controls;
+
+// The Blank Page item template is documented at https://go.microsoft.com/fwlink/?LinkId=234238
+
+namespace AppUIBasics.ControlPages
+{
+ ///
+ /// An empty page that can be used on its own or navigated to within a Frame.
+ ///
+ public sealed partial class RevealPage : Page
+ {
+ public RevealPage()
+ {
+ this.InitializeComponent();
+ }
+ }
+}
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/RichTextBlockPage.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/RichTextBlockPage.xaml
index c20ef5bd4f..01737c892c 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/RichTextBlockPage.xaml
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/RichTextBlockPage.xaml
@@ -9,130 +9,91 @@
//
//*********************************************************
-->
-
-
-
-
-
-
- I am a RichTextBlock.
-
-
-
-
- <RichTextBlock>
- <Paragraph>I am a RichTextBlock.</Paragraph>
- </RichTextBlock>
-
-
-
-
-
-
-
-
- RichTextBlock provides a rich text display container that supports
- formatted text ,
- hyperlinks , inline images, and other rich content.
-
- RichTextBlock also supports a built-in overflow model.
-
-
-
-
- <RichTextBlock SelectionHighlightColor="Green">
- <Paragraph>RichTextBlock provides a rich text display container that supports
- <Run FontStyle="Italic" FontWeight="Bold">formatted text</Run>,
- <Hyperlink NavigateUri="http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.documents.hyperlink.aspx">hyperlinks</Hyperlink>, inline images, and other rich content.</Paragraph>
- <Paragraph>RichTextBlock also supports a built-in overflow model.</Paragraph>
- </RichTextBlock>
-
-
-
-
-
-
-
-
-
-
-
- Linked text containers allow text which does not fit in one element to overflow into a different element on the page. Creative use of linked text containers enables basic multicolumn support and other advanced page layouts.
-
-
- Duis sed nulla metus, id hendrerit velit. Curabitur dolor purus, bibendum eu cursus lacinia, interdum vel augue. Aenean euismod eros et sapien vehicula dictum. Duis ullamcorper, turpis nec feugiat tincidunt, dui erat luctus risus, aliquam accumsan lacus est vel quam. Nunc lacus massa, varius eget accumsan id, congue sed orci. Duis dignissim hendrerit egestas. Proin ut turpis magna, sit amet porta erat. Nunc semper metus nec magna imperdiet nec vestibulum dui fringilla. Sed sed ante libero, nec porttitor mi. Ut luctus, neque vitae placerat egestas, urna leo auctor magna, sit amet ultricies ipsum felis quis sapien. Proin eleifend varius dui, at vestibulum nunc consectetur nec. Mauris nulla elit, ultrices a sodales non, aliquam ac est. Quisque sit amet risus nulla. Quisque vestibulum posuere velit, vitae vestibulum eros scelerisque sit amet. In in risus est, at laoreet dolor. Nullam aliquet pellentesque convallis. Ut vel tincidunt nulla. Mauris auctor tincidunt auctor.
- Aenean orci ante, vulputate ac sagittis sit amet, consequat at mi. Morbi elementum purus consectetur nisi adipiscing vitae blandit sapien placerat. Aliquam adipiscing tortor non sem lobortis consectetur mattis felis rhoncus. Nunc eu nunc rhoncus arcu sollicitudin ultrices. In vulputate eros in mauris aliquam id dignissim nisl laoreet.
-
-
-
-
-
-
- <Grid>
- <Grid.ColumnDefinitions>
- <ColumnDefinition/>
- <ColumnDefinition/>
- <ColumnDefinition/>
- <Grid.ColumnDefinitions>
-
- <RichTextBlock Grid.Column="0"
- OverflowContentTarget="{x:Bind firstOverflowContainer}" TextAlignment="Justify" Margin="12,0">
-
- <Paragraph>Linked text containers allow text which does not fit in one element to overflow into a different element on the page. Creative use of linked text containers enables basic multicolumn support and other advanced page layouts.</Paragraph>
- <!-- Additional content not shown. -->
- </RichTextBlock>
-
- <RichTextBlockOverflow
- x:Name="firstOverflowContainer" OverflowContentTarget="{x:Bind secondOverflowContainer}" Grid.Column="1" Margin="12,0"/>
-
-
- <RichTextBlockOverflow
- x:Name="secondOverflowContainer" Grid.Column="2" Margin="12,0"/>
-
- </Grid>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+ I am a RichTextBlock.
+
+
+
+
+ <RichTextBlock>
+ <Paragraph>I am a RichTextBlock.</Paragraph>
+ </RichTextBlock>
+
+
+
+
+
+
+ RichTextBlock provides a rich text display container that supports
+ formatted text ,
+ hyperlinks , inline images, and other rich content.
+
+ RichTextBlock also supports a built-in overflow model.
+
+
+
+
+ <RichTextBlock SelectionHighlightColor="Green">
+ <Paragraph>RichTextBlock provides a rich text display container that supports
+ <Run FontStyle="Italic" FontWeight="Bold">formatted text</Run>,
+ <Hyperlink NavigateUri="http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.documents.hyperlink.aspx">hyperlinks</Hyperlink>, inline images, and other rich content.</Paragraph>
+ <Paragraph>RichTextBlock also supports a built-in overflow model.</Paragraph>
+ </RichTextBlock>
+
+
+
+
+
+
+
+
+
+ Linked text containers allow text which does not fit in one element to overflow into a different element on the page. Creative use of linked text containers enables basic multicolumn support and other advanced page layouts.
+ Duis sed nulla metus, id hendrerit velit. Curabitur dolor purus, bibendum eu cursus lacinia, interdum vel augue. Aenean euismod eros et sapien vehicula dictum. Duis ullamcorper, turpis nec feugiat tincidunt, dui erat luctus risus, aliquam accumsan lacus est vel quam. Nunc lacus massa, varius eget accumsan id, congue sed orci. Duis dignissim hendrerit egestas. Proin ut turpis magna, sit amet porta erat. Nunc semper metus nec magna imperdiet nec vestibulum dui fringilla. Sed sed ante libero, nec porttitor mi. Ut luctus, neque vitae placerat egestas, urna leo auctor magna, sit amet ultricies ipsum felis quis sapien. Proin eleifend varius dui, at vestibulum nunc consectetur nec. Mauris nulla elit, ultrices a sodales non, aliquam ac est. Quisque sit amet risus nulla. Quisque vestibulum posuere velit, vitae vestibulum eros scelerisque sit amet. In in risus est, at laoreet dolor. Nullam aliquet pellentesque convallis. Ut vel tincidunt nulla. Mauris auctor tincidunt auctor.
+ Aenean orci ante, vulputate ac sagittis sit amet, consequat at mi. Morbi elementum purus consectetur nisi adipiscing vitae blandit sapien placerat. Aliquam adipiscing tortor non sem lobortis consectetur mattis felis rhoncus. Nunc eu nunc rhoncus arcu sollicitudin ultrices. In vulputate eros in mauris aliquam id dignissim nisl laoreet.
+
+
+
+
+
+ <Grid>
+ <Grid.ColumnDefinitions>
+ <ColumnDefinition/>
+ <ColumnDefinition/>
+ <ColumnDefinition/>
+ <Grid.ColumnDefinitions>
+ <RichTextBlock Grid.Column="0"
+ OverflowContentTarget="{x:Bind firstOverflowContainer}" TextAlignment="Justify" Margin="12,0">
+
+ <Paragraph>Linked text containers allow text which does not fit in one element to overflow into a different element on the page. Creative use of linked text containers enables basic multicolumn support and other advanced page layouts.</Paragraph>
+ <!-- Additional content not shown. -->
+ </RichTextBlock>
+ <RichTextBlockOverflow
+ x:Name="firstOverflowContainer" OverflowContentTarget="{x:Bind secondOverflowContainer}" Grid.Column="1" Margin="12,0"/>
+
+ <RichTextBlockOverflow
+ x:Name="secondOverflowContainer" Grid.Column="2" Margin="12,0"/>
+
+ </Grid>
+
+
+
+
\ No newline at end of file
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ScrollViewerPage.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ScrollViewerPage.xaml
index cfc7648add..51388711e8 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ScrollViewerPage.xaml
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ScrollViewerPage.xaml
@@ -9,68 +9,70 @@
//
//*********************************************************
-->
-
-
-
+
+
-
-
+
-
+
-
+
Enabled
Disabled
-
-
-
-
+
Auto
Enabled
Disabled
-
+
Auto
Visible
Hidden
Disabled
-
-
+
Auto
Enabled
Disabled
-
+
Auto
Visible
Hidden
@@ -81,38 +83,18 @@
<ScrollViewer Height="270" ZoomMode="Disabled"
- IsVerticalScrollChainingEnabled="True"
+ IsVerticalScrollChainingEnabled="True"
ManipulationCompleted="Control1_ManipulationCompleted"
- HorizonalScrollMode="
- VerticalScrollMode="
+ HorizonalScrollMode="
+ VerticalScrollMode="
<Image Source="ms-appx:///Assets/cliff.jpg" Stretch="None" HorizontalAlignment="Left" VerticalAlignment="Top"/>
</ScrollViewer>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
\ No newline at end of file
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/SemanticZoomPage.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/SemanticZoomPage.xaml
index bf6e2cc054..1ecbc23793 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/SemanticZoomPage.xaml
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/SemanticZoomPage.xaml
@@ -24,8 +24,8 @@
d:Source="{Binding Groups, Source={d:DesignData Source=/DataModel/ControlInfoData.json, Type=data:ControlInfoDataSource}}"/>
-
-
+
+
-
-
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/SemanticZoomPage.xaml.cs b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/SemanticZoomPage.xaml.cs
index cdcbd788d9..49e92657e8 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/SemanticZoomPage.xaml.cs
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/SemanticZoomPage.xaml.cs
@@ -39,5 +39,10 @@ protected async override void OnNavigatedTo(NavigationEventArgs e)
_groups = await ControlInfoDataSource.GetGroupsAsync();
}
+
+ private void List_GotFocus(object sender, Windows.UI.Xaml.RoutedEventArgs e)
+ {
+ Control1.StartBringIntoView();
+ }
}
}
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/SliderPage.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/SliderPage.xaml
index cde322bad6..fddecc3d10 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/SliderPage.xaml
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/SliderPage.xaml
@@ -9,98 +9,68 @@
//
//*********************************************************
-->
-
-
-
-
-
-
-
-
-
- <Slider Width="200"/>
-
-
-
-
-
-
-
-
-
- <Slider Width="200"
- Minimum="500" Maximum="1000" StepFrequency="10"
-
-
- SmallChange="10" LargeChange="100" Value="800" />
-
-
-
-
-
-
-
-
-
-
-
-
- <Slider
- TickFrequency="10" TickPlacement="Outside" />
-
-
-
-
-
-
-
-
-
-
- <Slider Width="100" Orientation="Vertical" TickFrequency="10"
- TickPlacement="Outside" Maximum="50" Minimum="-50"/>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+ <Slider Width="200"/>
+
+
+
+
+
+
+
+
+ <Slider Width="200"
+ Minimum="500" Maximum="1000" StepFrequency="10"
+
+
+ SmallChange="10" LargeChange="100" Value="800" />
+
+
+
+
+
+
+
+
+
+ <Slider
+ TickFrequency="10" TickPlacement="Outside" />
+
+
+
+
+
+
+
+
+
+ <Slider Width="100" Orientation="Vertical" TickFrequency="10"
+ TickPlacement="Outside" Maximum="50" Minimum="-50"/>
+
+
+
+
\ No newline at end of file
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/SplitViewPage.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/SplitViewPage.xaml
index def47f7379..044c560ac5 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/SplitViewPage.xaml
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/SplitViewPage.xaml
@@ -1,61 +1,63 @@
-
-
+
-
-
+
-
-
-
-
+
+
+
-
-
+
-
-
-
- <SplitView x:Name="splitView" PaneBackground="
+ <SplitView x:Name="splitView" PaneBackground="
<SplitView.Pane>
<Grid>
<Grid.RowDefinitions>
@@ -86,64 +88,31 @@
-
-
+
-
+
Inline
CompactInline
Overlay
CompactOverlay
-
+
SystemControlBackgroundChromeMediumLowBrush
Red
Blue
Green
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/StackPanelPage.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/StackPanelPage.xaml
index 3d861648c0..15c0a9a382 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/StackPanelPage.xaml
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/StackPanelPage.xaml
@@ -9,31 +9,25 @@
//
//*********************************************************
-->
-
-
-
+
+
-
@@ -48,36 +42,14 @@
-
-
-
-
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/SwipePage.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/SwipePage.xaml
new file mode 100644
index 0000000000..7f8bb57031
--- /dev/null
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/SwipePage.xaml
@@ -0,0 +1,183 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/SwipePage.xaml.cs b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/SwipePage.xaml.cs
new file mode 100644
index 0000000000..279eabfa59
--- /dev/null
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/SwipePage.xaml.cs
@@ -0,0 +1,79 @@
+//*********************************************************
+//
+// Copyright (c) Microsoft. All rights reserved.
+// THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF
+// ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY
+// IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR
+// PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.
+//
+//*********************************************************
+//using Microsoft.UI.Preview;
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+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 Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
+
+namespace AppUIBasics.ControlPages
+{
+ ///
+ /// An empty page that can be used on its own or navigated to within a Frame.
+ ///
+ public sealed partial class SwipePage : Page
+ {
+#if false
+ public SwipePage()
+ {
+ this.InitializeComponent();
+
+ lv.ItemsSource = @"AcrylicBrush ColorPicker NavigationView ParallaxView PersonPicture PullToRefresh RatingsControl RevealBrush TreeView".Split(' ');
+ }
+
+ ObservableCollection
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ViewBoxPage.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ViewBoxPage.xaml
index 63d92c3618..7edccb04eb 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ViewBoxPage.xaml
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ControlPages/ViewBoxPage.xaml
@@ -9,36 +9,31 @@
//
//*********************************************************
-->
-
-
-
-
-
+
+
+
+
-
-
- <Viewbox Height="
+ <Viewbox Height="
<Border BorderBrush="Gray" BorderThickness="15">
<StackPanel Background="DarkGray">
@@ -56,49 +51,29 @@
-
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
+
+
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/DataModel/ControlInfoData.json b/Samples/XamlUIBasics/cs/AppUIBasics/DataModel/ControlInfoData.json
index 75b3604af8..ad17a9bf54 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/DataModel/ControlInfoData.json
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/DataModel/ControlInfoData.json
@@ -1,907 +1,1575 @@
{
- "Groups": [
+ "Groups": [
+ {
+ "UniqueId": "AllControls",
+ "Title": "All controls",
+ "Subtitle": "",
+ "ImagePath": "ms-appx:///Assets/NavigationViewItemIcons/AllControlsIcon.png",
+ "Description": "",
+ "Items": []
+ },
+ {
+ "UniqueId": "NewControls",
+ "Title": "New controls",
+ "Subtitle": "",
+ "ImagePath": "ms-appx:///Assets/NavigationViewItemIcons/NewControlsIcon.png",
+ "Description": "",
+ "Items": []
+ },
+ {
+ "UniqueId": "Commanding",
+ "Title": "Commanding",
+ "Subtitle": "AppBar, CommandBar, AppBarButton, AppBarToggleButton, AppBarSeparator",
+ "ImagePath": "ms-appx:///Assets/NavigationViewItemIcons/CommandingIcon.png",
+ "Description": "Use app bars to present navigation, commands, and tools to users.",
+ "Items": [
+ {
+ "UniqueId": "AppBar",
+ "Title": "AppBar",
+ "Subtitle": "A toolbar for displaying application-specific commands, navigation, and tools. Use CommandBar rather than AppBar for the most up-to-date features.",
+ "ImagePath": "ms-appx:///Assets/AppBar.png",
+ "Description": "An app bar is a UI element that presents navigation, commands, and tools to the user. An app bar can appear at the top of the page, at the bottom of the page, or both. It is hidden by default, and is shown or dismissed when the user right clicks, presses Windows+Z, or swipes from the top or bottom edge of the screen.",
+ "Content": "This page shows a simplified navigation bar to demonstrate basic AppBar usage. When you resize the page (by placing apps side-by-side, for example), the AppBar control doesn't resize it's content, so you have to manage that yourself. Look at the AppBarPage.xaml file in Visual Studio to see this simplified app bar.
This app also uses a shared AppBar in NavigationRootPage for navigation. To see an example of more complex app bar content, look at the files in the Navigation folder in Visual Studio.
",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "AppBar",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.appbar.aspx"
+ },
+ {
+ "Title": "Quickstart: Adding app bars",
+ "Uri": "https://docs.microsoft.com/windows/uwp/controls-and-patterns/app-bars"
+ }
+ ],
+ "RelatedControls": [
+ "CommandBar",
+ "AppBarButton",
+ "AppBarToggleButton",
+ "AppBarSeparator"
+ ]
+ },
+ {
+ "UniqueId": "AppBarButton",
+ "Title": "AppBarButton",
+ "Subtitle": "A button that's styled for use in a CommandBar.",
+ "ImagePath": "ms-appx:///Assets/AppBarButton.png",
+ "Description": "App bar buttons differ from standard buttons in several ways:\n- Their default appearance is a transparent background with a smaller size.\n- You use the Label and Icon properties to set the content instead of the Content property. The Content property is ignored.\n- The button's IsCompact property controls its size.",
+ "Content": "You can open the app bar and toggle the IsCompact button to see how the app bar buttons on this page change.
Use the Label and Icon properties to define the content of the app bar buttons. Set the Label property to a string to specify the text label. The label is shown by default but is hidden when the button is in its compact state, so you also need to specify a meaningful icon. To do that, set the button's Icon property to an element derived from the IconElement class. Four kinds of icon elements are provided:
FontIcon - The icon is based on a glyph from the specified font family.
BitmapIcon - The icon is based on a bitmap image file with the specified Uri.
PathIcon - The icon is based on Path data.
SymbolIcon - The icon is based on a predefined list of glyphs from the Segoe UI Symbol font.
Look at the AppBarButtonPage.xaml file in Visual Studio to see the full code for this page.
",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "AppBarButton",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.appbarbutton.aspx"
+ },
+ {
+ "Title": "SymbolIcon",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.symbolicon.aspx"
+ },
+ {
+ "Title": "FontIcon",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.fonticon.aspx"
+ },
+ {
+ "Title": "BitmapIcon",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.bitmapicon.aspx"
+ },
+ {
+ "Title": "PathIcon",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.pathicon.aspx"
+ },
+ {
+ "Title": "Quickstart: Adding app bar buttons",
+ "Uri": "https://docs.microsoft.com/windows/uwp/controls-and-patterns/app-bars"
+ }
+ ],
+ "RelatedControls": [ "AppBarToggleButton", "AppBarSeparator", "AppBar", "CommandBar" ]
+ },
+ {
+ "UniqueId": "AppBarSeparator",
+ "Title": "AppBarSeparator",
+ "Subtitle": "A vertical line that's used to visually separate groups of commands in an app bar.",
+ "ImagePath": "ms-appx:///Assets/AppBarSeparator.png",
+ "Description": "An AppBarSeparator creates a vertical line to visually separate groups of commands in a app bar. It has a compact state with reduced padding to match the compact state of the AppBarButton and AppBarToggleButton controls.",
+ "Content": "You can open the app bar and toggle the IsCompact button to see how the app bar buttons and separators on this page change.
When the IsCompact property is true, the padding around the AppBarSeparator is reduced.
Look at the AppBarSeparatorPage.xaml file in Visual Studio to see the full code for this page.
",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "AppBarSeparator",
+ "Uri": "https://docs.microsoft.com/uwp/api/windows.ui.xaml.controls.appbarseparator"
+ }
+ ],
+ "RelatedControls": [
+ "AppBarButton",
+ "AppBarToggleButton",
+ "AppBar",
+ "CommandBar"
+ ]
+ },
+ {
+ "UniqueId": "AppBarToggleButton",
+ "Title": "AppBarToggleButton",
+ "Subtitle": "A button that can be on, off, or indeterminate like a CheckBox, and is styled for use in an app bar or other specialized UI.",
+ "ImagePath": "ms-appx:///Assets/AppBarToggleButton.png",
+ "Description": "An AppBarToggleButton looks like an AppBarButton, but works like a CheckBox. It typically has two states, checked (on) or unchecked (off), but can be indeterminate if the IsThreeState property is true. You can determine it's state by checking the IsChecked property.",
+ "Content": "You can open the app bar and toggle the IsCompact button to see how the app bar buttons on this page change.
Look at the AppBarToggleButtonPage.xaml file in Visual Studio to see the full code for this page.
",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "AppBarToggleButton",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.appbartogglebutton.aspx"
+ },
+ {
+ "Title": "SymbolIcon",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.symbolicon.aspx"
+ },
+ {
+ "Title": "FontIcon",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.fonticon.aspx"
+ },
+ {
+ "Title": "BitmapIcon",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.bitmapicon.aspx"
+ },
+ {
+ "Title": "PathIcon",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.pathicon.aspx"
+ },
+ {
+ "Title": "Quickstart: Adding app bar buttons",
+ "Uri": "https://docs.microsoft.com/windows/uwp/controls-and-patterns/app-bars"
+ }
+ ],
+ "RelatedControls": [
+ "AppBarButton",
+ "AppBarSeparator",
+ "AppBar",
+ "CommandBar"
+ ]
+ },
+ {
+ "UniqueId": "Button",
+ "Title": "Button",
+ "Subtitle": "A control that responds to user input and raises a Click event.",
+ "ImagePath": "ms-appx:///Assets/Button.png",
+ "Description": "The Button control provides a Click event to respond to user input from a touch, mouse, keyboard, stylus, or other input device. You can put different kinds of content in a button, such as text or an image, or you can restyle a button to give it a new look.",
+ "Content": "The main purpose of a Button is to make something happen when a user clicks it. There are two ways you can make something happen:
- Handle the Click event.
- Bind the Command property to an ICommand implementation that describes the command logic.
Buttons often have only simple string content, but you can use any object as content. You can also change the style and template to give them any look you want.
Look at the ButtonPage.xaml file in Visual Studio to see the custom button style and template definitions used on this page.
",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "Button",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.button.aspx"
+ },
+ {
+ "Title": "Quickstart: Adding button controls",
+ "Uri": "http://msdn.microsoft.com/en-us/library/windows/apps/jj153346.aspx"
+ }
+ ],
+ "RelatedControls": [
+ "ToggleButton",
+ "RepeatButton",
+ "HyperlinkButton",
+ "AppBarButton"
+ ]
+ },
+ {
+ "UniqueId": "CommandBar",
+ "Title": "CommandBar",
+ "Subtitle": "A toolbar for displaying application-specific commands that handles layout and resizing of its contents.",
+ "ImagePath": "ms-appx:///Assets/CommandBar.png",
+ "Description": "The CommandBar simplifies the creation of basic app bars by providing:\n- Automatic layout of commands, with primary commands on the right and secondary commands on the left.\n- Automatic resizing of app bar commands when the app size changes.\nWhen you need an app bar that contains only AppBarButton,AppBarToggleButton , and AppBarSeparator controls, use a CommandBar. If you need more complex content, such as images, progress bars, or text blocks, use an AppBar control.",
+ "Content": "The bottom app bar on this page is a CommandBar control.
Add secondary commands and then resize the app to see how the CommandBar automatically adapts to different widths.
This CommandBar element is in the ItemPage so it can be shared across all control pages in the app. Look at the ItemPage.xaml file in Visual Studio to see the full code for this page.
",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "CommandBar",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.commandbar.aspx"
+ },
+ {
+ "Title": "Quickstart: Adding app bars",
+ "Uri": "https://docs.microsoft.com/windows/uwp/controls-and-patterns/app-bars"
+ }
+ ],
+ "RelatedControls": [
+ "AppBar",
+ "AppBarButton",
+ "AppBarToggleButton",
+ "AppBarSeparator"
+ ]
+ },
+ {
+ "UniqueId": "ContentDialog",
+ "Title": "ContentDialog",
+ "Subtitle": "A dialog box that can be customized to contain any XAML content.",
+ "ImagePath": "ms-appx:///Assets/DefaultIcon.png",
+ "Description": "Use a ContentDialog to show relavant information or to provide a modal dialog experience that can show any XAML content.",
+ "Content": "Look at the ContentDialog.xaml file in Visual Studio to see the full code for this page.
",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "ContentDialog",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.contentdialog.aspx"
+ }
+ ],
+ "RelatedControls": [
+ "Flyout",
+ "MenuFlyout",
+ "ToolTip"
+ ]
+ },
+ {
+ "UniqueId": "HyperlinkButton",
+ "Title": "HyperlinkButton",
+ "Subtitle": "A button that appears as hyperlink text, and can navigate to a URI or handle a Click event.",
+ "ImagePath": "ms-appx:///Assets/HyperlinkButton.png",
+ "Description": "A HyperlinkButton appears as a text hyperlink. When a user clicks it, it opens the page you specify in the NavigateUri property in the default browser. Or you can handle its Click event, typically to navigate within your app.",
+ "Content": "A HyperlinkButton looks like hyperlink text, but works like a button. You can use it in two ways:
- Set the NavigateUri property. When a user clicks it, it will automatically open the URI in the default browser.
- Handle the Click event. This works just like the Click event of a standard Button, and can be used to navigate within your app.
Each control page in this app has two sets of hyperlink buttons, one set to open documentation in Internet Explorer, and one set to navigate to related control pages in the app.
Look at the HyperlinkButtonPage.xaml file in Visual Studio to see the full code for this page.
",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "HyperlinkButton",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.hyperlinkbutton.aspx"
+ },
+ {
+ "Title": "Quickstart: Adding a button",
+ "Uri": "http://msdn.microsoft.com/en-us/library/windows/apps/jj153346.aspx"
+ }
+ ],
+ "RelatedControls": [
+ "Button",
+ "ToggleButton",
+ "RepeatButton",
+ "AppBarButton"
+ ]
+ },
+ {
+ "UniqueId": "MenuFlyout",
+ "Title": "MenuFlyout",
+ "Subtitle": "Shows a contextual list of simple commands or options.",
+ "ImagePath": "ms-appx:///Assets/MenuFlyout.png",
+ "Description": "A MenuFlyout displays lightweight UI that is light dismissed by clicking or tapping off of it. Use it to let the user choose from a contextual list of simple commands or options.",
+ "Content": "Look at the MenuFlyoutPage.xaml file in Visual Studio to see the full code.
",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "MenuFlyout",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.menuflyout.aspx"
+ },
+ {
+ "Title": "MenuFlyoutItem",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.menuflyoutitem.aspx"
+ },
+ {
+ "Title": "MenuFlyoutSeparator",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.menuflyoutseparator.aspx"
+ },
+ {
+ "Title": "ToggleMenuFlyoutItem",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.togglemenuflyoutitem.aspx"
+ },
+ {
+ "Title": "Quickstart: Adding a MenuFlyout",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/dn308516.aspx"
+ }
+ ],
+ "RelatedControls": [
+ "Flyout",
+ "ContentDialog",
+ "Button",
+ "AppBarButton"
+ ]
+ },
+ {
+ "UniqueId": "RepeatButton",
+ "Title": "RepeatButton",
+ "Subtitle": "A button that raises its Click event repeatedly from the time it's pressed until it's released.",
+ "ImagePath": "ms-appx:///Assets/Button.png",
+ "Description": "The RepeatButton control is like a standard Button, except that the Click event occurs continuously while the user presses the RepeatButton.",
+ "Content": "A RepeatButton looks just like a regular Button, but it's Click event occurs continuously while the button is pressed.
Look at the RepeatButtonPage.xaml file in Visual Studio to see the full code for this page.
",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "RepeatButton",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.primitives.repeatbutton.aspx"
+ },
+ {
+ "Title": "Quickstart: Adding button controls",
+ "Uri": "http://msdn.microsoft.com/en-us/library/windows/apps/jj153346.aspx"
+ }
+ ],
+ "RelatedControls": [
+ "Button",
+ "ToggleButton",
+ "HyperlinkButton",
+ "AppBarButton"
+ ]
+ },
+ {
+ "UniqueId": "Swipe",
+ "Title": "Swipe",
+ "Subtitle": "Touch gesture for quick menu actions on items.",
+ "ImagePath": "ms-appx:///Assets/Swipe.png",
+ "Description": "Touch gesture for quick menu actions on items.",
+ "Content": "",
+ "IsNew": true,
+ "Docs": [
+ {
+ "Title": "SwipeContainer",
+ "Uri": "https://docs.microsoft.com/uwp/api/Windows.UI.Xaml.Controls.SwipeContainer"
+ },
+ {
+ "Title": "SwipeContent",
+ "Uri": "https://docs.microsoft.com/uwp/api/windows/apps/Windows.UI.Xaml.Controls.SwipeContent"
+ }
+ ],
+ "RelatedControls": [
+ "GridView",
+ "ListView",
+ "TreeView"
+ ]
+ },
+ {
+ "UniqueId": "ToggleButton",
+ "Title": "ToggleButton",
+ "Subtitle": "A button that can be switched between two states like a CheckBox.",
+ "ImagePath": "ms-appx:///Assets/ToggleButton.png",
+ "Description": "A ToggleButton looks like a Button, but works like a CheckBox. It typically has two states, checked (on) or unchecked (off), but can be indeterminate if the IsThreeState property is true. You can determine it's state by checking the IsChecked property.",
+ "Content": "ToggleButton is used as a base class for similar controls like CheckBox and RadioButton. It can be used on its own, but don't use it if a CheckBox, RadioButton, or ToggleSwitch would convey your intent better.
Look at the ToggleButtonPage.xaml file in Visual Studio to see the full code for this page.
",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "ToggleButton",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.primitives.togglebutton.aspx"
+ },
+ {
+ "Title": "Quickstart: Adding button controls",
+ "Uri": "http://msdn.microsoft.com/en-us/library/windows/apps/jj153346.aspx"
+ }
+ ],
+ "RelatedControls": [
+ "Button",
+ "AppBarToggleButton",
+ "ToggleSwitch",
+ "CheckBox"
+ ]
+ }
+
+ ]
+ },
+ {
+ "UniqueId": "Collections",
+ "Title": "Collections",
+ "Subtitle": "FlipView, GridView, ListView, Pivot, SemanticZoom, Hub",
+ "ImagePath": "\uE292",
+ "Description": "Use collection controls to display, navigate, and interact with collections of data and media.",
+ "Items": [
{
- "UniqueId": "AppBars",
- "Title": "App bars and commands",
- "Subtitle": "AppBar, CommandBar, AppBarButton, AppBarToggleButton, AppBarSeparator",
- "ImagePath": "ms-appx:///Assets/CommandBar.png",
- "Description": "Use app bars to present navigation, commands, and tools to users.",
- "Items": [
- {
- "UniqueId": "AppBar",
- "Title": "AppBar",
- "Subtitle": "A toolbar for displaying application-specific commands, navigation, and tools.",
- "ImagePath": "ms-appx:///Assets/AppBar.png",
- "Description": "An app bar is a UI element that presents navigation, commands, and tools to the user. An app bar can appear at the top of the page, at the bottom of the page, or both. It is hidden by default, and is shown or dismissed when the user right clicks, presses Windows+Z, or swipes from the top or bottom edge of the screen.",
- "Content": "This page shows a simplified navigation bar to demonstrate basic AppBar usage. When you resize the page (by placing apps side-by-side, for example), the AppBar control doesn't resize it's content, so you have to manage that yourself. Look at the AppBarPage.xaml file in Visual Studio to see this simplified app bar.
This app also uses a shared AppBar in NavigationRootPage for navigation. To see an example of more complex app bar content, look at the files in the Navigation folder in Visual Studio.
",
- "Docs": [
- { "Title": "AppBar", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.appbar.aspx" },
- { "Title": "Quickstart: Adding app bars", "Uri": "http://msdn.microsoft.com/en-us/library/windows/apps/hh781232.aspx" }
- ],
- "RelatedControls": [
- "CommandBar",
- "AppBarButton",
- "AppBarToggleButton",
- "AppBarSeparator"
- ]
- },
- {
- "UniqueId": "CommandBar",
- "Title": "CommandBar",
- "Subtitle": "A toolbar for displaying application-specific commands that handles layout and resizing of its contents.",
- "ImagePath": "ms-appx:///Assets/CommandBar.png",
- "Description": "The CommandBar simplifies the creation of basic app bars by providing:\n- Automatic layout of commands, with primary commands on the right and secondary commands on the left.\n- Automatic resizing of app bar commands when the app size changes.\nWhen you need an app bar that contains only AppBarButton,AppBarToggleButton , and AppBarSeparator controls, use a CommandBar. If you need more complex content, such as images, progress bars, or text blocks, use an AppBar control.",
- "Content": "The bottom app bar on this page is a CommandBar control.
Add secondary commands and then resize the app to see how the CommandBar automatically adapts to different widths.
This CommandBar element is in the ItemPage so it can be shared across all control pages in the app. Look at the ItemPage.xaml file in Visual Studio to see the full code for this page.
",
- "Docs": [
- { "Title": "CommandBar", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.commandbar.aspx" },
- { "Title": "Quickstart: Adding app bars", "Uri": "http://msdn.microsoft.com/en-us/library/windows/apps/hh781232.aspx" }
- ],
- "RelatedControls": [
- "AppBar",
- "AppBarButton",
- "AppBarToggleButton",
- "AppBarSeparator"
- ]
- },
- {
- "UniqueId": "AppBarButton",
- "Title": "AppBarButton",
- "Subtitle": "A button that's styled for use in an app bar or other specialized UI.",
- "ImagePath": "ms-appx:///Assets/AppBarButton.png",
- "Description": "App bar buttons differ from standard buttons in several ways:\n- Their default appearance is a transparent background with a smaller size.\n- You use the Label and Icon properties to set the content instead of the Content property. The Content property is ignored.\n- The button's IsCompact property controls its size.",
- "Content": "You can open the app bar and toggle the IsCompact button to see how the app bar buttons on this page change.
Use the Label and Icon properties to define the content of the app bar buttons. Set the Label property to a string to specify the text label. The label is shown by default but is hidden when the button is in its compact state, so you also need to specify a meaningful icon. To do that, set the button's Icon property to an element derived from the IconElement class. Four kinds of icon elements are provided:
FontIcon - The icon is based on a glyph from the specified font family.
BitmapIcon - The icon is based on a bitmap image file with the specified Uri.
PathIcon - The icon is based on Path data.
SymbolIcon - The icon is based on a predefined list of glyphs from the Segoe UI Symbol font.
Look at the AppBarButtonPage.xaml file in Visual Studio to see the full code for this page.
",
- "Docs": [
- { "Title": "AppBarButton", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.appbarbutton.aspx" },
- { "Title": "SymbolIcon", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.symbolicon.aspx" },
- { "Title": "FontIcon", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.fonticon.aspx" },
- { "Title": "BitmapIcon", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.bitmapicon.aspx" },
- { "Title": "PathIcon", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.pathicon.aspx" },
- { "Title": "Quickstart: Adding app bar buttons", "Uri": "http://msdn.microsoft.com/en-us/library/windows/apps/jj662743.aspx" }
- ],
- "RelatedControls": [ "AppBarToggleButton", "AppBarSeparator", "AppBar", "CommandBar" ]
- },
- {
- "UniqueId": "AppBarToggleButton",
- "Title": "AppBarToggleButton",
- "Subtitle": "A button that can be on, off, or indeterminate like a CheckBox, and is styled for use in an app bar or other specialized UI.",
- "ImagePath": "ms-appx:///Assets/AppBarToggleButton.png",
- "Description": "An AppBarToggleButton looks like an AppBarButton, but works like a CheckBox. It typically has two states, checked (on) or unchecked (off), but can be indeterminate if the IsThreeState property is true. You can determine it's state by checking the IsChecked property.",
- "Content": "You can open the app bar and toggle the IsCompact button to see how the app bar buttons on this page change.
Look at the AppBarToggleButtonPage.xaml file in Visual Studio to see the full code for this page.
",
- "Docs": [
- { "Title": "AppBarToggleButton", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.appbartogglebutton.aspx" },
- { "Title": "SymbolIcon", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.symbolicon.aspx" },
- { "Title": "FontIcon", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.fonticon.aspx" },
- { "Title": "BitmapIcon", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.bitmapicon.aspx" },
- { "Title": "PathIcon", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.pathicon.aspx" },
- { "Title": "Quickstart: Adding app bar buttons", "Uri": "http://msdn.microsoft.com/en-us/library/windows/apps/jj662743.aspx" }
- ],
- "RelatedControls": [
- "AppBarButton",
- "AppBarSeparator",
- "AppBar",
- "CommandBar"
- ]
- },
- {
- "UniqueId": "AppBarSeparator",
- "Title": "AppBarSeparator",
- "Subtitle": "A vertical line that's used to visually separate groups of commands in an app bar.",
- "ImagePath": "ms-appx:///Assets/AppBarSeparator.png",
- "Description": "An AppBarSeparator creates a vertical line to visually separate groups of commands in a app bar. It has a compact state with reduced padding to match the compact state of the AppBarButton and AppBarToggleButton controls.",
- "Content": "You can open the app bar and toggle the IsCompact button to see how the app bar buttons and separators on this page change.
When the IsCompact property is true, the padding around the AppBarSeparator is reduced.
Look at the AppBarSeparatorPage.xaml file in Visual Studio to see the full code for this page.
",
- "Docs": [ { "Title": "AppBarSeparator", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.appbarbutton.aspx" } ],
- "RelatedControls": [
- "AppBarButton",
- "AppBarToggleButton",
- "AppBar",
- "CommandBar"
- ]
- }
- ]
+ "UniqueId": "ComboBox",
+ "Title": "ComboBox",
+ "Subtitle": "A drop-down list of items a user can select from.",
+ "ImagePath": "ms-appx:///Assets/ComboBox.png",
+ "Description": "Use a ComboBox when you need to conserve on-screen space and when users select only one option at a time. A ComboBox shows only the currently selected item.",
+ "Content": "Look at the ComboBoxPage.xaml file in Visual Studio to see the full code for this page.
",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "ComboBox",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.combobox.aspx"
+ },
+ {
+ "Title": "ComboBoxItem",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.comboboxitem.aspx"
+ }
+ ],
+ "RelatedControls": [
+ "ListBox",
+ "RadioButton",
+ "CheckBox",
+ "ListView",
+ "AutoSuggestBox",
+ "RatingsControl"
+ ]
},
{
- "UniqueId": "Buttons",
- "Title": "Buttons",
- "Subtitle": "Button, HyperlinkButton, RepeatButton, ToggleButton",
- "ImagePath": "ms-appx:///Assets/Button.png",
- "Description": "Use button controls to let users perform an action, like submitting a form or showing a menu.",
- "Items": [
- {
- "UniqueId": "Button",
- "Title": "Button",
- "Subtitle": "A control that responds to user input and raises a Click event.",
- "ImagePath": "ms-appx:///Assets/Button.png",
- "Description": "The Button control provides a Click event to respond to user input from a touch, mouse, keyboard, stylus, or other input device. You can put different kinds of content in a button, such as text or an image, or you can restyle a button to give it a new look.",
- "Content": "The main purpose of a Button is to make something happen when a user clicks it. There are two ways you can make something happen:
- Handle the Click event.
- Bind the Command property to an ICommand implementation that describes the command logic.
Buttons often have only simple string content, but you can use any object as content. You can also change the style and template to give them any look you want.
Look at the ButtonPage.xaml file in Visual Studio to see the custom button style and template definitions used on this page.
",
- "Docs": [
- { "Title": "Button", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.button.aspx" },
- { "Title": "Quickstart: Adding button controls", "Uri": "http://msdn.microsoft.com/en-us/library/windows/apps/jj153346.aspx" }
- ],
- "RelatedControls": [
- "ToggleButton",
- "RepeatButton",
- "HyperlinkButton",
- "AppBarButton"
- ]
- },
- {
- "UniqueId": "HyperlinkButton",
- "Title": "HyperlinkButton",
- "Subtitle": "A button that appears as hyperlink text, and can navigate to a URI or handle a Click event.",
- "ImagePath": "ms-appx:///Assets/HyperlinkButton.png",
- "Description": "A HyperlinkButton appears as a text hyperlink. When a user clicks it, it opens the page you specify in the NavigateUri property in the default browser. Or you can handle its Click event, typically to navigate within your app.",
- "Content": "A HyperlinkButton looks like hyperlink text, but works like a button. You can use it in two ways:
- Set the NavigateUri property. When a user clicks it, it will automatically open the URI in the default browser.
- Handle the Click event. This works just like the Click event of a standard Button, and can be used to navigate within your app.
Each control page in this app has two sets of hyperlink buttons, one set to open documentation in Internet Explorer, and one set to navigate to related control pages in the app.
Look at the HyperlinkButtonPage.xaml file in Visual Studio to see the full code for this page.
",
- "Docs": [
- { "Title": "HyperlinkButton", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.hyperlinkbutton.aspx" },
- { "Title": "Quickstart: Adding a button", "Uri": "http://msdn.microsoft.com/en-us/library/windows/apps/jj153346.aspx" }
- ],
- "RelatedControls": [
- "Button",
- "ToggleButton",
- "RepeatButton",
- "AppBarButton"
- ]
- },
- {
- "UniqueId": "RepeatButton",
- "Title": "RepeatButton",
- "Subtitle": "A button that raises its Click event repeatedly from the time it's pressed until it's released.",
- "ImagePath": "ms-appx:///Assets/Button.png",
- "Description": "The RepeatButton control is like a standard Button, except that the Click event occurs continuously while the user presses the RepeatButton.",
- "Content": "A RepeatButton looks just like a regular Button, but it's Click event occurs continuously while the button is pressed.
Look at the RepeatButtonPage.xaml file in Visual Studio to see the full code for this page.
",
- "Docs": [
- { "Title": "RepeatButton", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.primitives.repeatbutton.aspx" },
- { "Title": "Quickstart: Adding button controls", "Uri": "http://msdn.microsoft.com/en-us/library/windows/apps/jj153346.aspx" }
- ],
- "RelatedControls": [
- "Button",
- "ToggleButton",
- "HyperlinkButton",
- "AppBarButton"
- ]
- },
- {
- "UniqueId": "ToggleButton",
- "Title": "ToggleButton",
- "Subtitle": "A button that can be switched between two states like a CheckBox.",
- "ImagePath": "ms-appx:///Assets/ToggleButton.png",
- "Description": "A ToggleButton looks like a Button, but works like a CheckBox. It typically has two states, checked (on) or unchecked (off), but can be indeterminate if the IsThreeState property is true. You can determine it's state by checking the IsChecked property.",
- "Content": "ToggleButton is used as a base class for similar controls like CheckBox and RadioButton. It can be used on its own, but don't use it if a CheckBox, RadioButton, or ToggleSwitch would convey your intent better.
Look at the ToggleButtonPage.xaml file in Visual Studio to see the full code for this page.
",
- "Docs": [
- { "Title": "ToggleButton", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.primitives.togglebutton.aspx" },
- { "Title": "Quickstart: Adding button controls", "Uri": "http://msdn.microsoft.com/en-us/library/windows/apps/jj153346.aspx" }
- ],
- "RelatedControls": [
- "Button",
- "AppBarToggleButton",
- "ToggleSwitch",
- "CheckBox"
- ]
- }
- ]
+ "UniqueId": "FlipView",
+ "Title": "FlipView",
+ "Subtitle": "Presents a collection of items that the user can flip through, one item at a time.",
+ "ImagePath": "ms-appx:///Assets/FlipView.png",
+ "Description": "The FlipView lets you flip through a collection of items, one at a time. It's great for displaying images from a gallery, pages of a magazine, or similar items.",
+ "Content": "FlipView is an ItemsControl, so it can contain a collection of items of any type. To populate the view, add items to the Items collection, or set the ItemsSource property to a data source.
Look at the FlipViewPage.xaml file in Visual Studio to see the full code for this page.
",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "FlipView",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.flipview.aspx"
+ },
+ {
+ "Title": "Quickstart: Adding FlipView controls",
+ "Uri": "http://msdn.microsoft.com/en-us/library/windows/apps/hh781233.aspx"
+ }
+ ],
+ "RelatedControls": [
+ "GridView",
+ "ListView",
+ "SemanticZoom",
+ "Hub"
+ ]
},
{
- "UniqueId": "Collections",
- "Title": "Collection/data controls",
- "Subtitle": "FlipView, GridView, ListView, Pivot, SemanticZoom, Hub",
- "ImagePath": "ms-appx:///Assets/GridView.png",
- "Description": "Use collection controls to display, navigate, and interact with collections of data and media.",
- "Items": [
- {
- "UniqueId": "FlipView",
- "Title": "FlipView",
- "Subtitle": "Presents a collection of items that the user can flip through, one item at a time.",
- "ImagePath": "ms-appx:///Assets/FlipView.png",
- "Description": "The FlipView lets you flip through a collection of items, one at a time. It's great for displaying images from a gallery, pages of a magazine, or similar items.",
- "Content": "FlipView is an ItemsControl, so it can contain a collection of items of any type. To populate the view, add items to the Items collection, or set the ItemsSource property to a data source.
Look at the FlipViewPage.xaml file in Visual Studio to see the full code for this page.
",
- "Docs": [
- { "Title": "FlipView", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.flipview.aspx" },
- { "Title": "Quickstart: Adding FlipView controls", "Uri": "http://msdn.microsoft.com/en-us/library/windows/apps/hh781233.aspx" }
- ],
- "RelatedControls": [
- "GridView",
- "ListView",
- "SemanticZoom",
- "Hub"
- ]
- },
- {
- "UniqueId": "GridView",
- "Title": "GridView",
- "Subtitle": "Presents a collection of items in rows and columns that can scroll horizontally.",
- "ImagePath": "ms-appx:///Assets/GridView.png",
- "Description": "The GridView lets you show a collection of items arranged in rows and columns that scroll horizontally.",
- "Content": "GridView is an ItemsControl, so it can contain a collection of items of any type. To populate the view, add items to the Items collection, or set the ItemsSource property to a data source.
Set an ItemTemplate to define the look of individual items.
Look at the GridViewPage.xaml file in Visual Studio to see the full code for this page.
",
- "Docs": [
- { "Title": "GridView", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.gridview.aspx" },
- { "Title": "Quickstart: Adding ListView and GridView controls", "Uri": "http://msdn.microsoft.com/en-us/library/windows/apps/hh780650.aspx" }
- ],
- "RelatedControls": [
- "ListView",
- "FlipView",
- "SemanticZoom",
- "Hub"
- ]
- },
- {
- "UniqueId": "ListView",
- "Title": "ListView",
- "Subtitle": "Presents a collection of items in a list that can scroll vertically.",
- "ImagePath": "ms-appx:///Assets/ListView.png",
- "Description": "The ListView lets you show a collection of items in a list that scrolls vertically.",
- "Content": "ListView is an ItemsControl, so it can contain a collection of items of any type. To populate the view, add items to the Items collection, or set the ItemsSource property to a data source.
Set an ItemTemplate to define the look of individual items.
Look at the ListViewPage.xaml file in Visual Studio to see the full code for this page.
",
- "Docs": [
- { "Title": "ListView", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.listview.aspx" },
- { "Title": "Quickstart: Adding ListView and GridView controls", "Uri": "http://msdn.microsoft.com/en-us/library/windows/apps/hh780650.aspx" }
- ],
- "RelatedControls": [
- "GridView",
- "FlipView",
- "SemanticZoom",
- "Hub"
- ]
- },
- {
- "UniqueId": "Pivot",
- "Title": "Pivot",
- "Subtitle": "Presents information from different sources in a tabbed view.",
- "ImagePath": "ms-appx:///Assets/Pivot.png",
- "Description": "A Pivot allows you to show a collection of items from different sources in a tabbed view.",
- "Content": "This page shows a simplified Pivot control with minimal content to demonstrate basic Pivot usage. Look at the PivotPage.xaml file in Visual Studio to see the full code for this page.
A Pivot control typically takes up the full page.
",
- "Docs": [
- { "Title": "Pivot", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.pivot.aspx" }
- ],
- "RelatedControls": [
- "Hub",
- "SemanticZoom",
- "ListView",
- "GridView"
- ]
- },
- {
- "UniqueId": "SemanticZoom",
- "Title": "SemanticZoom",
- "Subtitle": "Lets the user zoom between two different views of a collection, making it easier to navigate through large collections of items.",
- "ImagePath": "ms-appx:///Assets/SemanticZoom.png",
- "Description": "The SemanticZoom lets you show grouped data in two different ways, and is useful for quickly navigating through large sets of data.",
- "Content": "Look at the SemanticZoomPage.xaml file in Visual Studio to see the full code for this page.
",
- "Docs": [
- { "Title": "SemanticZoom", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.semanticzoom.aspx" },
- { "Title": "Quickstart: Adding SemanticZoom controls", "Uri": "http://msdn.microsoft.com/en-us/library/windows/apps/hh781234.aspx" }
- ],
- "RelatedControls": [
- "GridView",
- "ListView",
- "Hub"
- ]
- },
- {
- "UniqueId": "Hub",
- "Title": "Hub",
- "Subtitle": "Presents information from different sources in a scrollable view.",
- "ImagePath": "ms-appx:///Assets/Hub.png",
- "Description": "Use a Hub to display information from different source in a single scrollable view. Hub can also be used to show categorical information in a separated section format.",
- "Content": "This page shows a simplified Hub control with minimal content to demonstrate basic Hub usage. Look at the HubPage.xaml file in Visual Studio to see the full code for this page.
A Hub control typically takes up the full page. The app home uses a more fully implemented Hub that demonstrates this. Look at the MainPage.xaml file in Visual Studio to see the full code for the home page Hub.
",
- "Docs": [
- { "Title": "Hub", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.hub.aspx" },
- { "Title": "HubSection", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.hubsection.aspx" }
- ],
- "RelatedControls": [
- "Pivot",
- "SemanticZoom",
- "ListView",
- "GridView"
- ]
- }
- ]
+ "UniqueId": "GridView",
+ "Title": "GridView",
+ "Subtitle": "Presents a collection of items in rows and columns that can scroll horizontally.",
+ "ImagePath": "ms-appx:///Assets/GridView.png",
+ "Description": "The GridView lets you show a collection of items arranged in rows and columns that scroll horizontally.",
+ "Content": "GridView is an ItemsControl, so it can contain a collection of items of any type. To populate the view, add items to the Items collection, or set the ItemsSource property to a data source.
Set an ItemTemplate to define the look of individual items.
Look at the GridViewPage.xaml file in Visual Studio to see the full code for this page.
",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "GridView",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.gridview.aspx"
+ },
+ {
+ "Title": "Quickstart: Adding ListView and GridView controls",
+ "Uri": "http://msdn.microsoft.com/en-us/library/windows/apps/hh780650.aspx"
+ }
+ ],
+ "RelatedControls": [
+ "ListView",
+ "FlipView",
+ "SemanticZoom",
+ "Hub"
+ ]
},
{
- "UniqueId": "Flyouts",
- "Title": "Flyout controls",
- "Subtitle": "ContentDialog, Flyout, MenuFlyout, ToolTip",
- "ImagePath": "ms-appx:///Assets/ToolTip.png",
- "Description": "Use flyout surfaces to show or collect contextual information.",
- "Items": [
- {
- "UniqueId": "ContentDialog",
- "Title": "ContentDialog",
- "Subtitle": "A dialog box that can be customized to contain any XAML content.",
- "ImagePath": "ms-appx:///Assets/ContentDialog.png",
- "Description": "Use a ContentDialog to show relavant information or to provide a modal dialog experience that can show any XAML content.",
- "Content": "Look at the ContentDialog.xaml file in Visual Studio to see the full code for this page.
",
- "Docs": [
- { "Title": "ContentDialog", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.contentdialog.aspx" }
- ],
- "RelatedControls": [
- "Flyout",
- "MenuFlyout",
- "ToolTip"
- ]
- },
- {
- "UniqueId": "Flyout",
- "Title": "Flyout",
- "Subtitle": "Shows contextual information and enables user interaction.",
- "ImagePath": "ms-appx:///Assets/Flyout.png",
- "Description": "A Flyout displays lightweight UI that is either information, or requires user interaction. Unlike a dialog, a Flyout can be light dismissed by clicking or tapping off of it. Use it to collect input from the user, show more details about an item, or ask the user to confirm an action.",
- "Content": "Look at the FlyoutPage.xaml file in Visual Studio to see the full code for this page.
",
- "Docs": [
- { "Title": "Flyout", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.flyout.aspx" },
- { "Title": "Quickstart: Adding a Flyout", "Uri": "http://msdn.microsoft.com/library/windows/apps/dn308515.aspx" }
- ],
- "RelatedControls": [
- "ContentDialog",
- "MenuFlyout",
- "Button",
- "AppBarButton"
- ]
- },
- {
- "UniqueId": "MenuFlyout",
- "Title": "MenuFlyout",
- "Subtitle": "Shows a contextual list of simple commands or options.",
- "ImagePath": "ms-appx:///Assets/MenuFlyout.png",
- "Description": "A MenuFlyout displays lightweight UI that is light dismissed by clicking or tapping off of it. Use it to let the user choose from a contextual list of simple commands or options.",
- "Content": "Look at the MenuFlyoutPage.xaml file in Visual Studio to see the full code.
",
- "Docs": [
- { "Title": "MenuFlyout", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.menuflyout.aspx" },
- { "Title": "MenuFlyoutItem", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.menuflyoutitem.aspx" },
- { "Title": "MenuFlyoutSeparator", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.menuflyoutseparator.aspx" },
- { "Title": "ToggleMenuFlyoutItem", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.togglemenuflyoutitem.aspx" },
- { "Title": "Quickstart: Adding a MenuFlyout", "Uri": "http://msdn.microsoft.com/library/windows/apps/dn308516.aspx" }
- ],
- "RelatedControls": [
- "Flyout",
- "ContentDialog",
- "Button",
- "AppBarButton"
- ]
- },
- {
- "UniqueId": "ToolTip",
- "Title": "ToolTip",
- "Subtitle": "Displays information for an element in a pop-up window.",
- "ImagePath": "ms-appx:///Assets/ToolTip.png",
- "Description": "A ToolTip shows more information about a UI element. You might show information about what the element does, or what the user should do. The ToolTip is shown when a user hovers over or presses and holds the UI element.",
- "Content": "Look at the ToolTipPage.xaml file in Visual Studio to see the full code for this page.
",
- "Docs": [ { "Title": "ToolTip", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.tooltip.aspx" } ],
- "RelatedControls": [
- "Flyout",
- "ContentDialog"
- ]
- }
- ]
+ "UniqueId": "ListBox",
+ "Title": "ListBox",
+ "Subtitle": "A control that presents an inline list of items that the user can select from.",
+ "ImagePath": "ms-appx:///Assets/ListBox.png",
+ "Description": "Use a ListBox when you want the options to be visible all the time or when users can select more than one option at a time. ListBox controls are always open, which allows several items to be displayed to the user without user interaction.",
+ "Content": "Look at the ListBoxPage.xaml file in Visual Studio to see the full code for this page.
",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "ListBox",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.listbox.aspx"
+ },
+ {
+ "Title": "ListBoxItem",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.listboxitem.aspx"
+ }
+ ],
+ "RelatedControls": [
+ "ComboBox",
+ "RadioButton",
+ "CheckBox",
+ "AutoSuggestBox"
+ ]
},
{
- "UniqueId": "Layout",
- "Title": "Layout controls",
- "Subtitle": "Border, Canvas, Grid, RelativePanel, ScrollViewer, SplitView, StackPanel, VariableSizedWrapGrid, ViewBox",
- "ImagePath": "ms-appx:///Assets/Canvas.png",
- "Description": "Use layout controls to arrange the controls and content in your app.",
- "Items": [
- {
- "UniqueId": "Border",
- "Title": "Border",
- "Subtitle": "A container control that draws a boundary line, background, or both, around another object.",
- "ImagePath": "ms-appx:///Assets/Border.png",
- "Description": "Use a Border control to draw a boundary line, background, or both, around another object. A Border can contain only one child object.",
- "Content": "A Border can contain only one child object. If you want to put a border around multiple objects, first wrap them in a container object such as StackPanel and make the StackPanel the child of the Border.
You can change the appearance of a Border by setting basic properties:
- Width/Height
- BorderBrush
- BorderThickness
- Background
Most of the control pages in this app have XAML blocks to show basic usage. The appearance of the XAML blocks is defined by a Border control. Look at the CodeBorderStyle resource in App.xaml to see the Style that's applied to the Borders.
Look at the BorderPage.xaml file in Visual Studio to see the full code for this page.
",
- "Docs": [
- { "Title": "Border", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.border.aspx" },
- { "Title": "Quickstart: Adding layout controls", "Uri": "http://msdn.microsoft.com/en-us/library/windows/apps/hh969155.aspx" }
- ],
- "RelatedControls": [
- "Canvas",
- "Grid",
- "StackPanel",
- "VariableSizedWrapGrid",
- "RelativePanel"
- ]
- },
- {
- "UniqueId": "Canvas",
- "Title": "Canvas",
- "Subtitle": "A layout panel that supports absolute positioning of child elements relative to the top left corner of the canvas.",
- "ImagePath": "ms-appx:///Assets/Canvas.png",
- "Description": "The Canvas provides absolute positioning of controls or content. Content is positioned relative to the Canvas using the Canvas.Top and Canvas.Left attached properties.",
- "Content": "Items are positioned on the Canvas using the Canvas.Top and Canvas.Left attached properties. Use the sliders to change these properties for the red rectangle and see how it moves around.
To see the effect of the ZIndex attached property, make sure the red rectangle is overlapping the other rectangles.
Look at the CanvasPage.xaml file in Visual Studio to see the full code for this page.
",
- "Docs": [
- { "Title": "Canvas", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.canvas.aspx" },
- { "Title": "Quickstart: Adding layout controls", "Uri": "http://msdn.microsoft.com/en-us/library/windows/apps/hh969155.aspx" }
- ],
- "RelatedControls": [
- "Border",
- "Grid",
- "StackPanel",
- "VariableSizedWrapGrid",
- "RelativePanel"
- ]
- },
- {
- "UniqueId": "Grid",
- "Title": "Grid",
- "Subtitle": "A layout panel that supports arranging child elements in rows and columns. ",
- "ImagePath": "ms-appx:///Assets/Grid.png",
- "Description": "The Grid is used to arrange controls and content in rows and columns. Content is positioned in the grid using Grid.Row and Grid.Column attached properties.",
- "Content": "Look at the GridPage.xaml file in Visual Studio to see the full code for this page.
",
- "Docs": [
- { "Title": "Grid", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.grid.aspx" },
- { "Title": "Quickstart: Adding layout controls", "Uri": "http://msdn.microsoft.com/en-us/library/windows/apps/hh969155.aspx" }
- ],
- "RelatedControls": [
- "Border",
- "Canvas",
- "StackPanel",
- "VariableSizedWrapGrid",
- "RelativePanel"
- ]
- },
- {
- "UniqueId": "RelativePanel",
- "Title": "RelativePanel",
- "Subtitle": "A panel that uses relationships between elements to define layout.",
- "ImagePath": "ms-appx:///Assets/RelativePanel.png",
- "Description": "Use a RelativePanel to layout elements by defining the relationships between elements and in relation to the panel.",
- "Content": "Look at the RelativePanelPage.xaml file in Visual Studio to see the full code for this page.
","Docs": [
- { "Title": "RelativePanel", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.relativepanel.aspx" }
- ],
- "RelatedControls": [
- "Grid",
- "StackPanel",
- "Border",
- "Canvas",
- "Viewbox"
- ]
- },
- {
- "UniqueId": "ScrollViewer",
- "Title": "ScrollViewer",
- "Subtitle": "A container control that lets the user pan and zoom its content.",
- "ImagePath": "ms-appx:///Assets/ScrollViewer.png",
- "Description": "A ScrollViewer lets a user scroll, pan, and zoom to see content that's larger than the viewable area. Many content controls, like ListView, have ScrollViewers built into their control templates to provide automatic scrolling.",
- "Content": "Look at the ScrollViewerPage.xaml file in Visual Studio to see the full code for this page.
",
- "Docs": [ { "Title": "ScrollViewer", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.scrollviewer.aspx" } ],
- "RelatedControls": [
- "Viewbox",
- "Canvas",
- "Grid",
- "StackPanel",
- "RelativePanel"
- ]
- },
- {
- "UniqueId": "SplitView",
- "Title": "SplitView",
- "Subtitle": "A container that has 2 content areas, with multiple display options for the pane.",
- "ImagePath": "ms-appx:///Assets/SplitView.png",
- "Description": "Use a SplitView to display content, such as navigation options, in a pane on the side. There are multiple options for displaying the pane, namely CompactOverlay, Compact, Overlay, Inline. If you are looking for a reference to the hamburger pattern, please see the links in the documentation below.",
- "Content": "Look at the SplitViewPage.xaml file in Visual Studio to see the full code for this page.
",
- "Docs": [
- { "Title": "SplitView", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.splitview.aspx" },
- { "Title": "Hamburger pattern", "Uri": "http://go.microsoft.com/fwlink/p/?LinkId=619902&clcid=0x409" }
- ],
- "RelatedControls": [
- "StackPanel",
- "ListView",
- "GridView",
- "Grid",
- "RelativePanel"
- ]
- },
- {
- "UniqueId": "StackPanel",
- "Title": "StackPanel",
- "Subtitle": "A layout panel that arranges child elements into a single line that can be oriented horizontally or vertically.",
- "ImagePath": "ms-appx:///Assets/StackPanel.png",
- "Description": "A StackPanel is used to arrange items in a line, either horizontally or vertically.",
- "Content": "Look at the StackPanelPage.xaml file in Visual Studio to see the full code for this page.
",
- "Docs": [
- { "Title": "StackPanel", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.stackpanel.aspx" },
- { "Title": "Quickstart: Adding layout controls", "Uri": "http://msdn.microsoft.com/en-us/library/windows/apps/hh969155.aspx" }
- ],
- "RelatedControls": [
- "Border",
- "Canvas",
- "Grid",
- "VariableSizedWrapGrid",
- "RelativePanel"
- ]
- },
- {
- "UniqueId": "VariableSizedWrapGrid",
- "Title": "VariableSizedWrapGrid",
- "Subtitle": "A layout panel that supports arranging child elements in rows and columns. Each child element can span multiple rows and columns.",
- "ImagePath": "ms-appx:///Assets/VariableSizedWrapGrid.png",
- "Description": "A VariableSizedWrapGrip is used to create grid layouts where content can span multiple rows and columns.",
- "Content": "Elements are arranged in rows or columns that automatically wrap to a new row or column when the MaximumRowsOrColumns value is reached.
Whether elements are arranged in rows or columns is specified by the Orientation property.
Elements can span multiple rows and columns using VariableSizedWrapGrid.RowSpan and VariableSizedWrapGrid.ColumnSpan attached properties.
Elements are sized as specified by the ItemHeight and ItemWidth properties.
Look at the VariableSizedWrapGridPage.xaml file in Visual Studio to see the full code for this page.
",
- "Docs": [
- { "Title": "VariableSizedWrapGrid", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.variablesizedwrapgrid.aspx" },
- { "Title": "Quickstart: Adding layout controls", "Uri": "http://msdn.microsoft.com/en-us/library/windows/apps/hh969155.aspx" }
- ],
- "RelatedControls": [
- "Border",
- "Canvas",
- "Grid",
- "StackPanel",
- "RelativePanel"
- ]
- },
- {
- "UniqueId": "ViewBox",
- "Title": "ViewBox",
- "Subtitle": "A container control that scales its content to a specified size.",
- "ImagePath": "ms-appx:///Assets/ViewBox.png",
- "Description": "Use a ViewBox control scale content up or down to a specified size.",
- "Content": "Look at the ViewBoxPage.xaml file in Visual Studio to see the full code for this page.
",
- "Docs": [ { "Title": "Viewbox", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.viewbox.aspx" } ],
- "RelatedControls": [
- "ScrollViewer",
- "Canvas",
- "Grid",
- "StackPanel",
- "RelativePanel"
- ]
- }
- ]
+ "UniqueId": "ListView",
+ "Title": "ListView",
+ "Subtitle": "Presents a collection of items in a list that can scroll vertically.",
+ "ImagePath": "ms-appx:///Assets/ListView.png",
+ "Description": "The ListView lets you show a collection of items in a list that scrolls vertically.",
+ "Content": "ListView is an ItemsControl, so it can contain a collection of items of any type. To populate the view, add items to the Items collection, or set the ItemsSource property to a data source.
Set an ItemTemplate to define the look of individual items.
Look at the ListViewPage.xaml file in Visual Studio to see the full code for this page.
",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "ListView",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.listview.aspx"
+ },
+ {
+ "Title": "Quickstart: Adding ListView and GridView controls",
+ "Uri": "http://msdn.microsoft.com/en-us/library/windows/apps/hh780650.aspx"
+ }
+ ],
+ "RelatedControls": [
+ "GridView",
+ "FlipView",
+ "SemanticZoom",
+ "Hub"
+ ]
},
{
- "UniqueId": "Progress",
- "Title": "Progress controls",
- "Subtitle": "ProgressBar, ProgressRing",
- "ImagePath": "ms-appx:///Assets/ProgressBar.png",
- "Description": "Use progress controls to graphically represent ongoing activity or the progress of a task.",
- "Items": [
- {
- "UniqueId": "ProgressBar",
- "Title": "ProgressBar",
- "Subtitle": "Shows the apps progress on a task, or that the app is performing ongoing work that doesn't block user interaction.",
- "ImagePath": "ms-appx:///Assets/ProgressBar.png",
- "Description": "The ProgressBar has two different visual representations:\nIndeterminate - shows that a task is ongoing, but doesn't block user interaction.\nDeterminate - shows how much progress has been made on a known amount of work.",
- "Content": "Look at the ProgressBarPage.xaml file in Visual Studio to see the full code for this page.
",
- "Docs": [
- { "Title": "ProgressBar", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.button.aspx" },
- { "Title": "Quickstart: Adding progress controls", "Uri": "http://msdn.microsoft.com/en-us/library/windows/apps/hh780651.aspx" },
- { "Title": "Guidelines", "Uri": "http://msdn.microsoft.com/en-us/library/windows/apps/hh780631.aspx" }
- ],
- "RelatedControls": [
- "ProgressRing"
- ]
- },
- {
- "UniqueId": "ProgressRing",
- "Title": "ProgressRing",
- "Subtitle": "Shows that the app is performing ongoing work that blocks user interaction.",
- "ImagePath": "ms-appx:///Assets/ProgressRing.png",
- "Description": "Use a ProgressRing to show that the app is performing ongoing work that blocks user interaction.",
- "Content": "Look at the ProgressRingPage.xaml file in Visual Studio to see the full code for this page.
",
- "Docs": [
- { "Title": "ProgressRing", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.progressring.aspx" },
- { "Title": "Quickstart: Adding progress controls", "Uri": "http://msdn.microsoft.com/en-us/library/windows/apps/hh780651.aspx" },
- { "Title": "Guidelines", "Uri": "http://msdn.microsoft.com/en-us/library/windows/apps/hh780631.aspx" }
- ],
- "RelatedControls": [
- "ProgressBar"
- ]
- }
- ]
+ "UniqueId": "PullToRefresh",
+ "Title": "Pull to refresh",
+ "Subtitle": "Touch gesture for dragging down to fetch new data.",
+ "ImagePath": "ms-appx:///Assets/PullToRefresh.png",
+ "Description": "Touch gesture for dragging down to fetch new data.",
+ "Content": "",
+ "IsNew": true,
+ "Docs": [
+ {
+ "Title": "RefreshContainer",
+ "Uri": "https://docs.microsoft.com/uwp/api/Windows.UI.Xaml.Controls.RefreshContainer"
+ },
+ {
+ "Title": "RefreshVisualizer",
+ "Uri": "https://docs.microsoft.com/uwp/api/Windows.UI.Xaml.Controls.RefreshVisualizer"
+ }
+ ],
+ "RelatedControls": [
+ "GridView",
+ "ListView",
+ "TreeView"
+ ]
},
{
- "UniqueId": "Selection",
- "Title": "Selection and picker controls",
- "Subtitle": "CheckBox, ComboBox, DatePicker, ListBox, RadioButton, Slider, TimePicker, ToggleSwitch",
- "ImagePath": "ms-appx:///Assets/CheckBox.png",
- "Description": "Use selection controls to let a user set a value or choose between various options.",
- "Items": [
- {
- "UniqueId": "CalendarView",
- "Title": "CalendarView",
- "Subtitle": "A control that presents a calendar for a user to choose a date from.",
- "ImagePath": "ms-appx:///Assets/CalendarView.png",
- "Description": "CalendarView shows a larger view for showing and selecting dates. DatePicker by contrast has a compact view with inline selection.",
- "Content": "Look at the CalendarView.xaml file in Visual Studio to see the full code for this page.
",
- "Docs": [
- { "Title": "CalendarView", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.calendarview.aspx" }
- ],
- "RelatedControls": [
- "DatePicker",
- "TimePicker"
- ]
- },
- {
- "UniqueId": "CheckBox",
- "Title": "CheckBox",
- "Subtitle": "A control that a user can select or clear.",
- "ImagePath": "ms-appx:///Assets/CheckBox.png",
- "Description": "CheckBox controls let the user select a combination of binary options. In contrast, RadioButton controls allow the user to select from mutually exclusive options. The indeterminate state is used to indicate that an option is set for some, but not all, child options. Don't allow users to set an indeterminate state directly to indicate a third option.",
- "Content": "Check and uncheck these controls to see how they look in each state. The label for each CheckBox is defined by its Content property.
Use a three-state CheckBox to show that none, some, or all of an items sub-options are checked. You have to add some code to do this. Take a look at the methods in the SelectAllMethods region of CheckBoxPage.xaml.cs to see how we did it.
",
- "Docs": [ { "Title": "CheckBox", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.checkbox.aspx" } ],
- "RelatedControls": [
- "RadioButton",
- "ToggleSwitch",
- "ToggleButton"
- ]
- },
- {
- "UniqueId": "ComboBox",
- "Title": "ComboBox",
- "Subtitle": "A drop-down list of items a user can select from.",
- "ImagePath": "ms-appx:///Assets/ComboBox.png",
- "Description": "Use a ComboBox when you need to conserve on-screen space and when users select only one option at a time. A ComboBox shows only the currently selected item.",
- "Content": "Look at the ComboBoxPage.xaml file in Visual Studio to see the full code for this page.
",
- "Docs": [
- { "Title": "ComboBox", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.combobox.aspx" },
- { "Title": "ComboBoxItem", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.comboboxitem.aspx" }
- ],
- "RelatedControls": [
- "ListBox",
- "RadioButton",
- "CheckBox",
- "ListView",
- "AutoSuggestBox"
- ]
- },
- {
- "UniqueId": "DatePicker",
- "Title": "DatePicker",
- "Subtitle": "A configurable control that lets a user pick a date value.",
- "ImagePath": "ms-appx:///Assets/DatePicker.png",
- "Description": "Use a DatePicker to let users set a date in your app, for example to schedule an appointment. The DatePicker displays three controls for month, date, and year. These controls are easy to use with touch or mouse, and they can be styled and configured in several different ways.",
- "Content": "Look at the DatePickerPage.xaml file in Visual Studio to see the full code for this page.
",
- "Docs": [
- { "Title": "DatePicker", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.datepicker.aspx" },
- { "Title": "Quickstart: Adding a DatePicker", "Uri": "http://msdn.microsoft.com/en-us/library/windows/apps/dn308514.aspx" }
- ],
- "RelatedControls": [
- "TimePicker",
- "CalendarView"
- ]
- },
- {
- "UniqueId": "ListBox",
- "Title": "ListBox",
- "Subtitle": "A control that presents an inline list of items that the user can select from.",
- "ImagePath": "ms-appx:///Assets/ListBox.png",
- "Description": "Use a ListBox when you want the options to be visible all the time or when users can select more than one option at a time. ListBox controls are always open, which allows several items to be displayed to the user without user interaction.",
- "Content": "Look at the ListBoxPage.xaml file in Visual Studio to see the full code for this page.
",
- "Docs": [
- { "Title": "ListBox", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.listbox.aspx" },
- { "Title": "ListBoxItem", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.listboxitem.aspx" }
- ],
- "RelatedControls": [
- "ComboBox",
- "RadioButton",
- "CheckBox",
- "AutoSuggestBox"
- ]
- },
- {
- "UniqueId": "RadioButton",
- "Title": "RadioButton",
- "Subtitle": "A control that allows a user to select a single option from a group of options. When radio buttons are grouped together they are mutually exclusive.",
- "ImagePath": "ms-appx:///Assets/RadioButton.png",
- "Description": "Use RadioButtons to let a user choose between mutually exclusive, related options.",
- "Content": "Look at the RadioButtonPage.xaml file in Visual Studio to see the full code for this page.
",
- "Docs": [ { "Title": "RadioButton", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.radiobutton.aspx" } ],
- "RelatedControls": [
- "CheckBox",
- "ToggleSwitch",
- "ToggleButton"
- ]
- },
- {
- "UniqueId": "Slider",
- "Title": "Slider",
- "Subtitle": "A control that lets the user select from a range of values by moving a Thumb control along a track.",
- "ImagePath": "ms-appx:///Assets/Slider.png",
- "Description": "Use a Slider when you want your users to be able to set defined, contiguous values (such as volume or brightness) or a range of discrete values (such as screen resolution settings).",
- "Content": "Look at the SliderPage.xaml file in Visual Studio to see the full code for this page.
",
- "Docs": [ { "Title": "Slider", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.slider.aspx" } ],
- "RelatedControls": [
- "ComboBox",
- "ListBox"
- ]
- },
- {
- "UniqueId": "TimePicker",
- "Title": "TimePicker",
- "Subtitle": "A configurable control that lets a user pick a time value.",
- "ImagePath": "ms-appx:///Assets/TimePicker.png",
- "Description": "Use a TimePicker to let users set a time in your app, for example to set a reminder. The TimePicker displays three controls for month, day, and and AM/PM. These controls are easy to use with touch or mouse, and they can be styled and configured in several different ways.",
- "Content": "Look at the TimePickerPage.xaml file in Visual Studio to see the full code for this page.
",
- "Docs": [
- { "Title": "TimePicker", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.timepicker.aspx" },
- { "Title": "Quickstart: Adding a TimePicker", "Uri": "http://msdn.microsoft.com/en-us/library/windows/apps/dn308517.aspx" }
- ],
- "RelatedControls": [
- "DatePicker",
- "CalendarView"
- ]
- },
- {
- "UniqueId": "ToggleSwitch",
- "Title": "ToggleSwitch",
- "Subtitle": "A switch that can be toggled between 2 states.",
- "ImagePath": "ms-appx:///Assets/ToggleSwitch.png",
- "Description": "Use ToggleSwitch controls to present users with exactly two mutually exclusive options (like on/off), where choosing an option results in an immediate commit. A toggle switch should have a single label.",
- "Content": "Look at the ToggleSwitchPage.xaml file in Visual Studio to see the full code for this page.
",
- "Docs": [ { "Title": "ToggleSwitch", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.toggleswitch.aspx" } ],
- "RelatedControls": [
- "ToggleButton",
- "RadioButton",
- "Checkbox",
- "AppBarToggleButton"
- ]
- }
- ]
+ "UniqueId": "SemanticZoom",
+ "Title": "SemanticZoom",
+ "Subtitle": "Lets the user zoom between two different views of a collection, making it easier to navigate through large collections of items.",
+ "ImagePath": "ms-appx:///Assets/DefaultIcon.png",
+ "Description": "The SemanticZoom lets you show grouped data in two different ways, and is useful for quickly navigating through large sets of data.",
+ "Content": "Look at the SemanticZoomPage.xaml file in Visual Studio to see the full code for this page.
",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "SemanticZoom",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.semanticzoom.aspx"
+ },
+ {
+ "Title": "Quickstart: Adding SemanticZoom controls",
+ "Uri": "http://msdn.microsoft.com/en-us/library/windows/apps/hh781234.aspx"
+ }
+ ],
+ "RelatedControls": [
+ "GridView",
+ "ListView",
+ "Hub"
+ ]
},
{
- "UniqueId": "Text",
- "Title": "Text controls",
- "Subtitle": "AutoSuggestBox, PasswordBox, RichEditBox, RichTextBlock, TextBlock, TextBox",
- "ImagePath": "ms-appx:///Assets/TextBox.png",
- "Description": "Use text controls to display or edit plain text and other rich content.",
- "Items": [
- {
- "UniqueId": "AutoSuggestBox",
- "Title": "AutoSuggestBox",
- "Subtitle": "A control to provide suggestions as a user is typing.",
- "ImagePath": "ms-appx:///Assets/AutoSuggestBox.png",
- "Description": "A text control that makes suggestions to users as they type. The app is notified when text has been changed by the user and is responsible for providing relevant suggestions for this control to display.",
- "Content": "Look at the AutoSuggestBoxPage.xaml file in Visual Studio to see the full code for this page.
",
- "Docs": [
- { "Title": "AutoSuggestBox", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.autosuggestbox.aspx" }
- ],
- "RelatedControls": [
- "ListBox",
- "ComboBox",
- "TextBox"
- ]
- },
- {
- "UniqueId": "PasswordBox",
- "Title": "PasswordBox",
- "Subtitle": "A control for entering passwords.",
- "ImagePath": "ms-appx:///Assets/PasswordBox.png",
- "Description": "A user can enter a single line of non-wrapping text in a PasswordBox control. The text is masked by characters that you can specify by using the PasswordChar property, and you can specify the maximum number of characters that the user can enter by setting the MaxLength property.",
- "Content": "Look at the PasswordBoxPage.xaml file in Visual Studio to see the full code for this page.
",
- "Docs": [
- { "Title": "PasswordBox", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.passwordbox.aspx" },
- { "Title": "Quickstart: Adding text input and editing controls", "Uri": "http://msdn.microsoft.com/en-us/library/windows/apps/hh700391.aspx" }
- ],
- "RelatedControls": [
- "TextBox",
- "TextBlock",
- "RichTextBlock",
- "RichEditBox"
- ]
- },
- {
- "UniqueId": "RichEditBox",
- "Title": "RichEditBox",
- "Subtitle": "A rich text editing control that supports formatted text, hyperlinks, and other rich content.",
- "ImagePath": "ms-appx:///Assets/RichEditBox.png",
- "Description": "You can use a RichEditBox control to enter and edit rich text documents that contain formatted text, hyperlinks, and images. By default, the RichEditBox supports spell checking. You can make a RichEditBox read-only by setting its IsReadOnly property to true.",
- "Content": "On this page, you can type into the RichTextBox control and save it as a RichTextFormat (.rtf) document, or load an existing .rtf document. You can format the text as Bold or Underlined, and change the text color.
Look at the RichEditBoxPage.xaml file in Visual Studio to see the full code for this page.
",
- "Docs": [
- { "Title": "RichEditBox", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.richeditbox.aspx" },
- { "Title": "Quickstart: Adding text input and editing controls", "Uri": "http://msdn.microsoft.com/en-us/library/windows/apps/hh700391.aspx" }
- ],
- "RelatedControls": [
- "TextBox",
- "RichTextBlock",
- "TextBlock"
- ]
- },
- {
- "UniqueId": "RichTextBlock",
- "Title": "RichTextBlock",
- "Subtitle": "A control that displays formatted text, hyperlinks, inline images, and other rich content.",
- "ImagePath": "ms-appx:///Assets/RichTextBlock.png",
- "Description": "RichTextBlock provides more advanced formatting features than the TextBlock control. You can apply character and paragraph formatting to the text in the RichTextBlock. For example, you can apply Bold, Italic, and Underline to any portion of the text in the control. You can use linked text containers (a RichTextBlock linked to RichTextBlockOverflow elements) to create advanced page layouts.",
- "Content": "Change the width of the app to see how the RichTextBlock overflows into additional columns as the app gets narrower.
Look at the RichTextBlockPage.xaml file in Visual Studio to see the full code for this page.
",
- "Docs": [
- { "Title": "RichTextBlock", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.richtextblock.aspx" },
- { "Title": "Quickstart: Displaying text", "Uri": "http://msdn.microsoft.com/en-us/library/windows/apps/hh700392.aspx" }
- ],
- "RelatedControls": [
- "TextBlock",
- "TextBox",
- "PasswordBox",
- "RichEditBox"
- ]
- },
- {
- "UniqueId": "TextBlock",
- "Title": "TextBlock",
- "Subtitle": "A lightweight control for displaying small amounts of text.",
- "ImagePath": "ms-appx:///Assets/TextBlock.png",
- "Description": "TextBlock is the primary control for displaying read-only text in your app. You typically display text by setting the Text property to a simple string. You can also display a series of strings in Run elements and give each different formatting.",
- "Content": "Look at the TextBlockPage.xaml file in Visual Studio to see the full code for this page.
",
- "Docs": [
- { "Title": "TextBlock", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.textblock.aspx" },
- { "Title": "Quickstart: Displaying text", "Uri": "http://msdn.microsoft.com/en-us/library/windows/apps/hh700392.aspx" }
- ],
- "RelatedControls": [
- "TextBox",
- "RichTextBlock",
- "PasswordBox",
- "RichEditBox"
- ]
- },
- {
- "UniqueId": "TextBox",
- "Title": "TextBox",
- "Subtitle": "A single-line or multi-line plain text field.",
- "ImagePath": "ms-appx:///Assets/TextBox.png",
- "Description": "Use a TextBox to let a user enter simple text input in your app. You can add a header and placeholder text to let the user know what the TextBox is for, and you can customize it in other ways.",
- "Content": "Look at the TextBoxPage.xaml file in Visual Studio to see the full code for this page.
",
- "Docs": [
- { "Title": "TextBox", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.textbox.aspx" },
- { "Title": "Quickstart: Adding text input and editing controls", "Uri": "http://msdn.microsoft.com/en-us/library/windows/apps/hh700391.aspx" }
- ],
- "RelatedControls": [
- "TextBlock",
- "RichTextBlock",
- "PasswordBox",
- "RichEditBox",
- "AutoSuggestBox"
- ]
- }
- ]
+ "UniqueId": "TreeView",
+ "Title": "TreeView",
+ "Subtitle": "A hierarchical list with expanding and collapsing nodes that contain nested items.",
+ "ImagePath": "ms-appx:///Assets/TreeView.png",
+ "Description": "A hierarchical list with expanding and collapsing nodes that contain nested items.",
+ "Content": "",
+ "IsNew": true,
+ "Docs": [
+ {
+ "Title": "TreeView",
+ "Uri": "https://docs.microsoft.com/uwp/api/Windows.UI.Xaml.Controls.TreeView"
+ }
+ ],
+ "RelatedControls": [
+ "ListView",
+ "GridView"
+ ]
+ }
+ ]
+ },
+ {
+ "UniqueId": "DataInput",
+ "Title": "Data Input",
+ "Subtitle": "CheckBox, ComboBox, DatePicker, ListBox, RadioButton, Slider, TimePicker, ToggleSwitch",
+ "ImagePath": "ms-appx:///Assets/NavigationViewItemIcons/PickerIcon.png",
+ "Description": "Use selection controls to let a user set a value or choose between various options.",
+ "Items": [
+ {
+ "UniqueId": "CalendarDatePicker",
+ "Title": "CalendarDatePicker",
+ "Subtitle": "A control that lets users pick a date value using a calendar.",
+ "ImagePath": "ms-appx:///Assets/CalenderDatePicker.png",
+ "Description": "A control that lets users pick a date value using a calendar.",
+ "Content": "",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "CalendarDatePicker",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.calendarview.aspx"
+ }
+ ],
+ "RelatedControls": [
+ "DatePicker",
+ "CalendarView"
+ ]
+ },
+ {
+ "UniqueId": "CalendarView",
+ "Title": "CalendarView",
+ "Subtitle": "A control that presents a calendar for a user to choose a date from.",
+ "ImagePath": "ms-appx:///Assets/CalendarView.png",
+ "Description": "CalendarView shows a larger view for showing and selecting dates. DatePicker by contrast has a compact view with inline selection.",
+ "Content": "Look at the CalendarView.xaml file in Visual Studio to see the full code for this page.
",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "CalendarView",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.calendarview.aspx"
+ }
+ ],
+ "RelatedControls": [
+ "CalendarDatePicker",
+ "DatePicker",
+ "TimePicker"
+ ]
+ },
+ {
+ "UniqueId": "CheckBox",
+ "Title": "CheckBox",
+ "Subtitle": "A control that a user can select or clear.",
+ "ImagePath": "ms-appx:///Assets/CheckBox.png",
+ "Description": "CheckBox controls let the user select a combination of binary options. In contrast, RadioButton controls allow the user to select from mutually exclusive options. The indeterminate state is used to indicate that an option is set for some, but not all, child options. Don't allow users to set an indeterminate state directly to indicate a third option.",
+ "Content": "Check and uncheck these controls to see how they look in each state. The label for each CheckBox is defined by its Content property.
Use a three-state CheckBox to show that none, some, or all of an items sub-options are checked. You have to add some code to do this. Take a look at the methods in the SelectAllMethods region of CheckBoxPage.xaml.cs to see how we did it.
",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "CheckBox",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.checkbox.aspx"
+ }
+ ],
+ "RelatedControls": [
+ "RadioButton",
+ "ToggleSwitch",
+ "ToggleButton"
+ ]
+ },
+ {
+ "UniqueId": "ColorPicker",
+ "Title": "ColorPicker",
+ "Subtitle": "A selectable color spectrum.",
+ "ImagePath": "ms-appx:///Assets/ColorPicker.png",
+ "Description": "A selectable color spectrum.",
+ "Content": "",
+ "IsNew": true,
+ "Docs": [
+ {
+ "Title": "ColorPicker",
+ "Uri": "https://docs.microsoft.com/uwp/api/Windows.UI.Xaml.Controls.ColorPicker"
+ }
+ ],
+ "RelatedControls": [
+ "ComboBox"
+ ]
+ },
+ {
+ "UniqueId": "DatePicker",
+ "Title": "DatePicker",
+ "Subtitle": "A configurable control that lets a user pick a date value.",
+ "ImagePath": "ms-appx:///Assets/DatePicker.png",
+ "Description": "Use a DatePicker to let users set a date in your app, for example to schedule an appointment. The DatePicker displays three controls for month, date, and year. These controls are easy to use with touch or mouse, and they can be styled and configured in several different ways.",
+ "Content": "Look at the DatePickerPage.xaml file in Visual Studio to see the full code for this page.
",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "DatePicker",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.datepicker.aspx"
+ },
+ {
+ "Title": "Quickstart: Adding a DatePicker",
+ "Uri": "http://msdn.microsoft.com/en-us/library/windows/apps/dn308514.aspx"
+ }
+ ],
+ "RelatedControls": [
+ "CalendarDatePicker",
+ "CalendarView",
+ "TimePicker"
+ ]
+ },
+ {
+ "UniqueId": "RadioButton",
+ "Title": "RadioButton",
+ "Subtitle": "A control that allows a user to select a single option from a group of options. When radio buttons are grouped together they are mutually exclusive.",
+ "ImagePath": "ms-appx:///Assets/RadioButton.png",
+ "Description": "Use RadioButtons to let a user choose between mutually exclusive, related options.",
+ "Content": "Look at the RadioButtonPage.xaml file in Visual Studio to see the full code for this page.
",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "RadioButton",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.radiobutton.aspx"
+ }
+ ],
+ "RelatedControls": [
+ "CheckBox",
+ "ToggleSwitch",
+ "ToggleButton"
+ ]
+ },
+ {
+ "UniqueId": "RatingsControl",
+ "Title": "RatingsControl",
+ "Subtitle": "Rate something 1 to 5 stars.",
+ "ImagePath": "ms-appx:///Assets/RatingControl.png",
+ "Description": "Rate something 1 to 5 stars.",
+ "Content": "",
+ "IsNew": true,
+ "Docs": [
+ {
+ "Title": "RatingsControl",
+ "Uri": "https://docs.microsoft.com/uwp/api/Windows.UI.Xaml.Controls.RatingsControl"
+ }
+ ],
+ "RelatedControls": [
+ "Slider",
+ "ComboBox"
+ ]
+ },
+ {
+ "UniqueId": "Slider",
+ "Title": "Slider",
+ "Subtitle": "A control that lets the user select from a range of values by moving a Thumb control along a track.",
+ "ImagePath": "ms-appx:///Assets/Slider.png",
+ "Description": "Use a Slider when you want your users to be able to set defined, contiguous values (such as volume or brightness) or a range of discrete values (such as screen resolution settings).",
+ "Content": "Look at the SliderPage.xaml file in Visual Studio to see the full code for this page.
",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "Slider",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.slider.aspx"
+ }
+ ],
+ "RelatedControls": [
+ "ComboBox",
+ "ListBox",
+ "RatingsControl"
+ ]
+ },
+ {
+ "UniqueId": "TimePicker",
+ "Title": "TimePicker",
+ "Subtitle": "A configurable control that lets a user pick a time value.",
+ "ImagePath": "ms-appx:///Assets/TimePicker.png",
+ "Description": "Use a TimePicker to let users set a time in your app, for example to set a reminder. The TimePicker displays three controls for month, day, and and AM/PM. These controls are easy to use with touch or mouse, and they can be styled and configured in several different ways.",
+ "Content": "Look at the TimePickerPage.xaml file in Visual Studio to see the full code for this page.
",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "TimePicker",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.timepicker.aspx"
+ },
+ {
+ "Title": "Quickstart: Adding a TimePicker",
+ "Uri": "http://msdn.microsoft.com/en-us/library/windows/apps/dn308517.aspx"
+ }
+ ],
+ "RelatedControls": [
+ "DatePicker",
+ "CalendarView"
+ ]
+ },
+ {
+ "UniqueId": "ToggleSwitch",
+ "Title": "ToggleSwitch",
+ "Subtitle": "A switch that can be toggled between 2 states.",
+ "ImagePath": "ms-appx:///Assets/ToggleSwitch.png",
+ "Description": "Use ToggleSwitch controls to present users with exactly two mutually exclusive options (like on/off), where choosing an option results in an immediate commit. A toggle switch should have a single label.",
+ "Content": "Look at the ToggleSwitchPage.xaml file in Visual Studio to see the full code for this page.
",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "ToggleSwitch",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.toggleswitch.aspx"
+ }
+ ],
+ "RelatedControls": [
+ "ToggleButton",
+ "RadioButton",
+ "CheckBox",
+ "AppBarToggleButton"
+ ]
+ }
+ ]
+ },
+ {
+ "UniqueId": "Indicators",
+ "Title": "Indicators",
+ "Subtitle": "ProgressBar, ProgressRing",
+ "ImagePath": "ms-appx:///Assets/NavigationViewItemIcons/ProgressIcon.png",
+ "Description": "Use progress controls to graphically represent ongoing activity or the progress of a task.",
+ "Items": [
+ {
+ "UniqueId": "ProgressBar",
+ "Title": "ProgressBar",
+ "Subtitle": "Shows the apps progress on a task, or that the app is performing ongoing work that doesn't block user interaction.",
+ "ImagePath": "ms-appx:///Assets/ProgressBar.png",
+ "Description": "The ProgressBar has two different visual representations:\nIndeterminate - shows that a task is ongoing, but doesn't block user interaction.\nDeterminate - shows how much progress has been made on a known amount of work.",
+ "Content": "Look at the ProgressBarPage.xaml file in Visual Studio to see the full code for this page.
",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "ProgressBar",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.button.aspx"
+ },
+ {
+ "Title": "Quickstart: Adding progress controls",
+ "Uri": "http://msdn.microsoft.com/en-us/library/windows/apps/hh780651.aspx"
+ },
+ {
+ "Title": "Guidelines",
+ "Uri": "http://msdn.microsoft.com/en-us/library/windows/apps/hh780631.aspx"
+ }
+ ],
+ "RelatedControls": [
+ "ProgressRing"
+ ]
+ },
+ {
+ "UniqueId": "ProgressRing",
+ "Title": "ProgressRing",
+ "Subtitle": "Shows that the app is performing ongoing work that blocks user interaction.",
+ "ImagePath": "ms-appx:///Assets/ProgressRing.png",
+ "Description": "Use a ProgressRing to show that the app is performing ongoing work that blocks user interaction.",
+ "Content": "Look at the ProgressRingPage.xaml file in Visual Studio to see the full code for this page.
",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "ProgressRing",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.progressring.aspx"
+ },
+ {
+ "Title": "Quickstart: Adding progress controls",
+ "Uri": "http://msdn.microsoft.com/en-us/library/windows/apps/hh780651.aspx"
+ },
+ {
+ "Title": "Guidelines",
+ "Uri": "http://msdn.microsoft.com/en-us/library/windows/apps/hh780631.aspx"
+ }
+ ],
+ "RelatedControls": [
+ "ProgressBar"
+ ]
+ }
+ ]
+ },
+ {
+ "UniqueId": "Layout",
+ "Title": "Layout controls",
+ "Subtitle": "Border, Canvas, Grid, RelativePanel, ScrollViewer, SplitView, StackPanel, VariableSizedWrapGrid, ViewBox",
+ "ImagePath": "\uE80A",
+ "Description": "Use layout controls to arrange the controls and content in your app.",
+ "Items": [
+ {
+ "UniqueId": "Border",
+ "Title": "Border",
+ "Subtitle": "A container control that draws a boundary line, background, or both, around another object.",
+ "ImagePath": "ms-appx:///Assets/Border.png",
+ "Description": "Use a Border control to draw a boundary line, background, or both, around another object. A Border can contain only one child object.",
+ "Content": "A Border can contain only one child object. If you want to put a border around multiple objects, first wrap them in a container object such as StackPanel and make the StackPanel the child of the Border.
You can change the appearance of a Border by setting basic properties:
- Width/Height
- BorderBrush
- BorderThickness
- Background
Most of the control pages in this app have XAML blocks to show basic usage. The appearance of the XAML blocks is defined by a Border control. Look at the CodeBorderStyle resource in App.xaml to see the Style that's applied to the Borders.
Look at the BorderPage.xaml file in Visual Studio to see the full code for this page.
",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "Border",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.border.aspx"
+ },
+ {
+ "Title": "Quickstart: Adding layout controls",
+ "Uri": "http://msdn.microsoft.com/en-us/library/windows/apps/hh969155.aspx"
+ }
+ ],
+ "RelatedControls": [
+ "Canvas",
+ "Grid",
+ "StackPanel",
+ "VariableSizedWrapGrid",
+ "RelativePanel"
+ ]
+ },
+ {
+ "UniqueId": "Canvas",
+ "Title": "Canvas",
+ "Subtitle": "A layout panel that supports absolute positioning of child elements relative to the top left corner of the canvas.",
+ "ImagePath": "ms-appx:///Assets/Canvas.png",
+ "Description": "The Canvas provides absolute positioning of controls or content. Content is positioned relative to the Canvas using the Canvas.Top and Canvas.Left attached properties.",
+ "Content": "Items are positioned on the Canvas using the Canvas.Top and Canvas.Left attached properties. Use the sliders to change these properties for the red rectangle and see how it moves around.
To see the effect of the ZIndex attached property, make sure the red rectangle is overlapping the other rectangles.
Look at the CanvasPage.xaml file in Visual Studio to see the full code for this page.
",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "Canvas",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.canvas.aspx"
+ },
+ {
+ "Title": "Quickstart: Adding layout controls",
+ "Uri": "http://msdn.microsoft.com/en-us/library/windows/apps/hh969155.aspx"
+ }
+ ],
+ "RelatedControls": [
+ "Border",
+ "Grid",
+ "StackPanel",
+ "VariableSizedWrapGrid",
+ "RelativePanel"
+ ]
+ },
+ {
+ "UniqueId": "Flyout",
+ "Title": "Flyout",
+ "Subtitle": "Shows contextual information and enables user interaction.",
+ "ImagePath": "ms-appx:///Assets/Flyout.png",
+ "Description": "A Flyout displays lightweight UI that is either information, or requires user interaction. Unlike a dialog, a Flyout can be light dismissed by clicking or tapping off of it. Use it to collect input from the user, show more details about an item, or ask the user to confirm an action.",
+ "Content": "Look at the FlyoutPage.xaml file in Visual Studio to see the full code for this page.
",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "Flyout",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.flyout.aspx"
+ },
+ {
+ "Title": "Quickstart: Adding a Flyout",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/dn308515.aspx"
+ }
+ ],
+ "RelatedControls": [
+ "ContentDialog",
+ "MenuFlyout",
+ "Button",
+ "AppBarButton"
+ ]
+ },
+ {
+ "UniqueId": "Grid",
+ "Title": "Grid",
+ "Subtitle": "A layout panel that supports arranging child elements in rows and columns. ",
+ "ImagePath": "ms-appx:///Assets/Grid.png",
+ "Description": "The Grid is used to arrange controls and content in rows and columns. Content is positioned in the grid using Grid.Row and Grid.Column attached properties.",
+ "Content": "Look at the GridPage.xaml file in Visual Studio to see the full code for this page.
",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "Grid",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.grid.aspx"
+ },
+ {
+ "Title": "Quickstart: Adding layout controls",
+ "Uri": "http://msdn.microsoft.com/en-us/library/windows/apps/hh969155.aspx"
+ }
+ ],
+ "RelatedControls": [
+ "Border",
+ "Canvas",
+ "StackPanel",
+ "VariableSizedWrapGrid",
+ "RelativePanel"
+ ]
+ },
+ {
+ "UniqueId": "ParallaxView",
+ "Title": "ParallaxView",
+ "Subtitle": "A container control that provides the parallax effect when scrolling.",
+ "ImagePath": "ms-appx:///Assets/ParallaxView.png",
+ "Description": "A container control that provides the parallax effect when scrolling.",
+ "Content": "",
+ "IsNew": true,
+ "Docs": [
+ {
+ "Title": "ParallaxView",
+ "Uri": "https://docs.microsoft.com/uwp/api/Windows.UI.Xaml.Controls.Parallaxview"
+ }
+ ],
+ "RelatedControls": [
+ "ScrollViewer"
+ ]
+ },
+ {
+ "UniqueId": "RelativePanel",
+ "Title": "RelativePanel",
+ "Subtitle": "A panel that uses relationships between elements to define layout.",
+ "ImagePath": "ms-appx:///Assets/RelativePanel.png",
+ "Description": "Use a RelativePanel to layout elements by defining the relationships between elements and in relation to the panel.",
+ "Content": "Look at the RelativePanelPage.xaml file in Visual Studio to see the full code for this page.
",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "RelativePanel",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.relativepanel.aspx"
+ }
+ ],
+ "RelatedControls": [
+ "Grid",
+ "StackPanel",
+ "Border",
+ "Canvas",
+ "ViewBox"
+ ]
},
{
- "UniqueId": "MediaInk",
- "Title": "Media and ink controls",
- "Subtitle": "Image, InkCanvas, MediaElement",
- "ImagePath": "ms-appx:///Assets/Image.png",
- "Description": "Use media controls to display images and videos. Use ink to capture strokes and display them.",
- "Items": [
- {
- "UniqueId": "Image",
- "Title": "Image",
- "Subtitle": "A control to display image content.",
- "ImagePath": "ms-appx:///Assets/Image.png",
- "Description": "You can use an Image control to show and scale images.",
- "Content": "Look at the ImagePage.xaml file in Visual Studio to see the full code for this page.
",
- "Docs": [
- { "Title": "Image", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.image.aspx" },
- { "Title": "Quickstart: Image and ImageBrush", "Uri": "https://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh868203.aspx" }
- ],
- "RelatedControls": [
- "MediaElement"
- ]
- },
- {
- "UniqueId": "InkCanvas",
- "Title": "InkCanvas",
- "Subtitle": "A control to capture and display strokes.",
- "ImagePath": "ms-appx:///Assets/InkCanvas.png",
- "Description": "You can use an InkCanvas to capture strokes and display them. You can also change the way the strokes are displayed through the InkDrawingAttributes.",
- "Content": "Look at the InkCanvasPage.xaml file in Visual Studio to see the full code for this page.
",
- "Docs": [
- { "Title": "InkCanvas", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.inkcanvas.aspx" }
- ],
- "RelatedControls": [
- "Canvas"
- ]
- },
- {
- "UniqueId": "MediaElement",
- "Title": "MediaElement",
- "Subtitle": "A control to display video and image content.",
- "ImagePath": "ms-appx:///Assets/MediaElement.png",
- "Description": "You can use a MediaElement control to playback videos and show images. You can show transport controls or make the video autoplay.",
- "Content": "Look at the MediaElementPage.xaml file in Visual Studio to see the full code for this page.
",
- "Docs": [
- { "Title": "Image", "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.image.aspx" },
- { "Title": "Quickstart: video and audio", "Uri": "https://msdn.microsoft.com/en-us/library/windows/apps/hh465160.aspx" },
- { "Title": "Quickstart: create custom transport controls", "Uri": "https://msdn.microsoft.com/en-us/library/windows/apps/hh986967.aspx" }
- ],
- "RelatedControls": [
- "Image"
- ]
- }
+ "UniqueId": "ScrollViewer",
+ "Title": "ScrollViewer",
+ "Subtitle": "A container control that lets the user pan and zoom its content.",
+ "ImagePath": "ms-appx:///Assets/ScrollViewer.png",
+ "Description": "A ScrollViewer lets a user scroll, pan, and zoom to see content that's larger than the viewable area. Many content controls, like ListView, have ScrollViewers built into their control templates to provide automatic scrolling.",
+ "Content": "Look at the ScrollViewerPage.xaml file in Visual Studio to see the full code for this page.
",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "ScrollViewer",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.scrollviewer.aspx"
+ }
+ ],
+ "RelatedControls": [
+ "ViewBox",
+ "Canvas",
+ "Grid",
+ "StackPanel",
+ "RelativePanel",
+ "ParallaxView"
+ ]
+ },
+ {
+ "UniqueId": "SplitView",
+ "Title": "SplitView",
+ "Subtitle": "A container that has 2 content areas, with multiple display options for the pane.",
+ "ImagePath": "ms-appx:///Assets/SplitView.png",
+ "Description": "Use a SplitView to display content, such as navigation options, in a pane on the side. There are multiple options for displaying the pane, namely CompactOverlay, Compact, Overlay, Inline. If you are looking for a reference to the hamburger pattern, please see the links in the documentation below.",
+ "Content": "Look at the SplitViewPage.xaml file in Visual Studio to see the full code for this page.
",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "SplitView",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.splitview.aspx"
+ },
+ {
+ "Title": "Hamburger pattern",
+ "Uri": "http://go.microsoft.com/fwlink/p/?LinkId=619902&clcid=0x409"
+ }
+ ],
+ "RelatedControls": [
+ "StackPanel",
+ "ListView",
+ "GridView",
+ "Grid",
+ "RelativePanel"
+ ]
+ },
+ {
+ "UniqueId": "StackPanel",
+ "Title": "StackPanel",
+ "Subtitle": "A layout panel that arranges child elements into a single line that can be oriented horizontally or vertically.",
+ "ImagePath": "ms-appx:///Assets/StackPanel.png",
+ "Description": "A StackPanel is used to arrange items in a line, either horizontally or vertically.",
+ "Content": "Look at the StackPanelPage.xaml file in Visual Studio to see the full code for this page.
",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "StackPanel",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.stackpanel.aspx"
+ },
+ {
+ "Title": "Quickstart: Adding layout controls",
+ "Uri": "http://msdn.microsoft.com/en-us/library/windows/apps/hh969155.aspx"
+ }
+ ],
+ "RelatedControls": [
+ "Border",
+ "Canvas",
+ "Grid",
+ "VariableSizedWrapGrid",
+ "RelativePanel"
+ ]
+ },
+ {
+ "UniqueId": "ToolTip",
+ "Title": "ToolTip",
+ "Subtitle": "Displays information for an element in a pop-up window.",
+ "ImagePath": "ms-appx:///Assets/ToolTip.png",
+ "Description": "A ToolTip shows more information about a UI element. You might show information about what the element does, or what the user should do. The ToolTip is shown when a user hovers over or presses and holds the UI element.",
+ "Content": "Look at the ToolTipPage.xaml file in Visual Studio to see the full code for this page.
",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "ToolTip",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.tooltip.aspx"
+ }
+ ],
+ "RelatedControls": [
+ "Flyout",
+ "ContentDialog"
+ ]
+ },
+ {
+ "UniqueId": "VariableSizedWrapGrid",
+ "Title": "VariableSizedWrapGrid",
+ "Subtitle": "A layout panel that supports arranging child elements in rows and columns. Each child element can span multiple rows and columns.",
+ "ImagePath": "ms-appx:///Assets/VariableSizedWrapGrid.png",
+ "Description": "A VariableSizedWrapGrip is used to create grid layouts where content can span multiple rows and columns.",
+ "Content": "Elements are arranged in rows or columns that automatically wrap to a new row or column when the MaximumRowsOrColumns value is reached.
Whether elements are arranged in rows or columns is specified by the Orientation property.
Elements can span multiple rows and columns using VariableSizedWrapGrid.RowSpan and VariableSizedWrapGrid.ColumnSpan attached properties.
Elements are sized as specified by the ItemHeight and ItemWidth properties.
Look at the VariableSizedWrapGridPage.xaml file in Visual Studio to see the full code for this page.
",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "VariableSizedWrapGrid",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.variablesizedwrapgrid.aspx"
+ },
+ {
+ "Title": "Quickstart: Adding layout controls",
+ "Uri": "http://msdn.microsoft.com/en-us/library/windows/apps/hh969155.aspx"
+ }
+ ],
+ "RelatedControls": [
+ "Border",
+ "Canvas",
+ "Grid",
+ "StackPanel",
+ "RelativePanel"
+ ]
+ },
+ {
+ "UniqueId": "ViewBox",
+ "Title": "ViewBox",
+ "Subtitle": "A container control that scales its content to a specified size.",
+ "ImagePath": "ms-appx:///Assets/ViewBox.png",
+ "Description": "Use a ViewBox control scale content up or down to a specified size.",
+ "Content": "Look at the ViewBoxPage.xaml file in Visual Studio to see the full code for this page.
",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "Viewbox",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.viewbox.aspx"
+ }
+ ],
+ "RelatedControls": [
+ "ScrollViewer",
+ "Canvas",
+ "Grid",
+ "StackPanel",
+ "RelativePanel"
+ ]
+ }
+ ]
+ },
+ {
+ "UniqueId": "Navigation",
+ "Title": "Navigation",
+ "Subtitle": "Button, HyperlinkButton, RepeatButton, ToggleButton",
+ "ImagePath": "\uE700",
+ "Description": "Use button controls to let users perform an action, like submitting a form or showing a menu.",
+ "Items": [
+ {
+ "UniqueId": "Hub",
+ "Title": "Hub",
+ "Subtitle": "Presents information from different sources in a scrollable view.",
+ "ImagePath": "ms-appx:///Assets/Hub.png",
+ "Description": "Use a Hub to display information from different source in a single scrollable view. Hub can also be used to show categorical information in a separated section format.",
+ "Content": "This page shows a simplified Hub control with minimal content to demonstrate basic Hub usage. Look at the HubPage.xaml file in Visual Studio to see the full code for this page.
A Hub control typically takes up the full page. The app home uses a more fully implemented Hub that demonstrates this. Look at the MainPage.xaml file in Visual Studio to see the full code for the home page Hub.
",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "Hub",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.hub.aspx"
+ },
+ {
+ "Title": "HubSection",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.hubsection.aspx"
+ }
+ ],
+ "RelatedControls": [
+ "Pivot",
+ "SemanticZoom",
+ "ListView",
+ "GridView"
+ ]
+ },
+ {
+ "UniqueId": "NavigationView",
+ "Title": "NavigationView",
+ "Subtitle": "Common vertical layout for top-level areas of your app via a collapsible navigation menu.",
+ "ImagePath": "ms-appx:///Assets/NavigationView.png",
+ "Description": "The navigation view control provides a common vertical layout for top-level areas of your app via a collapsible navigation menu.",
+ "Content": "",
+ "IsNew": true,
+ "Docs": [
+ {
+ "Title": "NavigationView",
+ "Uri": "https://docs.microsoft.com/uwp/api/Windows.UI.Xaml.Controls.NavigationView"
+ }
+ ],
+ "RelatedControls": [
+ "SplitView",
+ "Pivot"
+ ]
+ },
+ {
+ "UniqueId": "Pivot",
+ "Title": "Pivot",
+ "Subtitle": "Presents information from different sources in a tabbed view.",
+ "ImagePath": "ms-appx:///Assets/Pivot.png",
+ "Description": "A Pivot allows you to show a collection of items from different sources in a tabbed view.",
+ "Content": "This page shows a simplified Pivot control with minimal content to demonstrate basic Pivot usage. Look at the PivotPage.xaml file in Visual Studio to see the full code for this page.
A Pivot control typically takes up the full page.
",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "Pivot",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.pivot.aspx"
+ }
+ ],
+ "RelatedControls": [
+ "Hub",
+ "SemanticZoom",
+ "ListView",
+ "GridView"
+ ]
+ }
+ ]
+ },
+ {
+ "UniqueId": "RichContent",
+ "Title": "Rich Content",
+ "Subtitle": "Image, InkCanvas, MediaElement",
+ "ImagePath": "\uE102",
+ "Description": "Use media controls to display images and videos. Use ink to capture strokes and display them.",
+ "Items": [
+ {
+ "UniqueId": "Image",
+ "Title": "Image",
+ "Subtitle": "A control to display image content.",
+ "ImagePath": "ms-appx:///Assets/Image.png",
+ "Description": "You can use an Image control to show and scale images.",
+ "Content": "Look at the ImagePage.xaml file in Visual Studio to see the full code for this page.
",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "Image",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.image.aspx"
+ },
+ {
+ "Title": "Quickstart: Image and ImageBrush",
+ "Uri": "https://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh868203.aspx"
+ }
+ ],
+ "RelatedControls": [
+ "MediaElement",
+ "PersonPicture"
+ ]
+ },
+ {
+ "UniqueId": "InkCanvas",
+ "Title": "InkCanvas",
+ "Subtitle": "A control to capture and display strokes.",
+ "ImagePath": "ms-appx:///Assets/InkCanvas.png",
+ "Description": "You can use an InkCanvas to capture strokes and display them. You can also change the way the strokes are displayed through the InkDrawingAttributes.",
+ "Content": "Look at the InkCanvasPage.xaml file in Visual Studio to see the full code for this page.
",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "InkCanvas",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.inkcanvas.aspx"
+ }
+ ],
+ "RelatedControls": [
+ "Canvas",
+ "InkToolbar"
+ ]
+ },
+ {
+ "UniqueId": "InkToolbar",
+ "Title": "InkToolbar*",
+ "Subtitle": "A collection of buttons that activate features in an associated InkCanvas.",
+ "ImagePath": "ms-appx:///Assets/InkCanvas.png",
+ "Description": "A collection of buttons that activate features in an associated InkCanvas.",
+ "Content": "",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "InkToolbar",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.inktoolbar.aspx"
+ }
+ ],
+ "RelatedControls": [
+ "Canvas",
+ "InkCanvas"
+ ]
+ },
+ {
+ "UniqueId": "MapControl",
+ "Title": "MapControl*",
+ "Subtitle": "Displays an interactive map.",
+ "ImagePath": "ms-appx:///Assets/MapControl.png",
+ "Description": "Displays an interactive map.",
+ "Content": "",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "MapControl",
+ "Uri": "https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.maps.mapcontrol"
+ }
+ ],
+ "RelatedControls": [
+ "Image"
+ ]
+ },
+ {
+ "UniqueId": "MediaElement",
+ "Title": "MediaElement",
+ "Subtitle": "A control to display video and image content.",
+ "ImagePath": "ms-appx:///Assets/MediaElement.png",
+ "Description": "You can use a MediaElement control to playback videos and show images. You can show transport controls or make the video autoplay.",
+ "Content": "Look at the MediaElementPage.xaml file in Visual Studio to see the full code for this page.
",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "MediaElement",
+ "Uri": "https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.mediaelement"
+ },
+ {
+ "Title": "Media Playback",
+ "Uri": "http://windowsstyleguide/controls-and-patterns/media-playback/"
+ }
+ ],
+ "RelatedControls": [
+ "Image",
+ "MediaPlayerElement"
+ ]
+ },
+ {
+ "UniqueId": "MediaPlayerElement",
+ "Title": "MediaPlayerElement",
+ "Subtitle": "A control to display video and image content.",
+ "ImagePath": "ms-appx:///Assets/MediaElement.png",
+ "Description": "This control is the newer version of MediaElement.",
+ "Content": "",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "MediaPlayerElement",
+ "Uri": "https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.MediaPlayerElement"
+ },
+ {
+ "Title": "Media Playback",
+ "Uri": "http://windowsstyleguide/controls-and-patterns/media-playback/"
+ }
+ ],
+ "RelatedControls": [
+ "Image",
+ "MediaElement"
+ ]
+ },
+ {
+ "UniqueId": "PersonPicture",
+ "Title": "PersonPicture",
+ "Subtitle": "Displays the picture of a person/contact.",
+ "ImagePath": "ms-appx:///Assets/PersonPicture.png",
+ "Description": "Displays the picture of a person/contact.",
+ "Content": "",
+ "IsNew": true,
+ "Docs": [
+ {
+ "Title": "PersonPicture",
+ "Uri": "https://docs.microsoft.com/en-us/uwp/api/Windows.UI.Xaml.Controls.PersonPicture"
+ }
+ ],
+ "RelatedControls": [
+ "Image"
+ ]
+ },
+ {
+ "UniqueId": "WebView",
+ "Title": "WebView*",
+ "Subtitle": "Hosts HTML content in an app.",
+ "ImagePath": "ms-appx:///Assets/WebView.png",
+ "Description": "Hosts HTML content in an app.",
+ "Content": "",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "WebView",
+ "Uri": "https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.webview"
+ }
+ ],
+ "RelatedControls": [
+ "RichTextBlock"
+ ]
+ }
+ ]
+ },
+ {
+ "UniqueId": "Styles",
+ "Title": "Styles",
+ "Subtitle": "Acrylic and Reveal",
+ "ImagePath": "\uE2B1",
+ "Description": "Acrylic and Reveal",
+ "Items": [
+ {
+ "UniqueId": "Acrylic",
+ "Title": "Acrylic",
+ "Subtitle": "A translucent material recommended for panel backgrounds.",
+ "ImagePath": "ms-appx:///Assets/AcrylicBrush.png",
+ "Description": "A translucent material recommended for panel backgrounds.",
+ "Content": "",
+ "IsNew": true,
+ "Docs": [
+ {
+ "Title": "Acrylic",
+ "Uri": "https://docs.microsoft.com/windows/uwp/style/"
+ }
+ ],
+ "RelatedControls": [
+ "Reveal"
+ ]
+ },
+ {
+ "UniqueId": "Reveal",
+ "Title": "Reveal",
+ "Subtitle": "A material that changes color near the mouse.",
+ "ImagePath": "ms-appx:///Assets/Reveal.png",
+ "Description": "A material that changes color near the mouse.",
+ "Content": "",
+ "IsNew": true,
+ "Docs": [
+ {
+ "Title": "Reveal",
+ "Uri": "https://docs.microsoft.com/windows/uwp/style/"
+ }
+ ],
+ "RelatedControls": [
+ "Acrylic"
]
+ }
+
+ ]
+ },
+ {
+ "UniqueId": "Text",
+ "Title": "Text controls",
+ "Subtitle": "AutoSuggestBox, PasswordBox, RichEditBox, RichTextBlock, TextBlock, TextBox",
+ "ImagePath": "ms-appx:///Assets/NavigationViewItemIcons/TextIcon.png",
+ "Description": "Use text controls to display or edit plain text and other rich content.",
+ "Items": [
+ {
+ "UniqueId": "AutoSuggestBox",
+ "Title": "AutoSuggestBox",
+ "Subtitle": "A control to provide suggestions as a user is typing.",
+ "ImagePath": "ms-appx:///Assets/AutoSuggestBox.png",
+ "Description": "A text control that makes suggestions to users as they type. The app is notified when text has been changed by the user and is responsible for providing relevant suggestions for this control to display.",
+ "Content": "Look at the AutoSuggestBoxPage.xaml file in Visual Studio to see the full code for this page.
",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "AutoSuggestBox",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.autosuggestbox.aspx"
+ }
+ ],
+ "RelatedControls": [
+ "ListBox",
+ "ComboBox",
+ "TextBox"
+ ]
+ },
+ {
+ "UniqueId": "PasswordBox",
+ "Title": "PasswordBox",
+ "Subtitle": "A control for entering passwords.",
+ "ImagePath": "ms-appx:///Assets/PasswordBox.png",
+ "Description": "A user can enter a single line of non-wrapping text in a PasswordBox control. The text is masked by characters that you can specify by using the PasswordChar property, and you can specify the maximum number of characters that the user can enter by setting the MaxLength property.",
+ "Content": "Look at the PasswordBoxPage.xaml file in Visual Studio to see the full code for this page.
",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "PasswordBox",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.passwordbox.aspx"
+ },
+ {
+ "Title": "Quickstart: Adding text input and editing controls",
+ "Uri": "http://msdn.microsoft.com/en-us/library/windows/apps/hh700391.aspx"
+ }
+ ],
+ "RelatedControls": [
+ "TextBox",
+ "TextBlock",
+ "RichTextBlock",
+ "RichEditBox"
+ ]
+ },
+ {
+ "UniqueId": "RichEditBox",
+ "Title": "RichEditBox",
+ "Subtitle": "A rich text editing control that supports formatted text, hyperlinks, and other rich content.",
+ "ImagePath": "ms-appx:///Assets/RichEditBox.png",
+ "Description": "You can use a RichEditBox control to enter and edit rich text documents that contain formatted text, hyperlinks, and images. By default, the RichEditBox supports spell checking. You can make a RichEditBox read-only by setting its IsReadOnly property to true.",
+ "Content": "On this page, you can type into the RichTextBox control and save it as a RichTextFormat (.rtf) document, or load an existing .rtf document. You can format the text as Bold or Underlined, and change the text color.
Look at the RichEditBoxPage.xaml file in Visual Studio to see the full code for this page.
",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "RichEditBox",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.richeditbox.aspx"
+ },
+ {
+ "Title": "Quickstart: Adding text input and editing controls",
+ "Uri": "http://msdn.microsoft.com/en-us/library/windows/apps/hh700391.aspx"
+ }
+ ],
+ "RelatedControls": [
+ "TextBox",
+ "RichTextBlock",
+ "TextBlock"
+ ]
+ },
+ {
+ "UniqueId": "RichTextBlock",
+ "Title": "RichTextBlock",
+ "Subtitle": "A control that displays formatted text, hyperlinks, inline images, and other rich content.",
+ "ImagePath": "ms-appx:///Assets/RichTextBlock.png",
+ "Description": "RichTextBlock provides more advanced formatting features than the TextBlock control. You can apply character and paragraph formatting to the text in the RichTextBlock. For example, you can apply Bold, Italic, and Underline to any portion of the text in the control. You can use linked text containers (a RichTextBlock linked to RichTextBlockOverflow elements) to create advanced page layouts.",
+ "Content": "Change the width of the app to see how the RichTextBlock overflows into additional columns as the app gets narrower.
Look at the RichTextBlockPage.xaml file in Visual Studio to see the full code for this page.
",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "RichTextBlock",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.richtextblock.aspx"
+ },
+ {
+ "Title": "Quickstart: Displaying text",
+ "Uri": "http://msdn.microsoft.com/en-us/library/windows/apps/hh700392.aspx"
+ }
+ ],
+ "RelatedControls": [
+ "TextBlock",
+ "TextBox",
+ "PasswordBox",
+ "RichEditBox",
+ "WebView"
+ ]
+ },
+ {
+ "UniqueId": "TextBlock",
+ "Title": "TextBlock",
+ "Subtitle": "A lightweight control for displaying small amounts of text.",
+ "ImagePath": "ms-appx:///Assets/TextBlock.png",
+ "Description": "TextBlock is the primary control for displaying read-only text in your app. You typically display text by setting the Text property to a simple string. You can also display a series of strings in Run elements and give each different formatting.",
+ "Content": "Look at the TextBlockPage.xaml file in Visual Studio to see the full code for this page.
",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "TextBlock",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.textblock.aspx"
+ },
+ {
+ "Title": "Quickstart: Displaying text",
+ "Uri": "http://msdn.microsoft.com/en-us/library/windows/apps/hh700392.aspx"
+ }
+ ],
+ "RelatedControls": [
+ "TextBox",
+ "RichTextBlock",
+ "PasswordBox",
+ "RichEditBox"
+ ]
+ },
+ {
+ "UniqueId": "TextBox",
+ "Title": "TextBox",
+ "Subtitle": "A single-line or multi-line plain text field.",
+ "ImagePath": "ms-appx:///Assets/TextBox.png",
+ "Description": "Use a TextBox to let a user enter simple text input in your app. You can add a header and placeholder text to let the user know what the TextBox is for, and you can customize it in other ways.",
+ "Content": "Look at the TextBoxPage.xaml file in Visual Studio to see the full code for this page.
",
+ "IsNew": false,
+ "Docs": [
+ {
+ "Title": "TextBox",
+ "Uri": "http://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.textbox.aspx"
+ },
+ {
+ "Title": "Quickstart: Adding text input and editing controls",
+ "Uri": "http://msdn.microsoft.com/en-us/library/windows/apps/hh700391.aspx"
+ }
+ ],
+ "RelatedControls": [
+ "TextBlock",
+ "RichTextBlock",
+ "PasswordBox",
+ "RichEditBox",
+ "AutoSuggestBox"
+ ]
}
- ]
+ ]
+ }
+ ]
}
\ No newline at end of file
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/DataModel/ControlInfoDataSource.cs b/Samples/XamlUIBasics/cs/AppUIBasics/DataModel/ControlInfoDataSource.cs
index 8ac2fd08fe..d2eaf60058 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/DataModel/ControlInfoDataSource.cs
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/DataModel/ControlInfoDataSource.cs
@@ -21,8 +21,8 @@
// model. The property names chosen coincide with data bindings in the standard item templates.
//
// Applications may use this model as a starting point and build on it, or discard it entirely and
-// replace it with something appropriate to their needs. If using this model, you might improve app
-// responsiveness by initiating the data loading task in the code behind for App.xaml when the app
+// replace it with something appropriate to their needs. If using this model, you might improve app
+// responsiveness by initiating the data loading task in the code behind for App.xaml when the app
// is first launched.
namespace AppUIBasics.Data
@@ -32,7 +32,7 @@ namespace AppUIBasics.Data
///
public class ControlInfoDataItem
{
- public ControlInfoDataItem(String uniqueId, String title, String subtitle, String imagePath, String description, String content)
+ public ControlInfoDataItem(String uniqueId, String title, String subtitle, String imagePath, String description, String content, bool isNew)
{
this.UniqueId = uniqueId;
this.Title = title;
@@ -40,6 +40,7 @@ public ControlInfoDataItem(String uniqueId, String title, String subtitle, Strin
this.Description = description;
this.ImagePath = imagePath;
this.Content = content;
+ this.IsNew = isNew;
this.Docs = new ObservableCollection();
this.RelatedControls = new ObservableCollection();
}
@@ -50,6 +51,7 @@ public ControlInfoDataItem(String uniqueId, String title, String subtitle, Strin
public string Description { get; private set; }
public string ImagePath { get; private set; }
public string Content { get; private set; }
+ public bool IsNew { get; private set; }
public ObservableCollection Docs { get; private set; }
public ObservableCollection RelatedControls { get; private set; }
@@ -101,8 +103,8 @@ public override string ToString()
///
/// Creates a collection of groups and items with content read from a static json file.
- ///
- /// ControlInfoSource initializes with data read from a static json file included in the
+ ///
+ /// ControlInfoSource initializes with data read from a static json file included in the
/// project. This provides sample data at both design-time and run-time.
///
public sealed class ControlInfoDataSource
@@ -141,6 +143,14 @@ public static async Task GetItemAsync(string uniqueId)
return null;
}
+ public static async Task GetGroupFromItemAsync(string uniqueId)
+ {
+ await _controlInfoDataSource.GetControlInfoDataAsync();
+ var matches = _controlInfoDataSource.Groups.Where((group) => group.Items.FirstOrDefault(item => item.UniqueId.Equals(uniqueId)) != null);
+ if (matches.Count() == 1) return matches.First();
+ return null;
+ }
+
private async Task GetControlInfoDataAsync()
{
lock (_lock)
@@ -177,7 +187,8 @@ private async Task GetControlInfoDataAsync()
itemObject["Subtitle"].GetString(),
itemObject["ImagePath"].GetString(),
itemObject["Description"].GetString(),
- itemObject["Content"].GetString());
+ itemObject["Content"].GetString(),
+ itemObject["IsNew"].GetBoolean());
if (itemObject.ContainsKey("Docs"))
{
foreach (JsonValue docValue in itemObject["Docs"].GetArray())
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ItemPage.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/ItemPage.xaml
index d7ca547735..7f1ec31ef0 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ItemPage.xaml
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ItemPage.xaml
@@ -9,129 +9,166 @@
//
//*********************************************************
-->
-
-
+
+
+
+
+
+
+
-
+
-
-
-
-
-
-
-
+
+
+
+
-
-
+
+
+
-
+
+
+
-
-
+
-
+
-
-
+
+
+
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
-
+
+
-
-
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/ItemPage.xaml.cs b/Samples/XamlUIBasics/cs/AppUIBasics/ItemPage.xaml.cs
index 85dc2c2868..a64d062cb6 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/ItemPage.xaml.cs
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/ItemPage.xaml.cs
@@ -8,14 +8,21 @@
//
//*********************************************************
using AppUIBasics.Common;
-using AppUIBasics.ControlPages;
using AppUIBasics.Data;
using System;
+using System.Collections.Generic;
+using System.Linq;
+using Windows.ApplicationModel.Core;
using Windows.Foundation;
+using Windows.System;
+using Windows.UI.Composition;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
+using Windows.UI.Xaml.Hosting;
using Windows.UI.Xaml.Input;
+using Windows.UI.Xaml.Media.Animation;
+using Windows.UI.Xaml.Media.Imaging;
using Windows.UI.Xaml.Navigation;
// The Item Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234232
@@ -28,10 +35,11 @@ namespace AppUIBasics
public partial class ItemPage : Page
{
private NavigationHelper navigationHelper;
+ Compositor _compositor;
private ControlInfoDataItem item;
///
- /// NavigationHelper is used on each page to aid in navigation and
+ /// NavigationHelper is used on each page to aid in navigation and
/// process lifetime management
///
public NavigationHelper NavigationHelper
@@ -45,16 +53,44 @@ public ControlInfoDataItem Item
set { item = value; }
}
- public CommandBar BottomCommandBar
- {
- get { return bottomCommandBar; }
- }
public ItemPage()
{
this.InitializeComponent();
this.navigationHelper = new NavigationHelper(this);
this.navigationHelper.LoadState += navigationHelper_LoadState;
+ _compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;
+ Loaded += ItemPage_Loaded;
+ CoreApplicationViewTitleBar coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
+ coreTitleBar.IsVisibleChanged += CoreTitleBar_IsVisibleChanged;
+ }
+
+ private void ItemPage_Loaded(object sender, RoutedEventArgs e)
+ {
+ SetInitialVisuals();
+ }
+
+ private void CoreTitleBar_IsVisibleChanged(CoreApplicationViewTitleBar sender, object args)
+ {
+ svPanel.Margin = NavigationRootPage.Current.DeviceFamily == DeviceType.Xbox ? new Thickness(0, 0, 48, 0) : new Thickness(0);
+ }
+
+ public void SetInitialVisuals()
+ {
+ NavigationRootPage.Current.PageHeader.TopCommandBar.Visibility = Visibility.Visible;
+ IEnumerable buttons = NavigationRootPage.Current.PageHeader.ThemeFlyout.Content.GetDescendantsOfType();
+ foreach (var button in buttons)
+ {
+ var selectedTheme = (this.RequestedTheme == ElementTheme.Default) ? App.Current.RequestedTheme.ToString() : this.RequestedTheme.ToString();
+ button.IsChecked = (button.Tag.ToString() == selectedTheme);
+ button.Checked += RadioButton_Checked;
+ }
+ NavigationRootPage.Current.PageHeader.IconUri = new BitmapImage(new Uri(item?.ImagePath, UriKind.RelativeOrAbsolute));
+ if (NavigationRootPage.Current.IsFocusSupported)
+ {
+ this.Focus(FocusState.Programmatic);
+ }
+ svPanel.Margin = NavigationRootPage.Current.DeviceFamily == DeviceType.Xbox ? new Thickness(0, 0, 48, 0) : new Thickness(0);
}
///
@@ -89,22 +125,19 @@ private async void navigationHelper_LoadState(object sender, LoadStateEventArgs
this.contentFrame.Navigate(pageType);
}
- if(item.Title == "AppBar")
+ NavigationRootPage.Current.NavigationView.Header = item?.Title;
+ if (item.IsNew && NavigationRootPage.Current.CheckNewControlSelected())
{
- //Child pages don't follow the visible bounds, so we need to add margin to account for this
- header.Margin = new Thickness(0, 24, 0, 0);
+ return;
}
- }
- }
- private void ThemeToggleButton_Checked(object sender, RoutedEventArgs e)
- {
- this.RequestedTheme = ElementTheme.Light;
- }
-
- private void ThemeToggleButton_Unchecked(object sender, RoutedEventArgs e)
- {
- this.RequestedTheme = ElementTheme.Dark;
+ ControlInfoDataGroup group = await ControlInfoDataSource.GetGroupFromItemAsync((String)e.NavigationParameter);
+ var menuItem = ((NavigationMenuItem)NavigationRootPage.Current.NavigationView.MenuItems.FirstOrDefault(m => m.Tag?.ToString() == group.UniqueId));
+ if (menuItem != null)
+ {
+ menuItem.IsSelected = true;
+ }
+ }
}
protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
@@ -118,39 +151,11 @@ private void SearchButton_Click(object sender, RoutedEventArgs e)
this.Frame.Navigate(typeof(SearchResultsPage));
}
- private void HelpButton_Click(object sender, RoutedEventArgs e)
- {
- ShowHelp();
- bottomCommandBar.IsOpen = false;
- }
-
- private void AppBarButton_GotFocus(object sender, RoutedEventArgs e)
- {
- // The default gamepad navigation is awkward in this app due to the way the app lays
- // out its pages. It is common for users to overshoot when navigating with the gamepad.
- // If users press Down too many times, they end up on the command bar buttons in
- // the bottom right corner of the page. Pressing Up doesn't return focus anywhere
- // close to where it came from because pressing Up puts focus on the search box
- // because that's the next control in the upward direction.
- //
- // Ideally, we would revise the page layout so that there is a clear next control
- // in each direction. Here, we programmatically set the XYFocusUp property
- // to the control that is closest to the command bar, which is usually the
- // bottom-most control in the content frame.
-
- var transform = bottomCommandBar.TransformToVisual(null);
- // Calculate the rectangle that describes the top edge of the bottom command bar.
- var rect = new Rect(0, 0, bottomCommandBar.ActualWidth, 0);
- rect = transform.TransformBounds(rect);
- var destinationElement = FocusManager.FindNextFocusableElement(FocusNavigationDirection.Up, rect);
- searchButton.XYFocusUp = destinationElement;
- }
-
protected void RelatedControl_Click(object sender, RoutedEventArgs e)
{
ButtonBase b = (ButtonBase)sender;
- NavigationRootPage.RootFrame.Navigate(typeof(ItemPage), b.Content.ToString());
+ NavigationRootPage.RootFrame.Navigate(typeof(ItemPage), b.DataContext.ToString());
}
private void ShowHelp()
@@ -159,47 +164,137 @@ private void ShowHelp()
string HTMLOpenTags = loader.GetString("HTMLOpenTags");
string HTMLCloseTags = loader.GetString("HTMLCloseTags");
-
- contentWebView.NavigateToString(HTMLOpenTags + Item.Content + HTMLCloseTags);
- if (!helpPopup.IsOpen)
- {
- rootPopupBorder.Width = 346;
- rootPopupBorder.Height = this.ActualHeight;
- helpPopup.HorizontalOffset = Window.Current.Bounds.Width - 346;
- helpPopup.IsOpen = true;
- }
}
-
private void SearchBox_QuerySubmitted(SearchBox sender, SearchBoxQuerySubmittedEventArgs args)
{
-
this.Frame.Navigate(typeof(SearchResultsPage), args.QueryText);
-
}
#region NavigationHelper registration
/// The methods provided in this section are simply used to allow
/// NavigationHelper to respond to the page's navigation methods.
- ///
- /// Page specific logic should be placed in event handlers for the
+ ///
+ /// Page specific logic should be placed in event handlers for the
/// ().FirstOrDefault();
+ if (connectedAnimation != null)
+ {
+ connectedAnimation.TryStart(relativePanel, new UIElement[] { subTitleText });
+ }
+ }
navigationHelper.OnNavigatedTo(e);
}
+
+ private void RadioButton_Checked(object sender, RoutedEventArgs e)
+ {
+ this.RequestedTheme = (ElementTheme)((RadioButton)(sender)).Tag;
+ }
+
protected override void OnNavigatedFrom(NavigationEventArgs e)
{
+ NavigationRootPage.Current.PageHeader.TopCommandBar.Visibility = Visibility.Collapsed;
+ IEnumerable buttons = NavigationRootPage.Current.PageHeader.TopCommandBar.GetDescendantsOfType();
+ foreach (var button in buttons)
+ {
+ button.Checked -= RadioButton_Checked;
+ }
+ NavigationRootPage.Current.PageHeader.IconUri = null;
+ //Reverse Connected Animation
+ if (e.SourcePageType == typeof(MainPage) || e.SourcePageType == typeof(NewControlsPage))
+ {
+ RelativePanel relativePanel = NavigationRootPage.Current.PageHeader.Content.GetDescendantsOfType().FirstOrDefault();
+ ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("controlAnimation", relativePanel);
+ }
navigationHelper.OnNavigatedFrom(e);
}
#endregion
+
+ private void svPanel_Loaded(object sender, RoutedEventArgs e)
+ {
+ svPanel.XYFocusDown = contentFrame.GetDescendantsOfType().FirstOrDefault(c => c.IsTabStop) ?? svPanel.GetDescendantsOfType().FirstOrDefault(c => c.IsTabStop);
+ }
+
+ private void List_Loaded(object sender, RoutedEventArgs e)
+ {
+ ListView listview = sender as ListView;
+ ListViewItem item = (ListViewItem)listview.ContainerFromItem(listview.Items.LastOrDefault());
+ if (item != null)
+ item.XYFocusDown = item;
+ }
+
+ private async void DocsList_ItemClick(object sender, ItemClickEventArgs e)
+ {
+ await Launcher.LaunchUriAsync(new Uri(((ControlInfoDocLink)e.ClickedItem).Uri));
+ }
+
+ private void ListView_ItemClick(object sender, ItemClickEventArgs e)
+ {
+ NavigationRootPage.RootFrame.Navigate(typeof(ItemPage), e.ClickedItem?.ToString());
+ }
+
+ private void svPanel_GotFocus(object sender, RoutedEventArgs e)
+ {
+ if (e.OriginalSource == sender && NavigationRootPage.Current.IsFocusSupported)
+ {
+ bool isElementFound = false;
+ var elements = contentFrame.GetDescendantsOfType().Where(c => c.IsTabStop);
+ foreach (var element in elements)
+ {
+ Rect elementRect = element.TransformToVisual(svPanel).TransformBounds(new Rect(0.0, 0.0, element.ActualWidth, element.ActualHeight));
+ Rect panelRect = new Rect(0.0, 70.0, svPanel.ActualWidth, svPanel.ActualHeight);
+
+ if (elementRect.Top < panelRect.Bottom)
+ {
+ element.Focus(FocusState.Programmatic);
+ isElementFound = true;
+ break;
+ }
+ }
+ if (!isElementFound)
+ {
+ svPanel.UseSystemFocusVisuals = true;
+ }
+ }
+ }
+
+ private void svPanel_KeyDown(object sender, KeyRoutedEventArgs e)
+ {
+ if (e.Key == VirtualKey.Up)
+ {
+ var nextElement = FocusManager.FindNextElement(FocusNavigationDirection.Up);
+ if (nextElement.GetType() == typeof(NavigationMenuItem))
+ {
+ NavigationRootPage.Current.PageHeader.Focus(FocusState.Programmatic);
+ }
+ else
+ {
+ FocusManager.TryMoveFocus(FocusNavigationDirection.Up);
+ }
+ }
+
+ }
}
}
\ No newline at end of file
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/MainPage.xaml b/Samples/XamlUIBasics/cs/AppUIBasics/MainPage.xaml
index 8ad93c6e85..b659d8d76e 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/MainPage.xaml
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/MainPage.xaml
@@ -9,180 +9,113 @@
//
//*********************************************************
-->
-
-
+
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
-
-
-
+
+
-
-
-
-
-
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- This app is a companion to the
- Windows Store app UI, start to finish topic on the
- Windows Dev Center . It demonstrates basic usage of various controls in isolation, but it also demonstrates real use of the controls and layout techniques in the app itself. To get the most out of it, browse the full code in Visual Studio and see how the app works. Each control page has a help pane where we'll point out where you can look in the app to see the feature in use.
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
-
-
-
+
-
-
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/MainPage.xaml.cs b/Samples/XamlUIBasics/cs/AppUIBasics/MainPage.xaml.cs
index bdf4bb60ae..1781111525 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/MainPage.xaml.cs
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/MainPage.xaml.cs
@@ -11,15 +11,14 @@
using AppUIBasics.Data;
using System;
using System.Collections.Generic;
+using System.ComponentModel;
using System.Linq;
-using Windows.Foundation;
-using Windows.Foundation.Metadata;
-using Windows.System;
+using System.Runtime.CompilerServices;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Input;
+using Windows.UI.Xaml.Media.Animation;
using Windows.UI.Xaml.Navigation;
-using System.ComponentModel;
-using System.Runtime.CompilerServices;
// The Hub Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=??????
@@ -33,9 +32,9 @@ public sealed partial class MainPage : Page, INotifyPropertyChanged
private NavigationHelper navigationHelper;
private IEnumerable _groups;
private List _items;
-
+ private string itemId;
///
- /// NavigationHelper is used on each page to aid in navigation and
+ /// NavigationHelper is used on each page to aid in navigation and
/// process lifetime management
///
public NavigationHelper NavigationHelper
@@ -73,9 +72,8 @@ public MainPage()
this.navigationHelper.LoadState += navigationHelper_LoadState;
this.DataContext = this; //We have to set the DataContext to itself here to ensure the bindings get hooked up correctly in the Hub.
}
-
///
- /// Handler for after the groups load. Since NavigationRootPage and MainPage get constructed at very similar times, there's a
+ /// Handler for after the groups load. Since NavigationRootPage and MainPage get constructed at very similar times, there's a
/// possibility of a race condition, so we only get the groups on the NavigationRootPage and listen for it to finish on the MainPage.
///
/// The NavigationRootPage that has loaded the groups.
@@ -113,6 +111,7 @@ private void RootPage_GroupsLoaded(object sender, EventArgs e)
/// session. The state will be null the first time a page is visited.
private void navigationHelper_LoadState(object sender, LoadStateEventArgs e)
{
+ NavigationRootPage.Current.NavigationView.Header = "All controls";
}
///
@@ -135,12 +134,14 @@ void Hub_SectionHeaderClick(object sender, HubSectionHeaderClickEventArgs e)
/// Event data that describes the item clicked.
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 = ((ControlInfoDataItem)e.ClickedItem).UniqueId;
+ itemId = ((ControlInfoDataItem)e.ClickedItem).UniqueId;
+ var container = itemGridView.ContainerFromItem(e.ClickedItem) as GridViewItem;
+ if (container != null)
+ {
+ itemGridView.PrepareConnectedAnimation("controlAnimation", (ControlInfoDataItem)e.ClickedItem, "controlRoot");
+ }
this.Frame.Navigate(typeof(ItemPage), itemId);
}
-
void GroupView_ItemClick(object sender, ItemClickEventArgs e)
{
// Navigate to the appropriate destination page, configuring the new page
@@ -158,20 +159,27 @@ private void SearchButton_Click(object sender, RoutedEventArgs e)
/// The methods provided in this section are simply used to allow
/// NavigationHelper to respond to the page's navigation methods.
- ///
- /// Page specific logic should be placed in event handlers for the
+ ///
+ /// Page specific logic should be placed in event handlers for the
///
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/Samples/XamlUIBasics/cs/AppUIBasics/Navigation/NavigationRootPage.xaml.cs b/Samples/XamlUIBasics/cs/AppUIBasics/Navigation/NavigationRootPage.xaml.cs
index 70cbc92a65..03faed9ba9 100644
--- a/Samples/XamlUIBasics/cs/AppUIBasics/Navigation/NavigationRootPage.xaml.cs
+++ b/Samples/XamlUIBasics/cs/AppUIBasics/Navigation/NavigationRootPage.xaml.cs
@@ -12,19 +12,18 @@
using System;
using System.Collections.Generic;
using System.Diagnostics;
-using System.IO;
using System.Linq;
-using System.Runtime.InteropServices.WindowsRuntime;
-using Windows.Foundation;
-using Windows.Foundation.Collections;
+using Windows.ApplicationModel.Core;
+using Windows.Devices.Input;
using Windows.Foundation.Metadata;
+using Windows.Gaming.Input;
+using Windows.UI;
+using Windows.UI.Core;
+using Windows.UI.ViewManagement;
using Windows.UI.Xaml;
+using Windows.UI.Xaml.Automation;
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 Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
@@ -37,22 +36,63 @@ public sealed partial class NavigationRootPage : Page
{
public static NavigationRootPage Current;
public static Frame RootFrame = null;
+ private PageHeader header;
+ private bool allnewControlsPage = false;
+ private bool isGamePadConnected;
+ private bool isKeyboardConnected;
- private IEnumerable _groups;
- public IEnumerable Groups
+ private IList _groups;
+ public IList Groups
{
get { return _groups; }
}
- public event EventHandler GroupsLoaded;
+ public string CurrentGroupTitle
+ {
+ get
+ {
+ return Groups.First().Title;
+ }
+ }
+
+ public NavigationView NavigationView
+ {
+ get
+ {
+ return NavigationViewControl;
+ }
+ }
- public static SplitView RootSplitView
+
+ public DeviceType DeviceFamily
{
- get { return Current.rootSplitView; }
+ get; set;
+
}
+ public bool IsFocusSupported
+ {
+ get
+ {
+ return DeviceFamily == DeviceType.Xbox || isGamePadConnected || isKeyboardConnected;
+ }
+ }
+
+ public PageHeader PageHeader
+ {
+ get
+ {
+ return header ?? (header = UIHelper.GetDescendantsOfType(NavigationViewControl).FirstOrDefault());
+ }
+ }
+
+ public event EventHandler GroupsLoaded;
+
private RootFrameNavigationHelper rootFrameNavigationHelper;
+ private NavigationMenuItem AllControlsMenuItem;
+ public NavigationMenuItem NewControlsMenuItem;
+
public NavigationRootPage()
{
this.InitializeComponent();
@@ -61,6 +101,8 @@ public NavigationRootPage()
Current = this;
RootFrame = rootFrame;
+ this.KeyDown += NavigationRootPage_KeyDown;
+ this.SizeChanged += NavigationRootPage_SizeChanged;
this.GotFocus += (object sender, RoutedEventArgs e) =>
{
// helpful for debugging focus problems w/ keyboard & gamepad
@@ -68,39 +110,239 @@ public NavigationRootPage()
if (focus != null)
Debug.WriteLine("got focus: " + focus.Name + " (" + focus.GetType().ToString() + ")");
};
+ this.Loaded += (sender, args) =>
+ {
+ NavigationViewControl.GetDescendantsOfType