path: root/Software/Visual_Studio/FSE/Tango.FSE.UI/Views/LayoutView.xaml

<UserControl x:Class="Tango.FSE.UI.Views.LayoutView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:global="clr-namespace:Tango.FSE.UI"
             xmlns:gif="clr-namespace:Tango.AnimatedGif;assembly=Tango.AnimatedGif"
             xmlns:operations="clr-namespace:Tango.Integration.Operation;assembly=Tango.Integration"
             xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
             xmlns:material="http://materialdesigninxaml.net/winfx/xaml/themes"
             xmlns:commonControls="clr-namespace:Tango.FSE.Common.Controls;assembly=Tango.FSE.Common"
             xmlns:vm="clr-namespace:Tango.FSE.UI.ViewModels"
             xmlns:resolution="clr-namespace:Tango.FSE.Common.Resolution;assembly=Tango.FSE.Common"
             xmlns:local="clr-namespace:Tango.FSE.UI.Views"
             xmlns:panes="clr-namespace:Tango.FSE.UI.Panes"
             xmlns:controls="clr-namespace:Tango.SharedUI.Controls;assembly=Tango.SharedUI"
             xmlns:win="clr-namespace:Tango.FSE.Common.WindowsManager;assembly=Tango.FSE.Common"
             mc:Ignorable="d" 
             d:DesignHeight="720" d:DesignWidth="1280" d:DataContext="{d:DesignInstance Type=vm:LayoutViewVM, IsDesignTimeCreatable=False}" DataContext="{x:Static global:ViewModelLocator.LayoutViewVM}" Background="{StaticResource FSE_PrimaryBackgroundBrush}" Foreground="{StaticResource FSE_PrimaryForegroundBrush}">
    <Grid x:Name="gridMain">
        <Grid Margin="70 0 0 0">
            <Grid.RowDefinitions>
                <RowDefinition Height="90"/>
                <RowDefinition Height="1*"/>
            </Grid.RowDefinitions>

            <Grid Grid.Row="1">
                <Grid x:Name="layoutGrid">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="1*" />
                        <!--DO NOT DO MIN HEIGHT HERE!-->
                        <RowDefinition Height="3" />
                        <RowDefinition x:Name="logsRowDefinition" MinHeight="30" Height="30" MaxHeight="{Binding ElementName=NavigationControl,Path=ActualHeight}" />
                    </Grid.RowDefinitions>

                    <ScrollViewer Focusable="False" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
                        <controls:NavigationControl Focusable="False" UseDefferedRendering="True" x:Name="NavigationControl" VerticalAlignment="Top" TransitionAlwaysFades="True" Height="{Binding ElementName=layoutGrid,Path=ActualHeight,Converter={StaticResource MathOperatorConverter},ConverterParameter='-33'}">
                            <!--MODULES-->
                        </controls:NavigationControl>
                    </ScrollViewer>

                    <GridSplitter x:Name="gridLogsSplitter" Focusable="False" Grid.Row="1" Visibility="Collapsed" HorizontalAlignment="Stretch" VerticalAlignment="Center" Background="Transparent" Height="3" />

                    <Grid x:Name="gridLogs" Grid.Row="2" Grid.RowSpan="2" Background="{StaticResource FSE_PrimaryBackgroundLightBrush}">
                        <Border BorderThickness="0 1 0 0" BorderBrush="{StaticResource FSE_BorderBrush}">
                            <DockPanel>
                                <Grid Height="30" DockPanel.Dock="Top">
                                    <StackPanel Margin="10 0 0 0" HorizontalAlignment="Left" Orientation="Horizontal">
                                        <StackPanel.Resources>
                                            <RadialGradientBrush x:Key="FSE_LED_GrayBrush">
                                                <GradientStop Offset="0" Color="Gray" />
                                                <GradientStop Offset="1" Color="#4E4E4E" />
                                            </RadialGradientBrush>
                                            <RadialGradientBrush x:Key="FSE_LED_GreenBrush">
                                                <GradientStop Offset="0" Color="#25E122" />
                                                <GradientStop Offset="1" Color="#096D07" />
                                            </RadialGradientBrush>
                                            <RadialGradientBrush x:Key="FSE_LED_RedBrush">
                                                <GradientStop Offset="0" Color="#FA6565" />
                                                <GradientStop Offset="1" Color="#A32323" />
                                            </RadialGradientBrush>
                                        </StackPanel.Resources>
                                        <Grid Width="14" Height="14" ToolTip="Communication Out" ToolTipService.Placement="Top">
                                            <Ellipse Stroke="#353535" Fill="{StaticResource FSE_LED_GrayBrush}" />
                                            <Ellipse Stroke="#353535">
                                                <Ellipse.Style>
                                                    <Style TargetType="Ellipse">
                                                        <Setter Property="Opacity" Value="0"></Setter>
                                                        <Setter Property="Fill" Value="{StaticResource FSE_LED_RedBrush}"></Setter>
                                                        <Style.Triggers>
                                                            <DataTrigger Binding="{Binding TransportOut}" Value="True">
                                                                <Setter Property="Opacity" Value="1"></Setter>
                                                            </DataTrigger>
                                                        </Style.Triggers>
                                                    </Style>
                                                </Ellipse.Style>
                                            </Ellipse>
                                        </Grid>

                                        <Grid Margin="5 0 0 0" Width="14" Height="14" ToolTip="Communication In" ToolTipService.Placement="Top">
                                            <Ellipse Stroke="#353535" Fill="{StaticResource FSE_LED_GrayBrush}" />
                                            <Ellipse Stroke="#353535">
                                                <Ellipse.Style>
                                                    <Style TargetType="Ellipse">
                                                        <Setter Property="Opacity" Value="0"></Setter>
                                                        <Setter Property="Fill" Value="{StaticResource FSE_LED_GreenBrush}"></Setter>
                                                        <Style.Triggers>
                                                            <DataTrigger Binding="{Binding TransportIn}" Value="True">
                                                                <Setter Property="Opacity" Value="1"></Setter>
                                                            </DataTrigger>
                                                        </Style.Triggers>
                                                    </Style>
                                                </Ellipse.Style>
                                            </Ellipse>
                                        </Grid>

                                        <StackPanel Margin="0 6" Orientation="Horizontal">
                                            <Rectangle Margin="10 0" Stroke="{StaticResource FSE_BorderBrush}" />
                                            <Button Padding="0" Style="{StaticResource FSE_FlatButton_OpacityHover}" Command="{Binding ConfigureHotFolderCommand}" material:RippleAssist.IsDisabled="True">
                                                <Image Stretch="Fill" RenderOptions.BitmapScalingMode="Fant" Margin="0 -14 0 0" Width="18" Height="18">
                                                    <Image.Style>
                                                        <Style TargetType="Image">
                                                            <Setter Property="Source" Value="/Images/hot_folder_small_inactive.png"></Setter>
                                                            <Setter Property="ToolTip" Value="Hot folder is inactive. Press to configure..."></Setter>
                                                            <Style.Triggers>
                                                                <DataTrigger Binding="{Binding HotFolderService.IsActive}" Value="True">
                                                                    <Setter Property="Source" Value="/Images/hot_folder_small_active.png"></Setter>
                                                                    <Setter Property="ToolTip" Value="Hot folder is now active. Press to configure..."></Setter>
                                                                </DataTrigger>
                                                            </Style.Triggers>
                                                        </Style>
                                                    </Image.Style>
                                                </Image>
                                            </Button>

                                            <Rectangle Margin="10 0" Stroke="{StaticResource FSE_BorderBrush}" />
                                            <Button IsEnabled="{Binding MachineProvider.IsPPCAvailable}" Padding="0" Style="{StaticResource FSE_FlatButton_OpacityHover}" Command="{Binding UploadJobCommand}" material:RippleAssist.IsDisabled="True">
                                                <Image ToolTip="Upload job to the connected machine" Stretch="Fill" RenderOptions.BitmapScalingMode="Fant" Margin="0 -14 0 0" Width="18" Height="18">
                                                    <Image.Style>
                                                        <Style TargetType="Image">
                                                            <Setter Property="Source" Value="/Images/job_upload_disabled.png"></Setter>
                                                            <Style.Triggers>
                                                                <DataTrigger Binding="{Binding MachineProvider.IsPPCAvailable}" Value="True">
                                                                    <Setter Property="Source" Value="/Images/job_upload.png"></Setter>
                                                                </DataTrigger>
                                                            </Style.Triggers>
                                                        </Style>
                                                    </Image.Style>
                                                </Image>
                                            </Button>
                                        </StackPanel>

                                        <Rectangle Margin="10 6" Stroke="{StaticResource FSE_BorderBrush}" />

                                        <material:PackIcon Kind="Wan" VerticalAlignment="Center" ToolTipService.Placement="Top">
                                            <material:PackIcon.Style>
                                                <Style TargetType="material:PackIcon">
                                                    <Setter Property="Foreground" Value="{StaticResource FSE_WarningBrush}"></Setter>
                                                    <Setter Property="ToolTip" Value="The system is currently offline. Please check your internet connection, some features might not work."></Setter>
                                                    <Style.Triggers>
                                                        <DataTrigger Binding="{Binding ConnectivityProvider.IsOnline}" Value="True">
                                                            <Setter Property="Foreground" Value="{StaticResource FSE_SuccessBrush}"></Setter>
                                                            <Setter Property="ToolTip" Value="The system is currently online."></Setter>
                                                        </DataTrigger>
                                                    </Style.Triggers>
                                                </Style>
                                            </material:PackIcon.Style>
                                        </material:PackIcon>

                                        <DockPanel Margin="10 6">
                                            <DockPanel.Style>
                                                <Style TargetType="DockPanel">
                                                    <Setter Property="Visibility" Value="Collapsed"></Setter>
                                                    <Style.Triggers>
                                                        <DataTrigger Binding="{Binding AuthenticationProvider.CurrentEnvironment.Name,Converter={StaticResource IsNotConverter},ConverterParameter='PROD'}" Value="True">
                                                            <Setter Property="Visibility" Value="Visible"></Setter>
                                                        </DataTrigger>
                                                    </Style.Triggers>
                                                </Style>
                                            </DockPanel.Style>
                                            <Rectangle Stroke="{StaticResource FSE_BorderBrush}" />
                                            <TextBlock Margin="10 0 0 0" Foreground="{StaticResource FSE_GrayBrush}" Text="{Binding AuthenticationProvider.CurrentEnvironment.Description}" FontSize="{StaticResource FSE_SmallFontSize}" VerticalAlignment="Center"></TextBlock>
                                        </DockPanel>
                                    </StackPanel>

                                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Margin="0 0 5 0">
                                        <commonControls:IconButton Visibility="{Binding BuildProvider.IsTwineRSM,Converter={StaticResource BooleanToVisibilityInverseConverter}}" Command="{Binding ReportIssueCommand}" ToolTip="Report Issue" ToolTipService.Placement="Top" Icon="Bugfood" Foreground="{StaticResource FSE_ErrorBrush}" Height="26" Cursor="Hand" Margin="0 -2 0 0" VerticalAlignment="Center"></commonControls:IconButton>
                                        <Grid Visibility="{Binding BuildProvider.IsTwineRSM,Converter={StaticResource BooleanToVisibilityInverseConverter}}">
                                            <StackPanel Orientation="Horizontal" Visibility="{Binding ElementName=logsPane,Path=(win:WindowsManagerHelper.IsDetached),Converter={StaticResource BooleanToVisibilityInverseConverter}}">
                                                <Rectangle Width="1" HorizontalAlignment="Center" Stroke="{StaticResource FSE_BorderBrush}" Margin="10 4"></Rectangle>
                                                <commonControls:ToggleIconButton x:Name="chkLogsViewer" Cursor="Hand" FontSize="{StaticResource FSE_SmallerFontSize}" Margin="5 0 0 0" UncheckedText="Open Log Viewer" CheckedText="Close Log Viewer" TextAlignment="Left" Height="24" Width="Auto" Checked="OnLogsChecked" Unchecked="OnLogsUnChecked" VerticalAlignment="Center" IsChecked="{Binding IsLogsOpened}" CheckedIcon="ChevronDoubleDown" UncheckedIcon="ChevronDoubleUp" />
                                            </StackPanel>
                                        </Grid>
                                        <StackPanel Orientation="Horizontal" Visibility="{Binding NotificationProvider.HasSnackbarItems,Converter={StaticResource BooleanToVisibilityConverter}}">
                                            <Rectangle Width="1" HorizontalAlignment="Center" Stroke="{StaticResource FSE_BorderBrush}" Margin="10 4"></Rectangle>
                                            <Grid Margin="5 2 0 0" Width="30">
                                                <material:PackIcon Kind="Email" Width="20" Height="20" HorizontalAlignment="Left" VerticalAlignment="Top" />

                                                <Grid Width="16" Height="16" Margin="0 0 3 3" HorizontalAlignment="Right" VerticalAlignment="Bottom">
                                                    <Ellipse StrokeThickness="1" Stroke="{StaticResource FSE_PrimaryForegroundBrush}">
                                                        <Ellipse.Fill>
                                                            <LinearGradientBrush>
                                                                <GradientStop Offset="0" Color="{StaticResource FSE_PrimaryBackgroundDarkColor}" />
                                                                <GradientStop Offset="1" Color="{StaticResource FSE_PrimaryBackgroundLightColor}" />
                                                            </LinearGradientBrush>
                                                        </Ellipse.Fill>
                                                    </Ellipse>
                                                    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding NotificationProvider.SnackbarItems.Count}" FontSize="8" />
                                                </Grid>
                                            </Grid>
                                        </StackPanel>
                                    </StackPanel>
                                </Grid>

                                <Grid Background="{StaticResource FSE_PrimaryBackgroundDarkBrush}">
                                    <Border>
                                        <panes:LogViewerPane x:Name="logsPane" win:WindowsManagerHelper.WindowTitle="Log Viewer" DataContext="{Binding LogViewerPaneVM}"  />
                                    </Border>

                                    <commonControls:IconButton 
                                        x:Name="btnDetachLogViewer"
                                        Click="BtnDetachLogViewer_Click"
                                        Command="{Binding WindowsManager.DetachToWindowCommand}" 
                                        CommandParameter="{Binding ElementName=logsPane}" 
                                        Visibility="{Binding ElementName=logsPane,Path=(win:WindowsManagerHelper.IsDetached),Converter={StaticResource BooleanToVisibilityInverseConverter}}"
                                        HorizontalAlignment="Right" VerticalAlignment="Top" Icon="OpenInNew" Width="24" Height="24" Padding="0" Margin="10" ToolTip="Open in separate window" Cursor="Hand"  />
                                </Grid>
                            </DockPanel>
                        </Border>
                    </Grid>
                </Grid>

                <Image IsHitTestVisible="False" Source="{StaticResource FSE_Shadow_Top}" VerticalAlignment="Top" Stretch="Fill" Height="10" Opacity="0.6" />

                <Grid x:Name="paneMask" Background="{StaticResource FSE_SemiTransparentBrush}" Visibility="{Binding IsConnectionPaneOpened,Converter={StaticResource BooleanToVisibilityConverter},FallbackValue=Collapsed}">
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="PreviewMouseUp">
                            <i:InvokeCommandAction Command="{Binding ToggleConnectionPaneCommand}" />
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                </Grid>

                <!--Right Panes-->
                <Border x:Name="paneConnection" BorderBrush="{StaticResource FSE_BorderBrush}" BorderThickness="1 0 0 0" Width="350" HorizontalAlignment="Right" Visibility="{Binding IsConnectionPaneOpened,Converter={StaticResource BooleanToVisibilityConverter}}">
                    <Border.Background>
                        <SolidColorBrush Color="{StaticResource FSE_PrimaryBackgroundDarkColor}" Opacity="0.8" />
                    </Border.Background>
                    <Border.Style>
                        <Style TargetType="Border">
                            <Setter Property="RenderTransform">
                                <Setter.Value>
                                    <TranslateTransform X="0" />
                                </Setter.Value>
                            </Setter>
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding IsConnectionPaneOpened}" Value="True">
                                    <DataTrigger.EnterActions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.X" To="0" Duration="00:00:0.2" />
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </DataTrigger.EnterActions>
                                    <DataTrigger.ExitActions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.X" To="450" Duration="00:00:0.2" />
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </DataTrigger.ExitActions>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Border.Style>
                    <Border.Effect>
                        <DropShadowEffect Direction="-180" Opacity="0.5" />
                    </Border.Effect>

                    <Border Padding="5">
                        <Border.Background>
                            <ImageBrush ImageSource="/Images/abstracts/abstract1.png" Stretch="UniformToFill" Opacity="0.2" />
                        </Border.Background>
                        <Grid>
                            <Grid Visibility="{Binding MachineProvider.IsConnected,Converter={StaticResource BooleanToVisibilityInverseConverter}}" >
                                <panes:MachineConnectionPane DataContext="{Binding ConnectionPaneVM}" />
                            </Grid>
                            <Grid Visibility="{Binding MachineProvider.IsConnected,Converter={StaticResource BooleanToVisibilityConverter}}" >
                                <panes:ConnectedMachinePane DataContext="{Binding ConnectedMachinePaneVM}" />
                            </Grid>
                        </Grid>
                    </Border>
                </Border>
                <!--Right Panes-->
            </Grid>

            <!--Top Bar-->
            <Grid Background="{StaticResource FSE_PrimaryBackgroundLightBrush}">

                <Polygon HorizontalAlignment="Right" Points="220,0 300,0 300,100 0,100" Width="350" Stretch="Fill">
                    <Polygon.Fill>
                        <ImageBrush Viewport="0 0 800 300" ViewportUnits="Absolute" ImageSource="/Images/abstracts/abstract1.png" Stretch="None" Opacity="0.6" />
                    </Polygon.Fill>
                </Polygon>

                <DockPanel>
                    <StackPanel DockPanel.Dock="Left" HorizontalAlignment="Left" Orientation="Horizontal">
                        <commonControls:IconButton Icon="ArrowBack" IsEnabled="{Binding NavigationManager.CanNavigateBack}" Command="{Binding NavigationManager.NavigateBackCommand}" Padding="20" Height="Auto" Width="90" />
                    </StackPanel>
                    <StackPanel DockPanel.Dock="Left" Orientation="Horizontal" VerticalAlignment="Center">
                        <StackPanel.Style>
                            <Style TargetType="StackPanel">
                                <Setter Property="Margin" Value="10 0 0 0"></Setter>
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding IsMenuOpened}" Value="True">
                                        <DataTrigger.EnterActions>
                                            <BeginStoryboard>
                                                <Storyboard>
                                                    <ThicknessAnimation Storyboard.TargetProperty="Margin" To="160 0 0 0" Duration="00:00:0.2"></ThicknessAnimation>
                                                </Storyboard>
                                            </BeginStoryboard>
                                        </DataTrigger.EnterActions>
                                        <DataTrigger.ExitActions>
                                            <BeginStoryboard>
                                                <Storyboard>
                                                    <ThicknessAnimation Storyboard.TargetProperty="Margin" To="10 0 0 0" Duration="00:00:0.2"></ThicknessAnimation>
                                                </Storyboard>
                                            </BeginStoryboard>
                                        </DataTrigger.ExitActions>
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </StackPanel.Style>
                        <Image Source="/Images/login_white.png" RenderOptions.BitmapScalingMode="Fant" VerticalAlignment="Center" Width="50" Height="50"></Image>
                        <StackPanel Margin="0 5 0 0">
                            <TextBlock FontSize="16" TextTrimming="CharacterEllipsis" MaxWidth="170" FontStyle="Italic" FontWeight="Bold" Margin="10 0 0 0" VerticalAlignment="Center" Text="{Binding AuthenticationProvider.CurrentUser.Contact.FullName}"></TextBlock>
                            <TextBlock FontSize="12" Foreground="{StaticResource FSE_GrayBrush}" TextTrimming="CharacterEllipsis" MaxWidth="170" FontStyle="Italic" Margin="10 5 0 0" VerticalAlignment="Center">
                                        <Run Text="{Binding AuthenticationProvider.CurrentUser.Organization.Name}"></Run>
                                        ,
                                        <Run Text="{Binding AuthenticationProvider.CurrentUser.FSERoles[0].Description}">
                                            <Run.ToolTip>
                                                <ItemsControl ItemsSource="{Binding AuthenticationProvider.CurrentUser.FSERoles}">
                                                    <ItemsControl.ItemTemplate>
                                                        <DataTemplate>
                                                            <StackPanel Orientation="Horizontal" Margin="2">
                                                                <material:PackIcon Kind="AccountKey" Width="16" Height="16" />
                                                                <TextBlock Margin="5 0 0 0" Text="{Binding Description}"></TextBlock>
                                                             </StackPanel>
                                                        </DataTemplate>
                                                    </ItemsControl.ItemTemplate>
                                                </ItemsControl>
                                            </Run.ToolTip>
                                        </Run>
                                        <Run>...</Run>
                                    </TextBlock>
                        </StackPanel>
                    </StackPanel>

                    <Grid DockPanel.Dock="Right" Margin="0 25 0 0">
                        <StackPanel Orientation="Horizontal">
                            <Grid Margin="0 0 40 0" Visibility="{Binding EventsProvider.HasActiveEvents,Converter={StaticResource BooleanToVisibilityConverter}}">
                                <Grid.ToolTip>
                                    <TextBlock>
                                        <Run Text="{Binding EventsProvider.ActiveEvents.Count,Mode=OneWay}"></Run>
                                        <Run>active machine events. Tap to see more details.</Run>
                                    </TextBlock>
                                </Grid.ToolTip>
                                <Button Command="{Binding NavigateToEventsCommand}" FocusVisualStyle="{x:Null}" Padding="0" Background="Transparent" BorderThickness="0">
                                    <Image Source="/Images/alarm_fill_dark.png" RenderOptions.BitmapScalingMode="Fant">

                                    </Image>
                                </Button>
                                <Grid Margin="0 15 -2 0" HorizontalAlignment="Right" VerticalAlignment="Top"  Width="16" Height="16">
                                    <Ellipse Fill="{StaticResource FSE_RedBrush}" Stroke="{StaticResource FSE_PrimaryForegroundBrush}">

                                    </Ellipse>
                                    <TextBlock Margin="0 1 0 0" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="{StaticResource FSE_SmallerFontSize}" Text="{Binding EventsProvider.ActiveEvents.Count}"></TextBlock>
                                </Grid>
                            </Grid>
                            <Grid>
                                <Button Margin="0 15 80 15" material:ButtonAssist.CornerRadius="15" IsEnabled="{Binding MachineProvider.IsBusy,Mode=OneWay,Converter={StaticResource BooleanInverseConverter}}" Command="{Binding ToggleConnectionPaneCommand}" Style="{StaticResource FSE_RaisedButton_Dark_Hover}" VerticalAlignment="Center">
                                    <StackPanel Orientation="Horizontal">
                                        <Grid>
                                            <Image Source="{StaticResource FSE_Machine_Small}" RenderOptions.BitmapScalingMode="Fant"></Image>
                                            <Ellipse Width="14" Height="14" Visibility="{Binding MachineProvider.IsConnected,Converter={StaticResource BooleanToVisibilityConverter}}" Stroke="#3A6A2D" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0 -4 -4 0" >
                                                <Ellipse.Fill>
                                                    <RadialGradientBrush>
                                                        <GradientStop Color="#26A326" Offset="1" />
                                                        <GradientStop Color="#65E932" Offset="0" />
                                                    </RadialGradientBrush>
                                                </Ellipse.Fill>
                                                <Ellipse.Style>
                                                    <Style TargetType="Ellipse">
                                                        <Style.Triggers>
                                                            <DataTrigger Binding="{Binding MachineProvider.IsConnected}" Value="True">
                                                                <DataTrigger.EnterActions>
                                                                    <BeginStoryboard Name="blink">
                                                                        <Storyboard>
                                                                            <DoubleAnimationUsingKeyFrames RepeatBehavior="Forever" Storyboard.TargetProperty="Opacity" FillBehavior="Stop">
                                                                                <DiscreteDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                                                                                <DiscreteDoubleKeyFrame KeyTime="00:00:0.5" Value="1" />
                                                                                <DiscreteDoubleKeyFrame KeyTime="00:00:1" Value="1" />
                                                                            </DoubleAnimationUsingKeyFrames>
                                                                        </Storyboard>
                                                                    </BeginStoryboard>
                                                                </DataTrigger.EnterActions>
                                                            </DataTrigger>
                                                        </Style.Triggers>
                                                    </Style>
                                                </Ellipse.Style>
                                            </Ellipse>
                                        </Grid>
                                        <TextBlock Margin="10 0 0 0" VerticalAlignment="Center">Machine Connection</TextBlock>
                                    </StackPanel>
                                </Button>

                                <Grid HorizontalAlignment="Right" Margin="0 0 25 0" ToolTip="{Binding MachineProvider.MachineOperator.Status,Converter={StaticResource EnumToDescriptionConverter}}">
                                    <Ellipse Width="42" Height="42" Stroke="{StaticResource FSE_PrimaryBackgroundLightBrush}" StrokeThickness="4">
                                        <Ellipse.Style>
                                            <Style TargetType="Ellipse">
                                                <Setter Property="Fill" Value="{StaticResource FSE_PrimaryBackgroundLighterBrush}"></Setter>
                                                <Style.Triggers>
                                                    <DataTrigger Binding="{Binding MachineProvider.IsConnected}" Value="True">
                                                        <Setter Property="Fill" Value="White"></Setter>
                                                    </DataTrigger>
                                                </Style.Triggers>
                                            </Style>
                                        </Ellipse.Style>
                                    </Ellipse>
                                    <Image Stretch="Fill" Margin="0 2 0 0" RenderOptions.BitmapScalingMode="Fant" Width="32" Height="32" VerticalAlignment="Center" Visibility="{Binding MachineProvider.IsConnected,Converter={StaticResource BooleanToVisibilityConverter}}"
                                            gif:ImageBehavior.EnableAnimation="True"
                                            gif:ImageBehavior.SpeedRatio="1">
                                        <Image.Style>
                                            <Style TargetType="Image">
                                                <Setter Property="gif:ImageBehavior.AnimatedSource" Value="{x:Null}"></Setter>
                                                <Style.Triggers>
                                                    <DataTrigger Binding="{Binding MachineProvider.MachineOperator.Status}" Value="{x:Static operations:MachineStatuses.Disconnected}">
                                                        <Setter Property="gif:ImageBehavior.AnimatedSource" Value="/Images/Statuses/machine_off_Anim.gif"></Setter>
                                                    </DataTrigger>
                                                    <DataTrigger Binding="{Binding MachineProvider.MachineOperator.Status}" Value="{x:Static operations:MachineStatuses.PowerUp}">
                                                        <Setter Property="gif:ImageBehavior.AnimatedSource" Value="/Images/Statuses/getting_ready_Anim.gif"></Setter>
                                                    </DataTrigger>
                                                    <DataTrigger Binding="{Binding MachineProvider.MachineOperator.Status}" Value="{x:Static operations:MachineStatuses.Standby}">
                                                        <Setter Property="gif:ImageBehavior.AnimatedSource" Value="/Images/Statuses/standby_Anim.gif"></Setter>
                                                    </DataTrigger>
                                                    <DataTrigger Binding="{Binding MachineProvider.MachineOperator.Status}" Value="{x:Static operations:MachineStatuses.ReadyToDye}">
                                                        <Setter Property="gif:ImageBehavior.AnimatedSource" Value="/Images/Statuses/Ready_Anim.gif"></Setter>
                                                    </DataTrigger>
                                                    <DataTrigger Binding="{Binding MachineProvider.MachineOperator.Status}" Value="{x:Static operations:MachineStatuses.GettingReady}">
                                                        <Setter Property="gif:ImageBehavior.AnimatedSource" Value="/Images/Statuses/getting_ready_Anim.gif"></Setter>
                                                    </DataTrigger>
                                                    <DataTrigger Binding="{Binding MachineProvider.MachineOperator.Status}" Value="{x:Static operations:MachineStatuses.Printing}">
                                                        <Setter Property="gif:ImageBehavior.AnimatedSource" Value="/Images/Statuses/dyeing_Anim.gif"></Setter>
                                                    </DataTrigger>
                                                    <DataTrigger Binding="{Binding MachineProvider.MachineOperator.Status}" Value="{x:Static operations:MachineStatuses.ShuttingDown}">
                                                        <Setter Property="gif:ImageBehavior.AnimatedSource" Value="/Images/Statuses/shutdown_icon_Anim.gif"></Setter>
                                                    </DataTrigger>
                                                    <DataTrigger Binding="{Binding MachineProvider.MachineOperator.Status}" Value="{x:Static operations:MachineStatuses.Error}">
                                                        <Setter Property="gif:ImageBehavior.AnimatedSource" Value="/Images/Statuses/error_Anim.gif"></Setter>
                                                    </DataTrigger>
                                                    <DataTrigger Binding="{Binding MachineProvider.MachineOperator.Status}" Value="{x:Static operations:MachineStatuses.Service}">
                                                        <Setter Property="gif:ImageBehavior.AnimatedSource" Value="/Images/Statuses/service_Anim.gif"></Setter>
                                                    </DataTrigger>
                                                    <DataTrigger Binding="{Binding MachineProvider.MachineOperator.Status}" Value="{x:Static operations:MachineStatuses.Upgrading}">
                                                        <Setter Property="gif:ImageBehavior.AnimatedSource" Value="/Images/Statuses/service_Anim.gif"></Setter>
                                                    </DataTrigger>
                                                    <DataTrigger Binding="{Binding MachineProvider.MachineOperator.Status}" Value="{x:Static operations:MachineStatuses.PowerDown}">
                                                        <Setter Property="gif:ImageBehavior.AnimatedSource" Value="/Images/Statuses/standby.png"></Setter>
                                                    </DataTrigger>
                                                </Style.Triggers>
                                            </Style>
                                        </Image.Style>
                                    </Image>
                                </Grid>
                            </Grid>
                        </StackPanel>
                    </Grid>
                    <Grid>
                        <Grid HorizontalAlignment="Center" >
                            <Image Source="{StaticResource FSE_Twine_Logo_Colored}" RenderOptions.BitmapScalingMode="Fant" Margin="5 5 5 10"></Image>
                            <TextBlock Visibility="{Binding BuildProvider.IsTwineRSM,Converter={StaticResource BooleanToVisibilityConverter}}" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0 0 -34 4" FontFamily="{StaticResource hand}" FontWeight="Bold" FontSize="20">
                                <Run Foreground="#E9E9E9">Studio</Run>
                            </TextBlock>
                        </Grid>
                    </Grid>
                </DockPanel>
            </Grid>
            <!--Top Bar-->

            <Grid x:Name="gridMask" Visibility="Hidden" Grid.RowSpan="2" Background="{StaticResource FSE_SemiTransparentBrush}" IsHitTestVisible="False">
                <Grid.Style>
                    <Style TargetType="Grid">
                        <Setter Property="Opacity" Value="0"></Setter>
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding IsMenuOpened}" Value="True">
                                <DataTrigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetProperty="Opacity" To="1" Duration="00:00:0.2" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </DataTrigger.EnterActions>
                                <DataTrigger.ExitActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetProperty="Opacity" To="0" Duration="00:00:0.2" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </DataTrigger.ExitActions>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Grid.Style>
            </Grid>
        </Grid>

        <!-- Side Menu-->
        <Grid HorizontalAlignment="Left" x:Name="gridMenu" Background="{StaticResource FSE_PrimaryBackgroundDarkBrush}">
            <Grid.Style>
                <Style TargetType="Grid">
                    <Setter Property="Width" Value="70"></Setter>
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsMenuOpened}" Value="True">
                            <DataTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetProperty="Width" To="300" Duration="00:00:0.2" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.EnterActions>
                            <DataTrigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetProperty="Width" To="70" Duration="00:00:0.2" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.ExitActions>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Grid.Style>
            <Grid.RowDefinitions>
                <RowDefinition Height="90"/>
                <RowDefinition Height="1*"/>
            </Grid.RowDefinitions>

            <Image x:Name="imgBack" Source="/Images/abstracts/abstract1.png" Grid.RowSpan="2" VerticalAlignment="Top" Stretch="UniformToFill" Opacity="0.6" Height="{Binding ElementName=gridMain,Path=ActualHeight}">
                <Image.Style>
                    <Style TargetType="Image">
                        <Setter Property="Effect">
                            <Setter.Value>
                                <BlurEffect Radius="0"></BlurEffect>
                            </Setter.Value>
                        </Setter>
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding IsMenuOpened}" Value="True">
                                <DataTrigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetProperty="Effect.Radius" To="20" Duration="00:00:0.2" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </DataTrigger.EnterActions>
                                <DataTrigger.ExitActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetProperty="Effect.Radius" To="0" Duration="00:00:0.2" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </DataTrigger.ExitActions>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Image.Style>
            </Image>

            <Path Grid.RowSpan="2" VerticalAlignment="Top" Height="500" Fill="{StaticResource FSE_PrimaryBackgroundLightBrush}">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="0,0" IsClosed="True">
                            <LineSegment x:Name="polyTopRight" Point="70,0" />
                            <LineSegment x:Name="polyBottomRight" Point="70,300" />
                            <LineSegment x:Name="polyBottomLeft" Point="0,100" />
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>

            <Grid Panel.ZIndex="100">
                <DockPanel>
                    <Image x:Name="imgHome" RenderTransformOrigin="0.5,0.5" Cursor="Hand" Source="{StaticResource FSE_Machines_Full}" Stretch="Uniform" RenderOptions.BitmapScalingMode="Fant" Margin="10">
                        <i:Interaction.Triggers>
                            <i:EventTrigger EventName="PreviewMouseUp">
                                <i:InvokeCommandAction Command="{Binding NavigateHomeCommand}" />
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
                        <Image.Style>
                            <Style TargetType="Image">
                                <Setter Property="RenderTransform">
                                    <Setter.Value>
                                        <ScaleTransform ScaleX="1" ScaleY="1" />
                                    </Setter.Value>
                                </Setter>
                                <Style.Triggers>
                                    <Trigger Property="IsMouseOver" Value="True">
                                        <Trigger.EnterActions>
                                            <BeginStoryboard>
                                                <Storyboard>
                                                    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" To="0.9" Duration="00:00:0.2" />
                                                    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" To="0.9" Duration="00:00:0.2" />
                                                </Storyboard>
                                            </BeginStoryboard>
                                        </Trigger.EnterActions>
                                        <Trigger.ExitActions>
                                            <BeginStoryboard>
                                                <Storyboard>
                                                    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" To="1" Duration="00:00:0.2" />
                                                    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" To="1" Duration="00:00:0.2" />
                                                </Storyboard>
                                            </BeginStoryboard>
                                        </Trigger.ExitActions>
                                    </Trigger>
                                </Style.Triggers>
                            </Style>
                        </Image.Style>
                    </Image>
                    <StackPanel VerticalAlignment="Center">
                        <TextBlock FontSize="{StaticResource FSE_LargerFontSize}" Text="{Binding BuildProvider.BuildName}"></TextBlock>
                        <TextBlock HorizontalAlignment="Center" Margin="0 2 0 0" Foreground="{StaticResource FSE_GrayBrush}" FontSize="{StaticResource FSE_SmallFontSize}">
                            <Run>v</Run><Run Text="{Binding ApplicationManager.Version,Mode=OneWay}"></Run>
                        </TextBlock>
                    </StackPanel>
                </DockPanel>

                <DockPanel Margin="25 0 0 -20" VerticalAlignment="Bottom" Visibility="{Binding ElementName=imgHome,Path=IsMouseOver,Converter={StaticResource BooleanToVisibilityConverter}}">
                    <material:PackIcon Kind="Home" />
                    <TextBlock Margin="5 0 0 0">Go To Dashboard...</TextBlock>
                </DockPanel>
            </Grid>

            <Grid Grid.Row="1">
                <DockPanel resolution:ResolutionHelper.HighResolutionMargin="0 50 0 0" resolution:ResolutionHelper.LowResolutionMargin="0 10 0 0">
                    <DockPanel.Style>
                        <Style TargetType="DockPanel">
                            <Setter Property="RenderTransform">
                                <Setter.Value>
                                    <TranslateTransform X="0" />
                                </Setter.Value>
                            </Setter>
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding IsMenuOpened}" Value="True">
                                    <DataTrigger.EnterActions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.X" To="-200" Duration="00:00:0.2" />
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </DataTrigger.EnterActions>
                                    <DataTrigger.ExitActions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.X" To="0" Duration="00:00:0.2" />
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </DataTrigger.ExitActions>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </DockPanel.Style>
                    <Grid DockPanel.Dock="Bottom">
                        <Grid Width="55" Height="55" Margin="0 10" resolution:ResolutionHelper.Mode="High">
                            <Ellipse Stroke="{StaticResource FSE_PrimaryForegroundBrush}" StrokeThickness="1"></Ellipse>
                            <Image Source="/Images/logout.png" RenderOptions.BitmapScalingMode="Fant" Width="35" Stretch="Uniform" />
                        </Grid>
                        <Grid Width="45" Height="45" Margin="0 5" resolution:ResolutionHelper.Mode="Low">
                            <Ellipse Stroke="{StaticResource FSE_PrimaryForegroundBrush}" StrokeThickness="1"></Ellipse>
                            <Image Source="/Images/logout.png" RenderOptions.BitmapScalingMode="Fant" Width="25" Stretch="Uniform" />
                        </Grid>
                    </Grid>
                    <ItemsControl ItemsSource="{Binding NavigationManager.MenuItems}">
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <Grid>
                                    <Grid Width="55" Height="55" Margin="0 10" resolution:ResolutionHelper.Mode="High">
                                        <Ellipse Stroke="{StaticResource FSE_PrimaryForegroundBrush}" StrokeThickness="1"></Ellipse>
                                        <Image Source="{Binding Image}" RenderOptions.BitmapScalingMode="Fant" Width="35" Stretch="Uniform" />
                                    </Grid>
                                    <Grid Width="45" Height="45" Margin="0 5" resolution:ResolutionHelper.Mode="Low">
                                        <Ellipse Stroke="{StaticResource FSE_PrimaryForegroundBrush}" StrokeThickness="1"></Ellipse>
                                        <Image Source="{Binding Image}" RenderOptions.BitmapScalingMode="Fant" Width="25" Stretch="Uniform" />
                                    </Grid>
                                </Grid>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                </DockPanel>

                <Border resolution:ResolutionHelper.HighResolutionMargin="0 -90 0 0" resolution:ResolutionHelper.LowResolutionMargin="0 -130 0 0">
                    <Border.Background>
                        <LinearGradientBrush Opacity="0.8" StartPoint="1,0" EndPoint="0,1">
                            <GradientStop Color="Black" Offset="0.5" />
                            <GradientStop Color="#3B000000" Offset="1" />
                        </LinearGradientBrush>
                    </Border.Background>
                    <Border.Style>
                        <Style TargetType="Border">
                            <Setter Property="Opacity" Value="0"></Setter>
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding IsMenuOpened}" Value="True">
                                    <DataTrigger.EnterActions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetProperty="Opacity" To="1" Duration="00:00:0.3" />
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </DataTrigger.EnterActions>
                                    <DataTrigger.ExitActions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetProperty="Opacity" To="0" Duration="00:00:0.3" />
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </DataTrigger.ExitActions>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Border.Style>

                    <DockPanel Margin="0 140 0 0">
                        <Grid DockPanel.Dock="Bottom">
                            <Border ToolTipService.BetweenShowDelay="1000" ToolTipService.InitialShowDelay="1000" material:RippleAssist.Feedback="White" Background="{StaticResource FSE_PrimaryBackgroundLightBrush}" Cursor="Hand">
                                <i:Interaction.Triggers>
                                    <i:EventTrigger EventName="PreviewMouseUp">
                                        <i:InvokeCommandAction Command="{Binding LogoutCommand}" />
                                    </i:EventTrigger>
                                </i:Interaction.Triggers>
                                <Border.ToolTip>
                                    <ToolTip FontFamily="{StaticResource flexo}" Background="#545454" Foreground="{StaticResource FSE_PrimaryForegroundBrush}" Placement="RelativePoint" PlacementRectangle="330 21 100 100">
                                        <TextBlock TextWrapping="Wrap">
                                            <Run>Sign out from</Run>
                                            <Run Text="{Binding BuildProvider.BuildName,Mode=OneWay}"></Run>
                                        </TextBlock>
                                    </ToolTip>
                                </Border.ToolTip>
                                <Border.Effect>
                                    <DropShadowEffect Direction="-90" ShadowDepth="0" Color="DimGray" BlurRadius="10" />
                                </Border.Effect>
                                <Border.Style>
                                    <Style TargetType="Border">
                                        <Setter Property="Opacity" Value="0"></Setter>
                                        <Style.Triggers>
                                            <Trigger Property="IsMouseOver" Value="True">
                                                <Setter Property="Opacity" Value="1"></Setter>
                                            </Trigger>
                                        </Style.Triggers>
                                    </Style>
                                </Border.Style>
                                <Grid>
                                    <Canvas HorizontalAlignment="Right" resolution:ResolutionHelper.Mode="High">
                                        <Polygon IsHitTestVisible="False" Fill="#545454" Points="0,0 20,20 20,55 0,75">

                                        </Polygon>
                                    </Canvas>
                                    <Canvas HorizontalAlignment="Right" resolution:ResolutionHelper.Mode="Low">
                                        <Polygon IsHitTestVisible="False" Fill="#545454" Points="0,0 15,15 15,40 0,55">

                                        </Polygon>
                                    </Canvas>
                                    <material:Ripple />
                                </Grid>
                            </Border>
                            <Grid>
                                <DockPanel IsHitTestVisible="False" resolution:ResolutionHelper.Mode="High">
                                    <Grid Width="55" Height="55" Margin="10 10" HorizontalAlignment="Left">
                                        <Image Source="/Images/logout.png" RenderOptions.BitmapScalingMode="Fant" Width="35" Stretch="Uniform" />
                                    </Grid>
                                    <TextBlock Margin="10 0 0 0" FontSize="{StaticResource FSE_LargeFontSize}" Text="Logout" VerticalAlignment="Center"></TextBlock>
                                </DockPanel>
                                <DockPanel IsHitTestVisible="False" resolution:ResolutionHelper.Mode="Low">
                                    <Grid Width="45" Height="45" Margin="10 5" HorizontalAlignment="Left">
                                        <Image Source="/Images/logout.png" RenderOptions.BitmapScalingMode="Fant" Width="25" Stretch="Uniform" />
                                    </Grid>
                                    <TextBlock Margin="10 0 0 0" FontSize="{StaticResource FSE_LargeFontSize}" Text="Logout" VerticalAlignment="Center"></TextBlock>
                                </DockPanel>
                            </Grid>
                        </Grid>
                        <ItemsControl ItemsSource="{Binding NavigationManager.MenuItems}">
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <Grid>
                                        <Border ToolTipService.IsEnabled="{Binding Description,Converter={StaticResource NullObjectToBooleanConverter}}" ToolTipService.BetweenShowDelay="1000" ToolTipService.InitialShowDelay="1000" material:RippleAssist.Feedback="White" Background="{StaticResource FSE_PrimaryBackgroundLightBrush}" Cursor="Hand">
                                            <i:Interaction.Triggers>
                                                <i:EventTrigger EventName="PreviewMouseUp">
                                                    <i:InvokeCommandAction Command="{Binding PressCommand}" />
                                                </i:EventTrigger>
                                            </i:Interaction.Triggers>
                                            <Border.ToolTip>
                                                <ToolTip FontFamily="{StaticResource flexo}" Background="#545454" Foreground="{StaticResource FSE_PrimaryForegroundBrush}" Placement="RelativePoint" PlacementRectangle="330 21 100 100">
                                                    <TextBlock Text="{Binding Description}" TextWrapping="Wrap"></TextBlock>
                                                </ToolTip>
                                            </Border.ToolTip>
                                            <Border.Effect>
                                                <DropShadowEffect Direction="-90" ShadowDepth="0" Color="DimGray" BlurRadius="10" />
                                            </Border.Effect>
                                            <Border.Style>
                                                <Style TargetType="Border">
                                                    <Setter Property="Opacity" Value="0"></Setter>
                                                    <Style.Triggers>
                                                        <Trigger Property="IsMouseOver" Value="True">
                                                            <Setter Property="Opacity" Value="1"></Setter>
                                                        </Trigger>
                                                    </Style.Triggers>
                                                </Style>
                                            </Border.Style>
                                            <Grid>
                                                <Canvas HorizontalAlignment="Right" resolution:ResolutionHelper.Mode="High">
                                                    <Polygon IsHitTestVisible="False" Fill="#545454" Points="0,0 20,20 20,55 0,75">

                                                    </Polygon>
                                                </Canvas>
                                                <Canvas HorizontalAlignment="Right" resolution:ResolutionHelper.Mode="Low">
                                                    <Polygon IsHitTestVisible="False" Fill="#545454" Points="0,0 15,15 15,40 0,55">

                                                    </Polygon>
                                                </Canvas>
                                                <material:Ripple />
                                            </Grid>
                                        </Border>
                                        <Grid>
                                            <DockPanel IsHitTestVisible="False" resolution:ResolutionHelper.Mode="High">
                                                <Grid Width="55" Height="55" Margin="10 10" HorizontalAlignment="Left">
                                                    <Image Source="{Binding Image}" RenderOptions.BitmapScalingMode="Fant" Width="35" Stretch="Uniform" />
                                                </Grid>
                                                <TextBlock IsHitTestVisible="False" Margin="10 0 0 0" FontSize="{StaticResource FSE_LargeFontSize}" Text="{Binding Name}" VerticalAlignment="Center"></TextBlock>
                                            </DockPanel>
                                            <DockPanel IsHitTestVisible="False" resolution:ResolutionHelper.Mode="Low">
                                                <Grid Width="45" Height="45" Margin="10 5" HorizontalAlignment="Left">
                                                    <Image Source="{Binding Image}" RenderOptions.BitmapScalingMode="Fant" Width="25" Stretch="Uniform" />
                                                </Grid>
                                                <TextBlock IsHitTestVisible="False" Margin="10 0 0 0" Text="{Binding Name}" VerticalAlignment="Center"></TextBlock>
                                            </DockPanel>
                                        </Grid>
                                    </Grid>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>
                    </DockPanel>
                </Border>
            </Grid>

            <Rectangle HorizontalAlignment="Right" Grid.RowSpan="2" StrokeThickness="1" Stroke="{StaticResource FSE_BorderBrush}" StrokeDashArray="5" Margin="0 90 0 0" />
        </Grid>
    </Grid>
</UserControl>