Merge pull request #423 from Microsoft/docpubmaster

DOCS directory for master

Author: deltakosh

docs/Getting-Started.md

@@ -0,0 +1,44 @@
+# Getting Started with the UWP Community Toolkit
+
+The toolkit is available as NuGet packages that can be added to any existing or new project using Visual Studio.
+
+- 1)	Download [Visual Studio 2015 Update 3 with Windows developer tools](https://developer.microsoft.com/en-us/windows/downloads) and the Windows 10 SDK.  **Important**: Ensure you choose the custom install option and select the *Universal Windows App Development Tools*.  
+
+- 2)	Open an existing project, or create a new project using the Blank App template under Visual C# -> Windows -> Universal.  **Important**:  Build 10586 or higher is supported by current version of the Toolkit.   
+
+- 3)	In Solution Explorer panel, right click on your project name and select **Manage NuGet Packages**. Search for **Microsoft.Toolkit.UWP**, and choose your desired [NuGet Packages](Nuget-Packages.md) from the list.
+
+![NuGet Packages](resources/images/ManageNugetPackages.png "Manage NuGet Packages Image")
+
+- 4)	Add a reference to the toolkit in your XAML pages or C#
+
+
+- a.	In your XAML page, add a reference at the top of your page
+
+```csharp
+
+    xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
+
+```
+
+- b.	In your C# page, add the namespaces to the toolkit
+
+```csharp
+
+    using Microsoft.Toolkit.Uwp;
+
+```
+
+
+- 5)	You can copy and paste code snippets for each feature from the [UWP Community Toolkit Sample App](http://aka.ms/uwptoolkitapp). 
+
+## Other Resources 
+
+Adding the [UI controls to the Visual Studio Toolbox](Toolbox-Support.md) explains deeper integration with Visual Studio. 
+
+Download the [UWP Community Toolkit Sample App](http://aka.ms/uwptoolkitapp) from the Windows store to see the controls in an actual app.
+
+We recommend developers new to UWP visit the [Getting Started with UWP Development](https://developer.microsoft.com/en-us/windows/getstarted) pages on the Developer portal. 
+
+Visit the [UWP Community Toolkit Github Repository](http://aka.ms/uwptoolkit) to see the current source code, what is coming next, and to clone the repository.  Community contributions are welcome!
+

docs/Nuget-Packages.md

@@ -0,0 +1,32 @@
+# UWP Community Toolkit Nuget Packages
+
+NuGet is a standard package manager for .Net applications that is built into Visual Studio. From your open solution choose the *Tools* menu, *NuGet Package Manger*, *Mange NuGet packages for solution...* to open the UI.  Enter one of the package names below to search for it online.
+
+| Link | Description |
+| --- | --- |
+| Microsoft.Toolkit.Uwp | Main NuGet package includes code only helpers for Colors, Internet Connection detection, Storage file handling, and a Stream helper class. |
+| Microsoft.Toolkit.Uwp.Notifications | Notifications Package - Generate tile, toast, and badge notifications for Windows 10 via code.  Includes intellisense support to avoid having to use the XML syntax. |
+| Microsoft.Toolkit.Uwp.Notifications.Javascript | Notification Packages for JavaScript |
+| Microsoft.Toolkit.Uwp.Services | Services Package - This NuGet package includes the service helpers for Bing, Facebook, and Twitter. |
+| Microsoft.Toolkit.Uwp.UI | UI Packages - XAML converters, Visual tree extensions and helpers for your XAML UI. |
+| Microsoft.Toolkit.Uwp.UI.Animations | Animations and Composition behaviors such as Blur, Fade, Rotate, etc. |
+| Microsoft.Toolkit.Uwp.UI.Controls | XAML Controls such as RadialGauge, RangeSelector, etc. | 
+
+
+## Search in Visual Studio
+
+Searching in Visual Studio package manager you should see a list similar to the one below (version numbers may be different, but names should be the same).
+
+![NuGet packages](resources/images/NugetPackages.png "Nuget Packages")
+
+### Getting Started
+
+Read the [getting Started with the UWP Community Toolkit](getting-started.md) for more instructions on using these NuGet Packages in your own projects. 
+
+### Windows 10 Store App
+
+Want to see the controls and animations in action before jumping into the code?  We have published the [UWP Community Toolkit Sample App](http://aka.ms/uwptoolkitapp) to the Windows 10 store.  Download the app and play with the controls live to see what they do before ever writing a line of code.
+
+### GitHub Repository
+
+Visit the [UWP Community Toolkit Github Repository](http://aka.ms/uwptoolkit) to see the current source code, what is coming next, and to clone the repository.  Community contributions are welcome!

docs/Toolbox-Support.md

@@ -0,0 +1,22 @@
+# Adding the UWP Community Toolkit to your Visual Studio Toolbox
+
+Add the UWP Community Toolkit controls into the Visual Studio toolbox by following these steps:
+
+1) Add the *Microsoft.Toolkit.Uwp.UI.Controls* NuGet package to your application. 
+
+2) Open any XAML page and select the Toolbox on the left side of Visual Studio.
+
+3) Right click in a blank area and select *Add Tab*.  Name the tab *UWP Community Toolkit Controls*.
+
+4) Right click in the tab you just created and select *Choose Items...*.  Then select *Browse* from the *Choose Toolbox Items* dialog and navigate to the folder on your machine:
+
+    c:\Users\%USERNAME%\.nuget\packages\Microsoft.Toolkit.Uwp.UI.Controls\
+
+a.  Choose the folder name matching the version you have installed, then continue to the *lib\uap10.0* folder and select the *Microsoft.Toolkit.Uwp.UI.Controls.dll* file.  You should end up with a dialog similar to the one shown below.
+
+![UI Toolbox Items](resources/images/choosetoolboxitems.png "Choose Toolbox Image")
+
+5) Your toolbox should now have a list of UI Controls from the toolkit that you can drag and drop onto your XAML surfaces.
+
+![Completed Toolbox Items](resources/images/toolboxfinal.png "Toolbox Final Image")
+

docs/animations/Blur.md

@@ -0,0 +1,66 @@
+# Blur
+
+The **Blur animation behavior** selectively blurs a XAML element by increasing or decreasing pixel size.
+Sometimes you want an element to appear slightly out of focus, but to be familiar to the user from other locations within an app.  Rather than having to rasterize the XAML into an image and apply a blur, you can apply a BlurBehavior to the original element at run time. 
+
+**NOTE**:  This animation REQUIRES the [Windows 10 Anniversary SDK 14393](https://blogs.windows.com/windowsexperience/2016/07/18/build14393/) 10.0.14393.0 in order for it to work.
+
+## Syntax
+
+You can either use the blur behavior from your XAML code:
+
+```xaml
+
+    <interactivity:Interaction.Behaviors>
+    <behaviors:Blur x:Name="BlurBehavior" 
+           Value="10" 
+           Duration="10" 
+           Delay="0" 
+           AutomaticallyStart="True"/>
+    </interactivity:Interaction.Behaviors>
+
+```
+
+or directly from code:
+
+```csharp
+
+ToolkitLogo.Blur(value: 10, duration: 10, delay: 0);       
+
+```
+
+Behavior animations can also be chained and awaited.
+
+```csharp
+
+    Element.Rotate(value: 30f, duration: 0.3).StartAsync();
+
+    await Element.Rotate(value: 30f, duration: 0.3).StartAsync();
+
+    var anim = element.Rotate(30f).Fade(0.5).Blur(5);
+    anim.SetDurationForAll(2);
+    anim.Completed += animation_completed;
+    anim.StartAsync();
+
+    anim.Stop();
+
+```
+
+[Blur Behavior Sample Page Source](https://github.com/Microsoft/UWPCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Blur)
+
+Please view the [toolkit sample application](https://github.com/Microsoft/UWPCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.SampleApp) for the UWP Community Toolkit for current samples and example code.
+
+## Example Image
+
+![Blur Behavior animation](../resources/images/Animations-Blur.gif "Blur Behavior")
+
+## Requirements (Windows 10 Device Family)
+
+| [Device family](http://go.microsoft.com/fwlink/p/?LinkID=526370) | Universal, [Windows 10 Anniversary SDK 14393](https://blogs.windows.com/windowsexperience/2016/07/18/build14393/) 10.0.14393.0 |
+| --- | --- |
+| Namespace | Microsoft.Toolkit.Uwp.UI.Animations |
+
+## API
+
+* [Blur source code](https://github.com/Microsoft/UWPCommunityToolkit/blob/master/Microsoft.Toolkit.Uwp.UI.Animations/Behaviors/Blur.cs)
+

docs/animations/Fade.md

@@ -0,0 +1,60 @@
+# Fade
+
+The **Fade animation behavior** fades objects, in and out, over time.
+
+## Syntax
+
+```xaml
+
+    <behaviors:Fade x:Name="FadeBehavior>" 
+                Value="10.0" 
+                Duration="1.5" 
+                Delay="0.5" 
+                AutomaticallyStart="True">
+    </behaviors:Fade>
+
+```
+
+or directly from code:
+
+```csharp
+
+    MyRectangle.Fade((float)Value, Duration, Delay);
+
+```
+
+Behavior animations can also be chained and awaited.
+
+```csharp
+
+    Element.Rotate(value: 30f, duration: 0.3).StartAsync();
+
+    await Element.Rotate(value: 30f, duration: 0.3).StartAsync();
+
+    var anim = element.Rotate(30f).Fade(0.5).Blur(5);
+    anim.SetDurationForAll(2);
+    anim.Completed += animation_completed;
+    anim.StartAsync();
+
+    anim.Stop();
+
+```
+
+[Fade Behavior Sample Page Source](https://github.com/Microsoft/UWPCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Fade)
+
+Please view the [toolkit sample application](https://github.com/Microsoft/UWPCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.SampleApp) for the UWP Community Toolkit for current samples and example code.
+ 
+## Example Image
+
+![Fade Behavior animation](../resources/images/Animations-Fade.gif "Fade Behavior")
+
+## Requirements (Windows 10 Device Family)
+
+| [Device family](http://go.microsoft.com/fwlink/p/?LinkID=526370) | Universal, 10.0.10586.0 or higher |
+| --- | --- |
+| Namespace | Microsoft.Toolkit.Uwp.UI.Animations |
+
+## API
+
+* [Fade source code](https://github.com/Microsoft/UWPCommunityToolkit/blob/master/Microsoft.Toolkit.Uwp.UI.Animations/Behaviors/Fade.cs)
+

docs/animations/FadeHeader.md

@@ -0,0 +1,105 @@
+# FadeHeader
+
+The **FadeHeader behavior** 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.
+
+## Syntax
+
+### XAML Implementation ###
+
+**Implicit usage**: 
+
+Automatically detects the Header element by finding the ListViewBase (note: GridView uses ListViewBase)
+
+```xaml
+
+    <interactivity:Interaction.Behaviors>
+        <behaviors:FadeHeaderBehavior />
+    </interactivity:Interaction.Behaviors>
+
+```
+
+
+**Explicit usage**: 
+
+Set the ElementName property using the UIElement of the Header manually
+
+```xaml
+
+    <interactivity:Interaction.Behaviors>
+        <behaviors:FadeHeaderBehavior HeaderElement="{Binding ElementName=MyHeaderGrid}" />
+    </interactivity:Interaction.Behaviors>
+
+```
+
+### C# Implementation ###
+
+Implicit usage:
+
+```csharp
+
+    Microsoft.Xaml.Interactivity.Interaction.GetBehaviors(MyListView).Add(new FadeHeaderBehavior());
+
+```
+
+Explicit usage:
+
+```csharp
+
+    Microsoft.Xaml.Interactivity.Interaction.GetBehaviors(MyListView).Add(new FadeHeaderBehavior { HeaderElement = MyHeaderGrid });
+
+```
+
+
+## Example ##
+
+```xaml
+
+    <ListView x:Name="MyListView">
+    <interactivity:Interaction.Behaviors>
+        <behaviors:FadeHeaderBehavior />
+    </interactivity:Interaction.Behaviors>
+    <ListView.Header>
+        <Grid x:Name="MyHeaderGrid"
+                      MinHeight="250"
+                      Background="{StaticResource Brush-Blue-01}">
+            <StackPanel VerticalAlignment="Center"
+                        HorizontalAlignment="Center"
+                        Margin="20,0">
+                <TextBlock Text="This Is The Header"
+                           TextAlignment="Center"
+                           FontWeight="Bold"
+                           Style="{ThemeResource TitleTextBlockStyle}"
+                           Foreground="{StaticResource Brush-White}"
+                           Margin="0,5" />
+                <TextBlock Text="It starts with 100% opacity but will fade to 0% as you scroll up."
+                           Style="{ThemeResource SubtitleTextBlockStyle}"
+                           Foreground="{StaticResource Brush-White}"
+                           VerticalAlignment="Center"
+                           TextAlignment="Center" />
+            </StackPanel>
+        </Grid>
+    </ListView.Header>
+</ListView>
+
+```
+
+
+[FadeHeader Behavior Sample Page Source](https://github.com/Microsoft/UWPCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/FadeHeader)
+
+Please view the [toolkit sample application](https://github.com/Microsoft/UWPCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.SampleApp) for the UWP Community Toolkit for current samples and example code.
+ 
+## Example Image
+
+![FadeHeader Behavior animation](../resources/images/Animations-FadeHeader.gif "FadeHeader Behavior")
+
+## Requirements (Windows 10 Device Family)
+
+| [Device family](http://go.microsoft.com/fwlink/p/?LinkID=526370) | Universal, 10.0.10586.0 or higher |
+| --- | --- |
+| Namespace | Microsoft.Toolkit.Uwp.UI.Animations |
+
+## API
+
+* [FadeHeader source code](https://github.com/Microsoft/UWPCommunityToolkit/blob/master/Microsoft.Toolkit.Uwp.UI.Animations/Behaviors/FadeHeader.cs)
+
+