OHV/Dev/OHV/OHV.Vehicle/MainWindow.xaml

<Window x:Class="OHV.Vehicle.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        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:local="clr-namespace:OHV.Vehicle"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        xmlns:prism="http://prismlibrary.com/"
        prism:ViewModelLocator.AutoWireViewModel="True"
        xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
        mc:Ignorable="d"
        Title="{Binding Title}" Height="800" Width="1280"
        WindowStyle="None"
        xmlns:OHVCommonShareds="clr-namespace:OHV.Common.Shareds;assembly=OHV.Common"
        xmlns:Behavior="clr-namespace:GSG.NET.WPF.Behavior;assembly=GSG.NET.WPF" WindowStartupLocation="CenterScreen">

    <!--<WindowChrome.WindowChrome>
        <WindowChrome CaptionHeight="0"/>
    </WindowChrome.WindowChrome>-->

    <Window.Resources>
        <Storyboard x:Key="MenuOpen">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="GridMenu" >
                <EasingDoubleKeyFrame KeyTime="0" Value="60"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="200"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

        <Storyboard x:Key="MenuClose">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="GridMenu" >
                <EasingDoubleKeyFrame KeyTime="0" Value="200"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="60"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>

    <Window.Triggers>
        <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonOpenMenu">
            <BeginStoryboard Storyboard="{StaticResource MenuOpen}"/>
        </EventTrigger>

        <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonCloseMenu">
            <BeginStoryboard Storyboard="{StaticResource MenuClose}"/>
        </EventTrigger>
    </Window.Triggers>

    <Grid x:Name="GridMain" Background="{x:Null}" >
        <!--<Grid x:Name="GridMain" HorizontalAlignment="Right" VerticalAlignment="Bottom" Height="540" Width="1020"/>-->
        <Grid Height="80" VerticalAlignment="Top" Background="#FF1368BD" x:Name="gridHead">
            <TextBlock Style="{StaticResource MaterialDesignHeadline3TextBlock}" HorizontalAlignment="Center" VerticalAlignment="Top" Foreground="White">
                Over Head Vehicle
            </TextBlock>

            <StackPanel VerticalAlignment="Center" HorizontalAlignment="Left" Orientation="Horizontal" >
                <TextBlock Text="{Binding VehicleID, FallbackValue=Gv#000001}" Margin="100,-40,0,0" VerticalAlignment="Center" Foreground="LightGray" FontSize="20"/>
                <TextBlock Margin="-110,40,0,0" Text="{Binding DateTime, FallbackValue=2020-02-24 13:09:33, StringFormat=' \{0:yyyy-MM-dd HH:mm:ss\}'}" VerticalAlignment="Center" FontSize="20" Foreground="LightGray"/>
            </StackPanel>

            <StackPanel VerticalAlignment="Center" Orientation="Horizontal" HorizontalAlignment="Right">
                <!--<Button Margin="20,0,60,0"
                    Style="{DynamicResource MaterialDesignRaisedButton}"
                    materialDesign:ShadowAssist.ShadowDepth="Depth4">
                    Auto
                </Button>-->

                <Button Margin="20,0,30,0"
                   Style="{DynamicResource MaterialDesignFloatingActionMiniButton}"     
                   materialDesign:ShadowAssist.ShadowDepth="Depth5" Background="{Binding OcsBrush, FallbackValue=Gray}">
                    OCS
                </Button>

                <Button Margin="20,0,30,0"
                    Style="{DynamicResource MaterialDesignFloatingActionMiniButton}"
                    materialDesign:ShadowAssist.ShadowDepth="Depth5" Background="{Binding BatteryBrush, FallbackValue=Gray}">
                    Battery
                </Button>

                <Button Margin="20,0,30,0"
                    Style="{DynamicResource MaterialDesignFloatingActionMiniButton}"
                    materialDesign:ShadowAssist.ShadowDepth="Depth5" Background="{Binding LaserBrush, FallbackValue=Gray}">
                    Laser
                </Button>

                <materialDesign:PopupBox HorizontalAlignment="Right" Margin="10" PlacementMode="BottomAndAlignRightEdges" StaysOpen="False" Foreground="White">
                    <StackPanel Width="150">
                        <Button Content="Settings"/>
                        <Button Content="Help"/>
                        <Separator/>
                        <Button x:Name="ButtonPopUpLogout" Content="System Off" Command="{Binding SystemOffCommand}" />
                    </StackPanel>
                </materialDesign:PopupBox>
            </StackPanel>
        </Grid>
        
        <DockPanel LastChildFill="True">
            <ContentControl prism:RegionManager.RegionName="{x:Static OHVCommonShareds:RegionNames.MainView}" VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="1212" Height="711"/>
        </DockPanel>
        
        <Grid x:Name="GridMenu" Width="60" HorizontalAlignment="Left" Background="#FF1B3861">
            <StackPanel>
                <Grid Height="150" Background="White">
                    <Button x:Name="ButtonOpenMenu" Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}" Width="60" Height="60" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="#FF31577E" VerticalAlignment="Top" HorizontalAlignment="Right" Click="ButtonOpenMenu_Click">
                        <materialDesign:PackIcon Kind="Menu" Width="25" Height="25"/>
                    </Button>

                    <Button x:Name="ButtonCloseMenu" Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}" Width="60" Height="60" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="#FF31577E" VerticalAlignment="Top" HorizontalAlignment="Right" Visibility="Collapsed" Click="ButtonCloseMenu_Click">
                        <materialDesign:PackIcon Kind="ArrowLeft" Width="25" Height="25"/>
                    </Button>
                </Grid>

                <ListView x:Name="MainViewList" ScrollViewer.HorizontalScrollBarVisibility="Disabled" Foreground="#FF1368BD" >
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="SelectionChanged">
                            <i:InvokeCommandAction  Command="{Binding DataContext.NavigateCommand, RelativeSource={RelativeSource AncestorType=ListView}}" CommandParameter="{Binding Path=SelectedValue,ElementName=MainViewList}"/>
                        </i:EventTrigger>
                    </i:Interaction.Triggers>

                    <ListViewItem Height="60" x:Name="AutoView">
                        <StackPanel Orientation="Horizontal">
                            <materialDesign:PackIcon Kind="ViewDashboard" Width="25" Height="25" VerticalAlignment="Center" Margin="10"/>
                            <TextBlock Text="Home" VerticalAlignment="Center" Margin="20, 10"/>
                        </StackPanel>
                    </ListViewItem>

                    <ListViewItem Height="60" x:Name="TeachView">
                            <StackPanel Orientation="Horizontal">
                                <materialDesign:PackIcon Kind="AxisArrow" Width="25" Height="25" VerticalAlignment="Center" Margin="10"/>
                                <TextBlock Text="Device" VerticalAlignment="Center" Margin="20, 10"/>
                            </StackPanel>
                    </ListViewItem>

                    <ListViewItem Height="60" x:Name="EditView">
                        <StackPanel Orientation="Horizontal">
                            <materialDesign:PackIcon Kind="CarConnected" Width="25" Height="25" VerticalAlignment="Center" Margin="10"/>
                            <TextBlock Text="Config" VerticalAlignment="Center" Margin="20, 10"/>
                        </StackPanel>
                    </ListViewItem>

                    <ListViewItem Height="60">
                        <StackPanel Orientation="Horizontal">
                            <materialDesign:PackIcon Kind="Message" Width="25" Height="25" VerticalAlignment="Center" Margin="10"/>
                            <TextBlock Text="Message" VerticalAlignment="Center" Margin="20, 10"/>
                        </StackPanel>
                    </ListViewItem>

                    <!--<ListViewItem Height="60">
                        <StackPanel Orientation="Horizontal">
                            <materialDesign:PackIcon Kind="GithubCircle" Width="25" Height="25" VerticalAlignment="Center" Margin="10"/>
                            <TextBlock Text="GitHub" VerticalAlignment="Center" Margin="20, 10"/>
                        </StackPanel>
                    </ListViewItem>-->
                </ListView>
            </StackPanel>
        </Grid>
    </Grid>
</Window>