Cover Sheet
The ins and outs of displaying and styling cover sheets
Cover sheets are a commonly patterned way to present information to a user that doesn't rely on changing the navigation stack.
Cover sheets cannot be opened within cover sheets. Some blocks utilize cover sheets to reveal content or forms, so be sure not to include these blocks in the navigation stack.
Android
Currently, there is not a ton of Android functionality. It works similarly to a PushPage but has an animation that slides from bottom to top instead of from right to left.
If you set IsNavigationPage
to false, Android users won't have a way to close the cover sheet. You'll need a custom button that uses the CloseCoverSheet command.
Parameters
Listed below are the options provided via the ShowCoverSheetCommandParameters
object.
Property | Type | Description |
---|---|---|
PageGuid | Guid | The Guid of the page you wish to display in the cover sheet, use this instead of Content. |
Content | View | The content you wish to display inside of the cover sheet, use this instead of PageGuid. |
ModalPresentationStyle | ModalPresentationStyle | [iOS ONLY] The way that the sheet is presented on iOS. There are currently four accepted values: |
IsNavigationPage | bool | Whether or not the page displayed should be converted into a page that has a toolbar with a dismiss button. Defaults to true. |
SheetTitle | string | The title of the sheet, displays in the middle of the navigation bar. |
DismissButtonText | string | The text to use in the dismiss button, seen in the toolbar (navigation bar) of the sheet. Defaults to Cancel. |
bool | Whether or not this instance should show a navigation bar. | |
Button | The button to use as the primary action, seen in the top right corner of cover sheets. | |
Button | The button to use as the secondary action, seen in the top left corner of cover sheets. |
You can style the Navigation Bar itself by targeting the cover-sheet
class. For example, if you want to change the background bar color, text color, and remove the FullScreen separator:
Examples
To show a cover sheet that displays another page, pass in the PageGuid
as the CommandParameter
.
To show a cover sheet from provided XAML content, pass in the XAML content you want to render inside of the CommandParameter
.
Here is an extensive example with most of the ShowCoverSheetParameters
properties utilized.
Closing a Cover Sheet
To close any open cover sheet, use the CloseCoverSheet command.
Last updated