Sunday, July 14, 2013

XAML Flyouts using Blend

Inline image 2

A new control added in the Windows 8.1 preview is the Flyout control. It is used for temporarily showing some UI based on what the user is doing. It could be, or actually must be, easily dismissed by clicking or tapping outside it. You can attach the Flyout control to a button or use the FlyoutBase.AttachedFlyout attached property on any other framework element. Other than a dialog, the flyout does not create a window and does not block the UI.

For demonstration purposes I started by creating a new Windows Store application using Blend for Visual Studio 2013 preview and added a button to the grid. I centered the button and changed its contents to "Show Flyout" .

To add a Flyout to the button right-click on the button in the objects & timeline panel or in the designer and select Add Flyout. The Create FlyoutBase Resource window appears where you can name the resource that will be created. I named the resources ButtonFlyout and hit OK.

In the Objects and Timeline panel you see a Flyout object containing an empty grid. The designer should show a white square next to the button now. Hit F5 to run the application to see what happens with the flyout.

When you tap or click the button when the application runs, you should see a white square slide up from the button. The flyout disappears when you tap or click anywhere. Close the application and switch back to Blend.

Read more: Codeproject
QR: Inline image 1