Blade XAML Control

The BladeView 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.


    <controls:BladeItem IsOpen="True"
        <StackPanel Margin="8">
            <ToggleButton Width="180"
                          Margin="0, 20, 0, 0"
                          IsChecked="{Binding IsOpen, Mode=TwoWay, ElementName=DefaultBlade}"
                          Content="Default blade" />

    <controls:BladeItem x:Name="DefaultBlade" 
                        Title="A blade"
        <TextBlock HorizontalAlignment="Center"
                   Style="{StaticResource SubtitleTextBlockStyle}"
                   Text="This is a blade with all settings set to default." />

Blade modes

You can customize your BladeView control by setting the BladeMode property. If you want blade items to stay unchanged (based on their respective width and height), you will choose the default mode (BladeMode.Normal). Otherwise, you can extend each blade items to fill the entire container (example: Grid, StackPanel, etc..). To do that, you'll have to choose the Fullscreen mode (BladeMode.Fullscreen).

public enum BladeMode
    /// <summary>
    /// Default mode : each blade will take the specified Width and Height
    /// </summary>

    /// <summary>
    /// Fullscreen mode : each blade will take the entire Width and Height of the UI control container (cf <see cref="BladeView"/>)
    /// </summary>

Here is an example of a BladeView where the BladeMode property is binded to a value in the code-behind.

<controls:BladeView x:Name="BladeView"
                    BladeMode="{Binding BladeMode}">

Example Image

BladeView animation

Example Code

BladeView Sample Page

Default Template

BladeView XAML File is the XAML template used in the toolkit for the default styling.

Requirements (Windows 10 Device Family)

Device family Universal, 10.0.10586.0 or higher
Namespace Microsoft.Toolkit.Uwp.UI.Controls