Edit

BladeView

  • Article

The BladeView control provides a horizontal collection of BladeItems for drilling into detailed scenarios. The control is based on how the Azure Portal works.

Try it in the sample app

Syntax

<Page ...
     xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"/>

<controls:BladeView>
    <controls:BladeItem IsOpen="True" TitleBarVisibility="Collapsed">
        <!-- BladeItem content -->
    </controls:BladeItem>

    <controls:BladeItem x:Name="DefaultBlade" Header="A blade" IsOpen="False">
        <!-- BladeItem content -->
    </controls:BladeItem>
</controls:BladeView>

Sample Output

BladeView animation

Properties

BladeView Properties

Property Type Description
ActiveBlades IList<BladeItem> Description
AutoCollapseCountThreshold int Gets or sets a value indicating what the overflow amount should be to start auto collapsing blade items
BladeMode BladeMode Gets or sets a value indicating whether blade mode (ex: whether blades are full screen or not)

BladeItem Properties

Property Type Description
CloseButtonBackground Brush Gets or sets the background color of the default close button in the title bar
CloseButtonForeground Brush Gets or sets the foreground color of the close button
IsOpen bool Gets or sets a value indicating whether this blade is opened
Header string Gets or sets the content for the header
TitleBarBackground Brush Gets or sets the background color of the title bar
TitleBarVisibility Visibility Gets or sets the visibility of the title bar for this blade

Events

BladeView Events

Events Description
BladeClosed Fires whenever a BladeItem is closed
BladeOpened Fires whenever a BladeItem is opened

BladeItem Events

Events Description
VisibilityChanged Fires when the blade is opened or closed

Examples

  • If you want to use the BladeView for handling a flow of actions, you can use the AutoCollapseCountThreshold property to tell it to start auto collapsing BladeItems after a certain threshold count has been reached. This will also help keep a clean, uncluttered screen real estate.

    For example: if you set AutoCollapseCountThreshold to 3, the BladeView will start counting all BladeItems that are open in the BladeView and have their TitleBarVisibility property set to Visible. When the n+1 BladeItem, in our case the 4th one, is being added, the BladeView will auto collapse all n BladeItems except for the last one. All additional BladeItems that are added afterwards will trigger the same effect; collapse all BladeItems except for the last open one.

    Sample Code

    <controls:BladeView AutoCollapseCountThreshold="3">
    <controls:BladeItem>
        <!-- BladeItem content -->
    </controls:BladeItem>
    <controls:BladeItem>
        <!-- BladeItem content -->
    </controls:BladeItem>
    .....
    .....
</controls:BladeView>

Sample Project

BladeView Sample Page Source. You can see this in action in the Windows Community Toolkit Sample App.

Default Template

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

Requirements

Device family Universal, 10.0.16299.0 or higher
Namespace Microsoft.Toolkit.Uwp.UI.Controls
NuGet package Microsoft.Toolkit.Uwp.UI.Controls

API