BladeControl In UWP With XAML And C#

Before reading this article, please go through the following article -

1. Introduction To Universal Windows Platform (UWP) App Development Using Windows 10 And Visual Studio 2015
2. How to add UWP ToolKit controls in Universal Application Development With XAML AND C#

The BladeControl provides a container to host blades as extra detail pages in (for example) a master-detail scenario. The control is based on how the Azure Portal works.

Reading this article, you can learn how to use UWP Tool Kit Control – BladeControl in Universal Windows apps development with XAML and Visual C#.

The following important tools are required for developing UWP app.

1. Windows 10 (Recommended).
2. Visual Studio 2015 Community Edition (It is a free software available online).

Now, we can discuss the step by step process of app development.

Step 1 - Open Visual Studio 2015 -> Start -> New Project-> Select Universal (under Visual C# ->Windows) -> Blank App -> Give it a suitable name ( UWPBlade ) -> OK.



Step 2 - Choose the Target and Minimum platform version that your Windows Universal Application will support. After this, the project creates App.xaml and MainPage.xaml.



For adding UWPToolKit Control, please refer -

1. How to add UWP ToolKit controls in Universal Application Development With XAML AND C#

Step 3 - Add TextBlock control and change the name and text property for title.



Step 4 - Add UWP Toolkit namespace in MainPage.xaml

xmlns:Controls="using:Microsoft.Toolkit.Uwp.UI.Controls"

Add the BladeControl from UWP Tool Kit and set the name properties.



Step 5 - Add the code inside BladeControl in MainPage.xaml for adding blades.

<Controls:BladeControl.Blades>
</Controls:BladeControl.Blades>

Add a blade and set the following properties – Name, BladeId, IsOpen, TitleBarVisibility.



Similarly, add 3 blades and set properties with relevant options.

1. First blade is default blade.
   
   <Controls:Blade x:Name="BTest1" BladeId="BTest1" IsOpen="False" CloseButtonForeground="{x:Null}" Title="Default Blade">
   
   
   
   
2. The second blade is custom titlebar colors.
   
   <Controls:Blade x:Name="BTest2" BladeId="BTest2" TitleBarBackground="Red" TitleBarForeground="Black" Title="Custom Title Bar colors">
   
   
   
   
3. The third blade is custom Close button color.
   
   <Controls:Blade x:Name="BTest3" BladeId="BTest3" CloseButtonBackground="Black" CloseButtonForeground="White" Title="Custom Close Button Color">
   
   
   

Step 6 - Add blade element as stackpanel in common blade.



Add buttons for each blade.





Step 7 - Add TextBloack for each blade for displaying the content.



Note - Automatically, the following code will be generated in XAML Code View when we are done in the Design View.