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.

<Page xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns: local = "using:UWPBlade"
xmlns: d = "http://schemas.microsoft.com/expression/blend/2008"
xmlns: mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns: Controls = "using:Microsoft.Toolkit.Uwp.UI.Controls"
x: Class = "UWPBlade.MainPage"
mc: Ignorable = "d" >
    <
    Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}" >
    <
    TextBlock x: Name = "tblTitle"
HorizontalAlignment = "Left"
Margin = "500,45,0,0"
TextWrapping = "Wrap"
Text = "UWP Tool Kit Blade Control "
VerticalAlignment = "Top"
Height = "30"
Width = "287"
FontWeight = "Bold"
FontSize = "22" / >
    <
    Controls: BladeControl x: Name = "BCtset"
HorizontalAlignment = "Stretch"
VerticalAlignment = "Stretch"
Margin = "10,80,0,112" >
    <
    Controls: BladeControl.Blades >
    <
    Controls: Blade x: Name = "BDCommon"
BladeId = "BDCommon"
IsOpen = "True"
TitleBarVisibility = "Collapsed" >
    <
    Controls: Blade.Element >
    <
    StackPanel x: Name = "SPCom"
Margin = "8,8,8,48" >
    <
    Button x: Name = "btnDefbla"
Width = "188"
Height = "41"
Margin = "0, 20, 0, 0"
Controls: BladeControl.ToggleBlade = "BTest1"
Content = "Default Blade" / >
    <
    Button x: Name = "btnblTitle"
Width = "188"
Height = "33"
Margin = "0,20,0,0"
Controls: BladeControl.ToggleBlade = "BTest2"
Content = "Blade with Title Bar" / >
    <
    Button x: Name = "btnblclose"
Width = "188"
Height = "39"
Margin = "0,20,0,0"
Controls: BladeControl.ToggleBlade = "BTest3"
Content = "Blade with Close Button" / >
    <
    /StackPanel> <
    /Controls:Blade.Element> <
    /Controls:Blade> <
    Controls: Blade x: Name = "BTest1"
BladeId = "BTest1"
IsOpen = "False"
CloseButtonForeground = "{x:Null}"
Title = "Default Blade" >
    <
    Controls: Blade.Element >
    <
    TextBlock HorizontalAlignment = "Center"
Text = "CSharp Corner - This is a Default Blade."
VerticalAlignment = "Center" / >
    <
    /Controls:Blade.Element> <
    /Controls:Blade> <
    Controls: Blade x: Name = "BTest2"
BladeId = "BTest2"
TitleBarBackground = "Red"
TitleBarForeground = "Black"
Title = "Custom Title Bar colors" >
    <
    Controls: Blade.Element >
    <
    TextBlock HorizontalAlignment = "Center"
Text = "CSharp Corner - This is a blade with custom titlebar colors."
VerticalAlignment = "Center" / >
    <
    /Controls:Blade.Element> <
    /Controls:Blade> <
    Controls: Blade x: Name = "BTest3"
BladeId = "BTest3"
CloseButtonBackground = "Black"
CloseButtonForeground = "White"
Title = "Custom Close Button Color" >
    <
    Controls: Blade.Element >
    <
    TextBlock HorizontalAlignment = "Center"
Text = "CSharp Corner - This is a blade with custom Close button Color."
VerticalAlignment = "Center" / >
    <
    /Controls:Blade.Element> <
    /Controls:Blade> <
    /Controls:BladeControl.Blades> <
    /Controls:BladeControl> <
    /Grid> <
    /Page>

Step 8 - Deploy your app in Local Machine. 

The output of the UWPBlade app is shown below. 

Click the "Default Blade" button.



Click the "Blade with Title Bar" button. 

Click the "Blade with Close Button" button.

 

Summary - Now, you have successfully tested the UWP Tool Kit – BladeControl in Visual C# - UWP environment.