Merge pull request #274 from MicrosoftDocs/mhawker/live-update-6.0

Update docs from master for 6.0.0 Release

Author: michael-hawker

README.md

@@ -5,10 +5,17 @@ The Windows Community Toolkit is a collection of helper functions, custom contro
 ## Contributing
 Do you want to contribute or update the docs? Read the [contribution guidelines](CONTRIBUTING.md)
 
+When opening a PR, start by forking this repository. Then, based on the type of change you're making you'll need to create a new branch from either the `master` or `live` branches:
+
+:new::books: For documentation for new features, please base your fork off the master branch.
+
+:exclamation: If you have a typo or existing document improvement to an already shipped feature, please base your change off of the [live branch](https://github.com/MicrosoftDocs/WindowsCommunityToolkitDocs/tree/live).  This will allow us to get the change to the published documentation between releases.
+
+We will periodically merge updates from the live branch to master to keep master in-sync with the published docs.  When we make a new release, we will push master to the live branch in order to publish documentation for new features.
 
 ## Documentation Links
-- [Staging review](https://review.docs.microsoft.com/en-us/windows/uwpcommunitytoolkit/?branch=master)
-- [Live site](https://docs.microsoft.com/en-us/windows/uwpcommunitytoolkit)
+- [Staging review from 'master' branch](https://review.docs.microsoft.com/en-us/windows/uwpcommunitytoolkit/?branch=master)
+- [Live site from 'live' branch](https://docs.microsoft.com/en-us/windows/uwpcommunitytoolkit)
 
 ## Microsoft Open Source Code of Conduct
 This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).

docs/.template.md

@@ -12,6 +12,7 @@ dev_langs:
 <!-- It is recommended to check how the Documentation will look in the sample app, before Merging a PR -->
 
 # Title
+
 <!-- Describe your control -->
 The [Control Name](API-Link) ...
 <!-- You can get your API link from https://docs.microsoft.com/dotnet/api/?term=Microsoft.Toolkit. Make sure you remove the "?view=uwp-toolkit-x.x.x" from the end and country/region specific keyword like "en-us" of the URL eg: https://docs.microsoft.com/dotnet/api/microsoft.toolkit.uwp.helpers.printhelper -->
@@ -27,6 +28,9 @@ The [Control Name](API-Link) ...
 > Some warning note
 -->
 
+> [!div class="nextstepaction"]
+> [Try it in the sample app](uwpct://categoryName?sample=pageName)
+
 ## Syntax
 
 ```csharp
@@ -85,10 +89,10 @@ The [Control Name](API-Link) ...
 <!-- Use <example> and <code> tags in C# to create a Propertie/method specific examples. For more info - https://docs.microsoft.com/dotnet/csharp/programming-guide/xmldoc/example -->
 <!-- Optional: Codes to achieve real-world use case with the output. For eg: Check https://docs.microsoft.com/windows/communitytoolkit/animations/animationset#examples  -->
 
-## Sample Code
+## Sample Project
 
 <!-- Link to the sample page in the Windows Community Toolkit Sample App -->
-[control/helper name sample page Source](sample-page-link). You can see this in action in [Windows Community Toolkit Sample App](https://www.microsoft.com/store/apps/9NBLGGH4TLCQ).
+[control/helper name sample page Source](sample-page-link). You can [see this in action](uwpct://CategoryName?sample=pageName) in [Windows Community Toolkit Sample App](http://aka.ms/uwptoolkitapp).
 
 ## Requirements
 
@@ -115,13 +119,13 @@ The [Control Name](API-Link) ...
 [Microsoft.Toolkit.Uwp.DeveloperTools](https://www.nuget.org/packages/Microsoft.Toolkit.Uwp.DeveloperTools/)
  -->
 
-## API Source Code
+## API
 
-- [control/helper name source code](source-code-link)
+* [control/helper name source code](source-code-link)
 
 ## Related Topics
 
 <!-- Optional -->
 
-- [Topic 1](link)
-- [Topic 2](link)
+* [Topic 1](link)
+* [Topic 2](link)

docs/animations/AnimationSet.md

@@ -182,7 +182,6 @@ You can change the way how the animation interpolates between keyframes by defin
 
 ## Related
 
-- [ ClAnimationSetCompletedEventArgsass](hTopicsttps://docs.microsoft.com/dotnet/api/microsoft.toolkit.uwp.ui.animations.animationsetcompletedeventargs)
+- [AnimationSetCompletedEventArgs](https://docs.microsoft.com/dotnet/api/microsoft.toolkit.uwp.ui.animations.animationsetcompletedeventargs)
 
-- [ Class](https://docs.microsoft.com/dotnet/api/microsoft.toolkit.uwp.ui.animations.animationextensions)
-AnimationExtensions
+- [AnimationExtensions](https://docs.microsoft.com/dotnet/api/microsoft.toolkit.uwp.ui.animations.animationextensions)

docs/animations/Blur.md

@@ -12,6 +12,9 @@ dev_langs:
 
 The [Blur animation](https://docs.microsoft.com/dotnet/api/microsoft.toolkit.uwp.ui.animations.animationextensions.blur) blurs a XAML element by increasing or decreasing pixel size. Blur animation is applied to all the XAML elements in its parent control/panel. Blur animation doesn't affect the functionality of the control.
 
+> [!div class="nextstepaction"]
+> [Try it in the sample app](uwpct://Animations?sample=Blur)
+
 ## Syntax
 
 ```xaml
@@ -105,7 +108,7 @@ Await MyUIElement.Blur(value:=5, duration:=2500, delay:=250).StartAsync()    ' B
 
 ## Sample Project
 
-[Blur Behavior Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Blur). You can see this in action in [Windows Community Toolkit Sample App](https://www.microsoft.com/store/apps/9NBLGGH4TLCQ)
+[Blur Behavior Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Blur). You can [see this in action](uwpct://Animations?sample=Blur) in the [Windows Community Toolkit Sample App](http://aka.ms/uwptoolkitapp).
 
 ## Requirements
 
@@ -120,5 +123,5 @@ Await MyUIElement.Blur(value:=5, duration:=2500, delay:=250).StartAsync()    ' B
 
 ## Related Topics
 
-- [AnimationSet Class](https://docs.microsoft.com/windows/communitytoolkit/animations/animationset)
-- [CompositionEffectBrush Class](https://docs.microsoft.com/uwp/api/Windows.UI.Composition.CompositionEffectBrush)
+* [AnimationSet Class](https://docs.microsoft.com/windows/communitytoolkit/animations/animationset)
+* [CompositionEffectBrush Class](https://docs.microsoft.com/uwp/api/Windows.UI.Composition.CompositionEffectBrush)

docs/animations/ConnectedAnimations.md

@@ -3,6 +3,9 @@ title: Connected Animations XAML Attached Properties
 author: nmetulev
 description: The Connected Animation XAML Attached Properties enable connected animations to be defined in your XAML code
 keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, connected animations, animation, coordinated animations
+dev_langs:
+  - csharp
+  - vb
 ---
 
 # Connected Animations XAML Attached Properties
@@ -11,11 +14,14 @@ keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp
 
 The Connected Animations XAML Attached Properties enable connected animations to be defined directly in your XAML code by simply adding a Key to the element that should animate. There are also attached properties to enable coordinated animations and animations in lists and grids.
 
+> [!div class="nextstepaction"]
+> [Try it in the sample app](uwpct://Animations?sample=Connected%20Animations)
+
 ## Syntax
 
 ```xaml
 <Page ...
-    xmlns:animations="using:Microsoft.Toolkit.Uwp.UI.Animations"/>
+    xmlns:animations="using:Microsoft.Toolkit.Uwp.UI.Animations">
 
 <Border x:Name="Element" animations:Connected.Key="item"></Border>
 
@@ -29,6 +35,7 @@ The Connected Animations XAML Attached Properties enable connected animations to
         </DataTemplate>
     </GridView.ItemTemplate>
 </GridView>
+</Page>
 ```
 
 ## Sample Output
@@ -38,40 +45,51 @@ The Connected Animations XAML Attached Properties enable connected animations to
 ## XAML Attached Properties
 
 ### Connected.Key
+
 Registers element with the [ConnectedAnimationsService](https://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.media.animation.connectedanimation.aspx). For the animation to work, the same key must be registered on two different pages when navigating
 
 ### Connected.AnchorElement
+
 To enable [coordinated animations](https://docs.microsoft.com/windows/uwp/style/connected-animation#coordinated-animation), use the AnchorElement attached property on the element that should appear alongside the connected animation element by specifying the connected animation element
 
 ### Connected.ListItemKey
+
 Registers a ListView/GridView for connected animations. When navigating from/to a page that is using this property, the connected animation will use the item passed as a **parameter** in the page navigation to select the item in the list that should animated. See *Select List Item to be animated* section below for more details. The *Connected.ListItemElementName* attached property must also be set for the animation to be registered
 
 ### Connected.ListItemElementName
+
 Specifies what named element in the DataTemplate of an item should animate. The Connected.ListItemKey attached property must also be set for the animation to be registered.
 
 ## Registering elements in code behind
 
 In cases where an element has not loaded before the navigation completes, the attached properties are not able to access the element properties to register it for the connected animation. In those case, you can register the element through code behind inside the OnNavigatedTo method. The following extension methods are available:
 
 ### RegisterElementForConnectedAnimation(this Page page, string key, UIElement element, IEnumerable<UIElement> anchors = null)
+
 Registers a UIElement with the ConnectedAnimations service to run automatically on page navigation
 
 ### UnregisterElementForConnectedAnimation(this Page page, string key)
+
 Unregisters a UIElement from the ConnectedAnimations service
 
 ### AttachAnchorElementForConnectedAnimation(this Page page, UIElement element, UIElement anchor)
+
 Add an anchor element to animate alongside the main element
 
 ### RemoveAnchoredElementForConnectedAnimation(this Page page, UIElement element, UIElement anchor)
+
 Remove an anchor element from animating alongside the main element
 
 ### RegisterListItemForConnectedAnimation(this Page page, ListViewBase listViewBase, string key, string elementName)
+
 Registers an element (part of a DataTemplate in a list control) with the ConnectedAnimations service to run automatically on page navigation
 
 ### UnregisterListItemForConnectedAnimation(this Page page, ListViewBase listViewBase, string key)
+
 Unregisters an element (part of a DataTemplate in a list control) from the ConnectedAnimations service
 
 ## Select List Item to be animated
+
 The helper uses the page navigation parameter to decide which list item will be animated during the page navigation. However, in some cases the parameter passed during page navigation is not part of the list. For example, you might be only passing the id of an item as a navigation parameter and not the item itself.
 
 In those cases, you can use the **SetListDataItemForNextConnectedAnnimation** extension method before page navigation to specify which item should be animated.
@@ -81,13 +99,22 @@ In those cases, you can use the **SetListDataItemForNextConnectedAnnimation** ex
     Frame.SetListDataItemForNextConnectedAnnimation(dataItemToAnimate);
     Frame.Navigate(typeof(DetailsPage), dataItemToAnimate.Id);
 ```
+```vb
+    ' dataItemToAnimate is an object in the ListViewBase.ItemsSource collection
+    Frame.SetListDataItemForNextConnectedAnnimation(dataItemToAnimate)
+    Frame.Navigate(GetType(DetailsPage), dataItemToAnimate.Id)
+```
 
-This method is also helpful when navigating back to an item different from the item it was navigated from. 
+This method is also helpful when navigating back to an item different from the item it was navigated from.
 
 ```csharp
     Frame.SetListDataItemForNextConnectedAnnimation(dataItemToAnimate);
     Frame.GoBack();
 ```
+```vb
+    Frame.SetListDataItemForNextConnectedAnnimation(dataItemToAnimate)
+    Frame.GoBack()
+```
 
 ## Examples
 
@@ -99,14 +126,14 @@ We need a set a key for the element to be connected with another element in a di
 
 ```xaml
 <Grid>
-    <Border Height="100" Width="100" Background="Purple" 
-        VerticalAlignment="Center" HorizontalAlignment="Center" 
-        animations:Connected.Key="item"/>
+    <Border Height="100" Width="100" Background="Purple"
+        VerticalAlignment="Center" HorizontalAlignment="Center"
+        animations:Connected.Key="item" />
 </Grid>
 ```
 
 **In second page**
- 
+
 We need to set the same key for the element to be connected with. Also, You can anchor another element to move along the connected animation path.
 
 ```xaml
@@ -163,9 +190,9 @@ In this page, you just need to give the same key.
 </StackPanel>
 ```
 
-## Sample Code
+## Sample Project
 
-[Connected Animations sample page source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Connected%20Animations). You can see this in action in [Windows Community Toolkit Sample App](https://www.microsoft.com/store/apps/9NBLGGH4TLCQ).
+[Connected Animations sample page source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Connected%20Animations). You can [see this in action](uwpct://Animations?sample=Connected%20Animations) in the [Windows Community Toolkit Sample App](http://aka.ms/uwptoolkitapp).
 
 ## Requirements
 
@@ -180,4 +207,4 @@ In this page, you just need to give the same key.
 
 ## Related Topics
 
-- [ConnectedAnimationService Class](https://docs.microsoft.com/uwp/api/Windows.UI.Xaml.Media.Animation.ConnectedAnimationService)
+* [ConnectedAnimationService Class](https://docs.microsoft.com/uwp/api/Windows.UI.Xaml.Media.Animation.ConnectedAnimationService)

docs/animations/Fade.md

@@ -12,6 +12,9 @@ dev_langs:
 
 The [Fade animation](https://docs.microsoft.com/dotnet/api/microsoft.toolkit.uwp.ui.animations.animationextensions.fade) fades objects, in and out, over time. Fade animation is applied to all the XAML elements in its parent control/panel. Fade animation doesn't affect the functionality of the control.
 
+> [!div class="nextstepaction"]
+> [Try it in the sample app](uwpct://Animations?sample=Fade)
+
 ## Syntax
 
 ```xaml
@@ -103,8 +106,7 @@ You can change the way how the animation interpolates between keyframes by defin
 
 ## Sample Project
 
-[Fade Behavior Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Fade). You can see this in action in [Windows Community Toolkit Sample App](https://www.microsoft.com/store/apps/9NBLGGH4TLCQ).
-
+[Fade Behavior Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Fade). You can [see this in action](uwpct://Animations?sample=Fade) in the [Windows Community Toolkit Sample App](http://aka.ms/uwptoolkitapp).
 
 ## Requirements
 
@@ -119,5 +121,5 @@ You can change the way how the animation interpolates between keyframes by defin
 
 ## Related Topics
 
-- [AnimationSet Class](https://docs.microsoft.com/windows/communitytoolkit/animations/animationset)
-- [Storyboard Class](https://docs.microsoft.com/uwp/api/Windows.UI.Xaml.Media.Animation.Storyboard)
+* [AnimationSet Class](https://docs.microsoft.com/windows/communitytoolkit/animations/animationset)
+* [Storyboard Class](https://docs.microsoft.com/uwp/api/Windows.UI.Xaml.Media.Animation.Storyboard)

docs/animations/FadeHeader.md

@@ -12,6 +12,9 @@ dev_langs:
 
 The [FadeHeader](https://docs.microsoft.com/dotnet/api/microsoft.toolkit.uwp.ui.animations.behaviors.fadeheaderbehavior) fades a ListView or GridView Header UIElement when the user scrolls. The UIElement fades out to 0 opacity when the edge of the Header reaches the edge of the visible bounds of the ListElement.
 
+> [!div class="nextstepaction"]
+> [Try it in the sample app](uwpct://Animations?sample=FadeHeader)
+
 ## Syntax
 
 ***Implicit usage***: Automatically detects the Header element by finding the ListViewBase (note: GridView uses ListViewBase)
@@ -80,7 +83,7 @@ Microsoft.Xaml.Interactivity.Interaction.GetBehaviors(MyListView).Add(New FadeHe
 
 ## Sample Project
 
-[FadeHeader Behavior Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/FadeHeader). You can see this in action in [Windows Community Toolkit Sample App](https://www.microsoft.com/store/apps/9NBLGGH4TLCQ).
+[FadeHeader Behavior Sample Page Source](https://github.com/Microsoft/WindowsCommunityToolkit//tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/FadeHeader). You can [see this in action](uwpct://Animations?sample=FadeHeader) in the [Windows Community Toolkit Sample App](http://aka.ms/uwptoolkitapp).
 
 ## Requirements
 
@@ -95,4 +98,4 @@ Microsoft.Xaml.Interactivity.Interaction.GetBehaviors(MyListView).Add(New FadeHe
 
 ## Related Topics
 
-- [ListViewBase Header](https://docs.microsoft.com/uwp/api/windows.ui.xaml.controls.listviewbase#Windows_UI_Xaml_Controls_ListViewBase_Header)
+* [ListViewBase Header](https://docs.microsoft.com/uwp/api/windows.ui.xaml.controls.listviewbase#Windows_UI_Xaml_Controls_ListViewBase_Header)