livia-test/Astroke/Views/Controls/AStrokeRoiSummaryControl.xaml

<UserControl x:Class="Astroke.Views.Controls.AStrokeRoiSummaryControl"
             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:liviaControls="clr-namespace:Livia.Views.Controls;assembly=Livia"
             xmlns:viewModels="clr-namespace:Astroke.ViewModels"
             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
             mc:Ignorable="d"
             d:Background="{StaticResource PrimaryColorBrush}"
             d:DataContext="{d:DesignInstance Type=viewModels:AStrokeRoiSummaryControlViewModel}"
             d:DesignHeight="450"
             d:DesignWidth="800">

    <Grid Margin="10"
          Visibility="{Binding Visible, Converter={StaticResource BooleanToVisibilityConverter}}">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <liviaControls:RoiSummaryControl Grid.Row="0"
                                         DataContext="{Binding }" />

        <StackPanel Grid.Row="1"
                    Orientation="Vertical">
            <Rectangle Height="1"
                       Margin="35, 0, 60, 20"
                       Fill="{StaticResource PrimaryTextColorBrush}" />
            <UniformGrid Rows="1"
                         Margin="45, 0, 70, 10"
                         VerticalAlignment="Bottom">
                <Grid Margin="0, 0, 20, 0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"
                                          MaxWidth="200" />
                    </Grid.ColumnDefinitions>
                    <Border Background="{StaticResource  PrimaryColorLightBrush}"
                            CornerRadius="8">
                        <WrapPanel Orientation="Vertical"
                                   Margin="10"
                                   HorizontalAlignment="Center">
                            <TextBlock Style="{StaticResource MaterialDesignBody1TextBlock}"
                                       TextAlignment="Center"
                                       Text="{Binding Ratio1, StringFormat=N2}"
                                       Foreground="{StaticResource HighlightTextColorBrush}" />
                            <StackPanel Orientation="Horizontal"
                                        HorizontalAlignment="Center">
                                <Ellipse Fill="#ff69b4"
                                         VerticalAlignment="Center"
                                         Height="8"
                                         Width="8" />
                                <TextBlock Style="{StaticResource MaterialDesignBody1TextBlock}"
                                           Text="/"
                                           VerticalAlignment="Center"
                                           Margin="3, 0, 3, 3"
                                           TextAlignment="Center"
                                           Foreground="{StaticResource PrimaryTextColorBrush}" />
                                <Ellipse Fill="#0000ff"
                                         VerticalAlignment="Center"
                                         Height="8"
                                         Width="8" />
                            </StackPanel>
                        </WrapPanel>

                    </Border>
                </Grid>
                <Grid Margin="20, 0, 0, 0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="9999*"
                                          MaxWidth="200" />
                    </Grid.ColumnDefinitions>
                    <Border Grid.Column="1"
                            Background="{StaticResource  PrimaryColorLightBrush}"
                            CornerRadius="8">
                        <WrapPanel Orientation="Vertical"
                                   Margin="10"
                                   HorizontalAlignment="Center">
                            <TextBlock Style="{StaticResource MaterialDesignBody1TextBlock}"
                                       TextAlignment="Center"
                                       Text="{Binding Ratio2, StringFormat={}{0:N2}%}"
                                       Foreground="{StaticResource HighlightTextColorBrush}" />

                            <StackPanel Orientation="Horizontal"
                                        HorizontalAlignment="Center">
                                <Ellipse Fill="#ff69b4"
                                         VerticalAlignment="Center"
                                         Height="8"
                                         Width="8" />
                                <TextBlock Style="{StaticResource MaterialDesignBody1TextBlock}"
                                           Text="/("
                                           VerticalAlignment="Center"
                                           Margin="3, 0, 3, 3"
                                           TextAlignment="Center"
                                           Foreground="{StaticResource PrimaryTextColorBrush}" />
                                <Ellipse Fill="#0000ff"
                                         VerticalAlignment="Center"
                                         Height="8"
                                         Width="8" />
                                <TextBlock Style="{StaticResource MaterialDesignBody1TextBlock}"
                                           Text="+"
                                           VerticalAlignment="Center"
                                           Margin="3, 0, 3, 3"
                                           TextAlignment="Center"
                                           Foreground="{StaticResource PrimaryTextColorBrush}" />
                                <Ellipse Fill="#ff69b4"
                                         VerticalAlignment="Center"
                                         Height="8"
                                         Width="8" />
                                <TextBlock Style="{StaticResource MaterialDesignBody1TextBlock}"
                                           Text=")"
                                           VerticalAlignment="Center"
                                           Margin="3, 0, 3, 3"
                                           TextAlignment="Center"
                                           Foreground="{StaticResource PrimaryTextColorBrush}" />
                            </StackPanel>
                        </WrapPanel>

                    </Border>
                </Grid>
            </UniformGrid>
            <Border BorderBrush="{StaticResource PrimaryTextColorBrush}"
                    BorderThickness="1"
                    Visibility="{Binding ShowDiagnosis, Converter={StaticResource BooleanToVisibilityConverter}}"
                    Margin="45, 0, 70, 10"
                    CornerRadius="8">
                <StackPanel Orientation="Horizontal"
                            HorizontalAlignment="Center">
                    <materialDesign:PackIcon Kind="AlertCircleOutline"
                                             VerticalAlignment="Center"
                                             Width="16"
                                             Height="16"
                                             Foreground="{StaticResource IscColorBrush}" />
                    <TextBlock Style="{StaticResource MaterialDesignBody1TextBlock}"
                               Margin="5"
                               VerticalAlignment="Center"
                               Foreground="{StaticResource IscColorBrush}"
                               Text="{StaticResource AstrokeDiagnosis1}" />
                    <TextBlock Style="{StaticResource MaterialDesignBody1TextBlock}"
                               Margin="5"
                               Foreground="{StaticResource HighlightTextColorBrush}"
                               Text="{StaticResource AstrokeDiagnosis2}" />
                </StackPanel>
            </Border>
        </StackPanel>
    </Grid>

</UserControl>