EEMS/Module/DashBoard/Controls/DeviceInfoPlot.xaml

<UserControl x:Class="DashBoard.Controls.DeviceInfoPlot"
             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:local="clr-namespace:DashBoard.Controls"
             mc:Ignorable="d" 
             x:Name="This"
             d:DesignHeight="450" d:DesignWidth="800">
    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/UICommon;component/Resources.xaml"/>
            </ResourceDictionary.MergedDictionaries>
            <local:NumberBrushConverter x:Key="BurshConvert"/>
            <local:NumberEnableConverter x:Key="EnableConvert"/>
        </ResourceDictionary>
    </UserControl.Resources>
    <Grid>
        <Border BorderBrush="{StaticResource DarkBorderColor}" Background="#f2f2f2" BorderThickness="1" Width="380" MinHeight="200" Margin="8" CornerRadius="8">
            <Grid Margin="12,8">
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="8"/>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="auto"/>
                </Grid.RowDefinitions>

                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="auto"/>
                        <ColumnDefinition Width="16"/>
                        <ColumnDefinition/>
                        <ColumnDefinition Width="16"/>
                        <ColumnDefinition Width="auto"/>
                    </Grid.ColumnDefinitions>

                    <TextBlock VerticalAlignment="Center" HorizontalAlignment="Left" Text="{Binding ElementName=This, Path=DeviceInfo.DeviceName}" FontSize="14" FontWeight="Bold"/>

                    <Border Grid.ColumnSpan="5" VerticalAlignment="Center" HorizontalAlignment="Center" MinWidth="100" Background="{StaticResource ThemeColor}" CornerRadius="12">
                        <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Text="{Binding ElementName=This, Path=DeviceData.DeviceStatus}" Foreground="White" Margin="8,4"/>
                    </Border>

                    <Button Grid.Column="4" HorizontalAlignment="Right" VerticalAlignment="Center" BorderThickness="0" Background="Transparent"
                            IsEnabled="{Binding ElementName=This, Path=DeviceData.AlarmCount, Converter={StaticResource EnableConvert}}"
                            Command="{Binding ElementName=This, Path=AlarmCommand}" CommandParameter="{Binding ElementName=This, Path=DeviceData}">
                        <Border Grid.Column="4" Background="{Binding ElementName=This, Path=DeviceData.AlarmCount, Converter={StaticResource BurshConvert}}" CornerRadius="8" >
                            <StackPanel Orientation="Horizontal" Margin="8,4">
                                <Image Source="{StaticResource Icon_Bell}" VerticalAlignment="Center" Height="16"/>
                                <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Text="{Binding ElementName=This, Path=DeviceData.AlarmCount}" Foreground="White" Margin="4,0"/>
                            </StackPanel>
                        </Border>
                    </Button>
                </Grid>

                <Grid Grid.Row="2">

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="auto"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="auto"/>
                    </Grid.ColumnDefinitions>
                    <ItemsControl ItemsSource="{Binding ElementName=This, Path=DeviceData.OtherInfo}">
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="72"/>
                                        <ColumnDefinition Width="16"/>
                                        <ColumnDefinition />
                                    </Grid.ColumnDefinitions>
                                    <TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding Key}"></TextBlock>
                                    <TextBlock Grid.Row="0" Grid.Column="1" VerticalAlignment="Top" HorizontalAlignment="Center">:</TextBlock>
                                    <TextBlock Grid.Row="0" Grid.Column="2"  Text="{Binding Value}" TextWrapping="Wrap"/>
                                </Grid>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>

                    <ItemsControl Grid.Column="2" ItemsSource="{Binding ElementName=This, Path=DeviceData.RecipeInfo.RecipeInfo}">
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="72"/>
                                        <ColumnDefinition Width="16"/>
                                        <ColumnDefinition />
                                    </Grid.ColumnDefinitions>
                                    <TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding Key}"></TextBlock>
                                    <TextBlock Grid.Row="0" Grid.Column="1" VerticalAlignment="Top" HorizontalAlignment="Center">:</TextBlock>
                                    <TextBlock Grid.Row="0" Grid.Column="2"  Text="{Binding Value}" TextWrapping="Wrap"/>
                                </Grid>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                </Grid>

                <Grid Grid.Row="4">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="auto"/>
                        <RowDefinition Height="6"/>
                        <RowDefinition Height="auto"/>
                        <RowDefinition Height="12"/>
                        <RowDefinition Height="auto"/>
                        <RowDefinition Height="6"/>
                        <RowDefinition Height="auto"/>
                    </Grid.RowDefinitions>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="auto"/>
                            <ColumnDefinition/>
                            <ColumnDefinition Width="auto"/>
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="{Binding ElementName=This, Path=DeviceData.RecipeInfo.CurrentStepName}"></TextBlock>
                        <TextBlock Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Center">>> Next Step >></TextBlock>
                        <TextBlock Grid.Column="2" Text="{Binding ElementName=This, Path=DeviceData.RecipeInfo.NextStepName}"></TextBlock>
                    </Grid>
                    <Grid Grid.Row="2">
                        <ProgressBar Height="16" Style="{StaticResource ThemeProgressBar}" 
                                     Value="{Binding ElementName=This, Path=DeviceData.RecipeInfo.CurrentStepRemainTime}" 
                                     Maximum="{Binding ElementName=This, Path=DeviceData.RecipeInfo.CurrentStepTotalTime}"/>
                        <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">
                             <Run Text="{Binding ElementName=This, Path=DeviceData.RecipeInfo.CurrentStepRemainTime}"></Run>
                             <Run> / </Run>
                             <Run Text="{Binding ElementName=This, Path=DeviceData.RecipeInfo.CurrentStepTotalTime}"></Run>
                             <Run> (seconds) </Run>
                        </TextBlock>
                    </Grid>

                    <TextBlock Grid.Row="4">Total Recipe Time</TextBlock>
                    <Grid Grid.Row="6">
                        <ProgressBar Height="16" Style="{StaticResource ThemeProgressBar}" 
                                     Value="{Binding ElementName=This, Path=DeviceData.RecipeInfo.TotalRemainTime}" 
                                     Maximum="{Binding ElementName=This, Path=DeviceData.RecipeInfo.TotalTime}"/>
                        <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">
                              <Run Text="{Binding ElementName=This, Path=DeviceData.RecipeInfo.TotalRemainTime}"></Run>
                              <Run> / </Run>
                              <Run Text="{Binding ElementName=This, Path=DeviceData.RecipeInfo.TotalTime}"></Run>
                              <Run> (seconds) </Run>
                        </TextBlock>
                    </Grid>
                </Grid>
            </Grid>
        </Border>
    </Grid>
</UserControl>