Material sidebar
This example illustrates how you can use EdgeNavigator
to make a navigation drawer that can be swiped in from the left, or opened using a button.
<App>
<iOS.StatusBarConfig Style="Light" />
<EdgeNavigator>
<Panel ux:Name="sidebar" Edge="Left" Width="100%" Margin="0,0,56,0" Background="#37474F">
<Shadow ux:Name="shadow" Angle="180" Distance="8" Size="16" Color="#0000" />
<ActivatingAnimation>
<Change shadow.Color="#0004" />
<Change sidebarFade.Opacity="1" />
</ActivatingAnimation>
</Panel>
<DockPanel Color="#263238">
<Rectangle ux:Name="sidebarFade" Layer="Overlay" Color="#0005" Opacity="0" HitTestMode="None" />
<StackPanel Dock="Top" Color="#2196F3">
<Shadow Size="3" Distance="1" />
<StatusBarBackground />
<Panel Height="56">
<Hamburger Alignment="Left">
<Clicked>
<NavigateToggle Target="sidebar" />
</Clicked>
</Hamburger>
</Panel>
</StackPanel>
</DockPanel>
</EdgeNavigator>
</App>