VeloeMonitorAvaloniaApp/VeloeMonitorApp/Views/MainView.axaml

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:vm="clr-namespace:VeloeMonitorApp.ViewModels"
             xmlns:avalonia="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia"
             xmlns:controls="clr-namespace:Material.Styles.Controls;assembly=Material.Styles"
             xmlns:dialogHostAvalonia="clr-namespace:DialogHostAvalonia;assembly=DialogHost.Avalonia"
			 mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:Class="VeloeMonitorApp.Views.MainView"
             x:DataType="vm:MainViewModel">
  <Design.DataContext>
    <!-- This only sets the DataContext for the previewer in an IDE,
         to set the actual DataContext for runtime, set the DataContext property in code (look at App.axaml.cs) -->
    <vm:MainViewModel />
  </Design.DataContext>
	<UserControl.Styles>
		<Style Selector="TextBlock.Subheadline">
			<Setter Property="Margin" Value="0, 16" />
		</Style>
		<Style Selector="TextBlock.Subheadline2">
			<Setter Property="Margin" Value="0, 8" />
		</Style>
		<Style Selector="TextBlock.Content">
			<Setter Property="Margin" Value="0, 4" />
			<Setter Property="HorizontalAlignment" Value="Left" />
		</Style>
	</UserControl.Styles>
		<controls:SnackbarHost HostName="Root">
			<controls:NavigationDrawer Name="LeftDrawer" Classes="permanent"
									   LeftDrawerOpened="{Binding ElementName=NavDrawerSwitch, Path=IsChecked, Mode=TwoWay}">
				<controls:NavigationDrawer.LeftDrawerContent>
					<ScrollViewer>
						<StackPanel>
							<controls:ColorZone Mode="Accent" Height="180">
								<StackPanel>
									<Image Width="96" Height="120"
										   HorizontalAlignment="Center" VerticalAlignment="Center"
										   Margin="0,0,0,-8"
										    />
									<TextBlock Classes="Headline6" Text="Material Design" HorizontalAlignment="Center" />
									<TextBlock Classes="Subtitle1" Text="with AvaloniaUI" HorizontalAlignment="Center" />
								</StackPanel>
							</controls:ColorZone>
							<ListBox Classes="NoScroll" Name="DrawerList"
									 Focusable="{Binding ElementName=LeftDrawer, Path=LeftDrawerOpened}">
								<ListBox.Styles>
									<Style Selector="ListBoxItem">
										<Setter Property="Height" Value="48" />
										<Setter Property="Padding" Value="16,0" />
										<Setter Property="VerticalContentAlignment" Value="Center" />
									</Style>
								</ListBox.Styles>
								<ListBoxItem Tag="Index">Home</ListBoxItem>
								<ListBoxItem>Buttons</ListBoxItem>
								<ListBoxItem>Card</ListBoxItem>
								<ListBoxItem>ColorZones</ListBoxItem>
								<ListBoxItem>Colors</ListBoxItem>
								<ListBoxItem>ComboBoxes</ListBoxItem>
								<ListBoxItem>Date/Time pickers</ListBoxItem>
								<ListBoxItem>Dialogs</ListBoxItem>
								<ListBoxItem>Expanders</ListBoxItem>
								<ListBoxItem>Fields</ListBoxItem>
								<ListBoxItem>Lists</ListBoxItem>
								<ListBoxItem>Material Icons</ListBoxItem>
								<ListBoxItem>Progress indicators</ListBoxItem>
								<ListBoxItem>ScrollViewer</ListBoxItem>
								<!-- <ListBoxItem>Shadows</ListBoxItem> -->
								<ListBoxItem>SideSheet</ListBoxItem>
								<ListBoxItem>Sliders</ListBoxItem>
								<ListBoxItem>Snackbar</ListBoxItem>
								<ListBoxItem>TabControls</ListBoxItem>
								<ListBoxItem>Toggles</ListBoxItem>
								<ListBoxItem>TreeViews</ListBoxItem>
								<ListBoxItem>Typography</ListBoxItem>
							</ListBox>
						</StackPanel>
					</ScrollViewer>
				</controls:NavigationDrawer.LeftDrawerContent>
				<DockPanel LastChildFill="true">
					<controls:ColorZone Name="PART_AppBarContainer" VerticalAlignment="Top" HorizontalAlignment="Stretch"
										DockPanel.Dock="Top"
										Height="56" Mode="PrimaryMid" ZIndex="1">
						<Grid Margin="16">
							<Grid.ColumnDefinitions>
								<ColumnDefinition Width="24" />
								<ColumnDefinition Width="32" />
								<ColumnDefinition Width="*" />
								<ColumnDefinition Width="32" />
								<ColumnDefinition Width="Auto" />
							</Grid.ColumnDefinitions>
							<ToggleButton Name="NavDrawerSwitch"
										  Theme="{StaticResource MaterialFlatButton}"
										  Width="32" Height="32" Padding="4">
								<avalonia:MaterialIcon Kind="Menu" Width="24" Height="24" />
							</ToggleButton>
							<TextBlock Grid.Column="2" Classes="Headline6" Text="Veloe Monitor"
									   VerticalAlignment="Center" />
							<Menu Grid.Column="4" Height="32" Padding="0" Margin="0">
								<MenuItem Height="32" Width="32" Header="{avalonia:MaterialIconExt DotsVertical, Size=24}">
									<MenuItem Header="Hello!">
										<MenuItem.Icon>
											<avalonia:MaterialIcon Kind="Hand" Width="24" Height="24" />
										</MenuItem.Icon>
									</MenuItem>
									<MenuItem Header="Connect to network">
										<MenuItem.Icon>
											<avalonia:MaterialIcon Kind="RocketLaunch" Width="24" Height="24" />
										</MenuItem.Icon>
									</MenuItem>
									<Separator />
									<MenuItem Header="Action 1" />
									<MenuItem Header="Action 2" />
									<MenuItem Header="Action 3" />
									<Separator />
									<MenuItem Header="Goodbye">
										<MenuItem.Icon>
											<avalonia:MaterialIcon Kind="ExitRun" Width="24" Height="24" />
										</MenuItem.Icon>
									</MenuItem>
								</MenuItem>
							</Menu>
						</Grid>
					</controls:ColorZone>
					<ScrollViewer Name="mainScroller"
								  DockPanel.Dock="Top"
								  HorizontalContentAlignment="Stretch"
								  HorizontalAlignment="Stretch"
								  HorizontalScrollBarVisibility="Disabled">
						<Border HorizontalAlignment="Stretch"
								VerticalAlignment="Stretch">
							<ContentControl Content="{Binding SelectedPage}" 
											HorizontalAlignment="Stretch"/>
						</Border>
					</ScrollViewer>
				</DockPanel>
			</controls:NavigationDrawer>
		</controls:SnackbarHost>
</UserControl>