Skip to main content

Drawer

The Drawer is a layout that fits specially well in full pages that need to display more information to the users in a simple and intuitive way. The quintessential use case of the drawer are maps, where it's perfect to show information related with the map at a specific position.

Drawer Sample

Getting started

The Drawer's layout has 3 parts: the Content, the ControlTemplate and the DrawerItems:

Drawer Layout Sample
  • The Content is the part that have the content behind the Drawer.
  • The ControlTemplate is the part that acts as a 'box' and contains all the DrawerItems
  • Each DrawerItem in the collection will be displayed into the ControlTemplate depending in the current position of the Drawer.

In the xaml you would have a structure like the follow one:

<grial:Drawer>
...
<!-- Content displayed behind the drawer -->
...
<grial:Drawer.DrawerControlTemplate>
<ControlTemplate>
...
<!-- Where the DrawerItem's content will be displayed -->
<ContentPresenter
Grid.Row="1"
/>
...
</ControlTemplate>
</grial:Drawer.DrawerControlTemplate>

<grial:Drawer.DrawerItems>

<grial:DrawerItem StopPositions="0.5*">
...
<!-- Content that will be displayed into the ControlTemplate when the drawer reaches the stop positions specified -->
...
</grial:DrawerItem>

<grial:DrawerItem StopPositions="*">
...
<!-- Content that will be displayed into the ControlTemplate when the drawer reaches the stop positions specified -->
...
</grial:DrawerItem>
...
<!-- Any amount of DrawerItems -->
...
</grial:Drawer.DrawerItems>
</grial:Drawer>

Drawer Items

As you can see in the last section the DrawerItems are responsible for displaying the content in the drawer and also for defining the position at which the content will be displayed. DrawerItem has a property StopsPositions of type RowDefinitionCollection, and the drawer uses the notation to define rows with the follow semantic:

  • If the value is an number, that would be the absolute stop position of the item. E.g if you set a stop position of 200, the drawer will stop at height of 200 and will display the DrawrItem's content that define the stop position of 200.
  • The star * represents the 100% of the Drawer's height, so if you put a value like 0.5* that means the stop position will stay at the middle of the Drawer's Height, in the case that the max height would be the Screen Height the stop position would stay at the middle of the screen.
  • The Auto value is not supported by the Drawer.

Sample

The sample included in the FoodPlacesFlow requires only one view that has two stops, one at a height of 200 to start a little bit open and a second stop at '1.05*' to be taller than the screen and hide the drawer's top.

<!--  -->
<grial:Drawer>
...
<!-- The Map -->
...
<grial:Drawer.DrawerControlTemplate>
<ControlTemplate>
...
<!-- The box control template -->
...
</ControlTemplate>
</grial:Drawer.DrawerControlTemplate>

<grial:Drawer.DrawerItems>
<grial:DrawerItem StopPositions="200, 1.05*">
...
<!-- Drawer content -->
...
</grial:DrawerItem>
</grial:Drawer.DrawerItems>
</grial:Drawer>

Stop position 200

Drawer Controlmask

Stop position 1.05*

Drawer Controlmask

Caching a scroll inside the drawer

When building the DrawerItem content, you will probably need to use a ScrollView, in which case the Scrollview drag gesture conflicts with the one of the Drawer. For that use case we provide the DrawerScrollView, that extends from the ScrollView, and knows how to hanlde the aforementioned conflict.

tip

If you use more than one StopPosition in the DrawerItem you may want to ignore inner ScrollView scrolling until the drawer is full openend, for that reason the Drawer has a property DisableInnerScrollUntilPositionIndex. This property makes the Drawer ignore the Scrollview inside the DrawerItems until it reaches a Position.

info

When you have more than one DrawerItem, and each of it has more than one StopPosition, the positions will be ordered in a unique list with all the StopPosition by size starting from the smallest StopPosition to the bigest.

Bindable Properties

NameTypeDescription
OrientationDrawerOrientationGets or sets the direction in which the drawer will be displayed, the possible values ​​are: ToTop and ToBottom. By default, the value is ToTop which means that the drawer will be displayed from the bottom of the screen towards the top.
CurrentPositiondouble[ReadOnly] Gets the value of the drawer's current position, the value is in percentage in reference with the hole size of the drawer.
CurrentPositionIndexdouble[ReadOnly] Gets the value of the drawer's current position, the value is the index of the position in the positions array.
AbsoluteHeightdouble[ReadOnly] Gets the height of the drawer that is displayed at the time.
OpeningPercentagedouble[ReadOnly] Gets the percentage of the drawer that is displayed at the time in reference with the hole size of the drawer.
EnableCrossFadeAnimationboolGets or sets the value if the changes between DrawerItems have to be animated.
ContentSwapThresholdfloatGets or sets how fast is the swap between DrawerItems.
DrawerControlTemplateControlTemplateGets or sets the control template of the drawer.
ColumnDefinitionsColumnDefinitionCollectionGets or sets columns colection of the drawer. If there are 2 or more columns defined the drawer will be displayed in the second one, else the drawer wiil be displayed in the first column. This property is to give more flexibily to build more complex layouts.
DrawerItemsList
Gets or sets the list of DrawerItems.
DisableInnerScrollUntilPositionIndexintGets or sets the value from which one the drawer will start to capture the DrawerScrollView inside the DrawerItem.

Events

NameTypeDescription
PositionChangedEventHandlerFired when the drawer changes the current position.

DrawerItem Properties

NameTypeDescription
StopPositionsRowDefinitionCollectionGets or sets the value of stop positions.