desktop-edge-win/DesktopEdge/IdentityDetails.xaml

<UserControl x:Class="ZitiDesktopEdge.IdentityDetails"
             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:ZitiDesktopEdge"
             mc:Ignorable="d" 
             x:Name="IdentityArea"
             d:DesignHeight="500" d:DesignWidth="350">
    <Grid>
        <Canvas>
            <Rectangle Name="Arrow" HorizontalAlignment="Center" Height="20" Fill="White" Width="20" Canvas.Left="185" ClipToBounds="True" Canvas.Bottom="-10">
                <Rectangle.LayoutTransform>
                    <RotateTransform Angle="-45"/>
                </Rectangle.LayoutTransform>
            </Rectangle>
        </Canvas>
        <Rectangle x:Name="MainCanvas" Margin="10,10,10,10" Fill="White" RadiusY="10" RadiusX="10"></Rectangle>

        <Grid Margin="20,20,20,-20" MaxWidth="350">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <StackPanel Grid.Column="0" Orientation="Vertical" HorizontalAlignment="Stretch" Margin="10,10,10,10">
                <Grid Margin="0,0,0,10">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="40"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="40"/>
                    </Grid.ColumnDefinitions>
                    <local:Toggler x:Name="IdDetailToggle" Grid.Column="0" HorizontalAlignment="Left" OnToggled="IdToggle"></local:Toggler>
                    <TextBlock x:Name="IdDetailName" MaxWidth="220" Grid.Column="1" TextTrimming="CharacterEllipsis" HorizontalAlignment="Center" FontSize="14" FontWeight="Bold" FontFamily="pack://application:,,,/Assets/Fonts/#Open Sans" Foreground="#0F0F23" VerticalAlignment="Center" TextWrapping="NoWrap" />
                        <Image Grid.Column="2" Cursor="Hand" Source="/Assets/Images/x.png" Width="20" Height="20" Margin="0,0,0,0" HorizontalAlignment="Right" MouseUp="HideMenu"></Image>
                </Grid>
                <Rectangle HorizontalAlignment="Stretch" Height="1" Fill="#7d8faf" Opacity="0.2"></Rectangle>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="30"></RowDefinition>
                        <RowDefinition Height="30"></RowDefinition>
                        <RowDefinition Height="30"></RowDefinition>
                        <RowDefinition Height="30"></RowDefinition>
                        <RowDefinition Height="40"></RowDefinition>
                        <RowDefinition x:Name="ServiceRow" Height="160"></RowDefinition>
                        <RowDefinition Height="40"></RowDefinition>
                        <RowDefinition Height="0"></RowDefinition>
                    </Grid.RowDefinitions>
                    <local:MenuEditItem x:Name="IdentityName" Grid.Column="0" Grid.Row="0" HorizontalAlignment="Stretch" Label="Name" IsLocked="True"></local:MenuEditItem>
                    <local:MenuEditItem x:Name="IdentityNetwork" Grid.Column="0" Grid.Row="1" HorizontalAlignment="Stretch" Label="Network" IsLocked="True"></local:MenuEditItem>
                    <local:MenuEditItem x:Name="IdentityStatus" Grid.Column="0" Grid.Row="2" HorizontalAlignment="Stretch" Label="Status" IsLocked="True"></local:MenuEditItem>
                    <local:MenuEditItem x:Name="IdentityEnrollment" Grid.Column="0" Grid.Row="3" HorizontalAlignment="Stretch" Label="Enrollment Status" IsLocked="True"></local:MenuEditItem>
                    <Label Name="ServiceTitle" Content="SERVICES" Grid.Column="0" Grid.Row="4" Foreground="Gray" Padding="0,10,0,10" FontWeight="SemiBold" />
                    <ScrollViewer Name="MainDetailScroll" Grid.Column="0" MaxHeight="160" Grid.Row="5" VerticalScrollBarVisibility="Auto" CanContentScroll="True">
                        <StackPanel Name="ServiceList" Orientation="Vertical"></StackPanel>
                    </ScrollViewer>
                    <Label Name="ForgetIdentityButton" Grid.Column="0" Grid.Row="6" Padding="0,10,0,10" Margin="0,0,0,0" Content="Forget This Identity" Cursor="Hand" Foreground="#F4044D" HorizontalAlignment="Center" Mouse.MouseUp="ForgetIdentity"></Label>
                    <Image Name="ForgetIdentityImage" Visibility="Collapsed" Source="/Assets/Images/identity.png" Grid.Column="0" Grid.Row="7" Height="80" Width="80" Opacity="0.3" HorizontalAlignment="Stretch"></Image>
                </Grid>
            </StackPanel>
        </Grid>

        <Grid x:Name="ConfirmView" Visibility="Collapsed" Width="400">
            <Rectangle RadiusX="10" RadiusY="10">
                <Rectangle.Fill>
                    <SolidColorBrush Color="Black"/>
                </Rectangle.Fill>
            </Rectangle>
            <Canvas>
                <Rectangle Name="ConfirmArrow" HorizontalAlignment="Center" Height="20" Fill="Black" Width="20" Canvas.Left="185" ClipToBounds="True" Canvas.Bottom="-10">
                    <Rectangle.LayoutTransform>
                        <RotateTransform Angle="-45"/>
                    </Rectangle.LayoutTransform>
                </Rectangle>
            </Canvas>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="200"></ColumnDefinition>
                </Grid.ColumnDefinitions>
            </Grid>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"></RowDefinition>
                    <RowDefinition Height="60"></RowDefinition>
                    <RowDefinition Height="80"></RowDefinition>
                    <RowDefinition Height="30"></RowDefinition>
                    <RowDefinition Height="30"></RowDefinition>
                    <RowDefinition Height="*"></RowDefinition>
                </Grid.RowDefinitions>
                <Label Name="ErrorTitle" Foreground="White" Content="Confirm Forget" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="24" FontFamily="pack://application:,,,/Assets/Fonts/#Open Sans"/>
                <TextBlock TextWrapping="WrapWithOverflow" Foreground="LightGray" Padding="30" Text="If you delete this identity you will no longer have access to the resources that it grants you." Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Center" TextAlignment="Center" FontSize="14" FontFamily="pack://application:,,,/Assets/Fonts/#Open Sans"/>
                <Grid Grid.Row="4">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="1*"></ColumnDefinition>
                        <ColumnDefinition Width="1*"></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <Button x:Name="CancelConfirmButton" Grid.Column="0" Margin="40,0,20,0" Cursor="Hand" BorderThickness="0" Foreground="#FFFFFF" Background="#0068F9" Content="Close" Click="CancelConfirmButton_Click" FontFamily="pack://application:,,,/Assets/Fonts/#Open Sans">
                        <Button.Resources>
                            <Style TargetType="Border">
                                <Setter Property="CornerRadius" Value="5"/>
                            </Style>
                        </Button.Resources>
                    </Button>
                    <Button x:Name="ConfirmButton" Grid.Column="1" Margin="20,0,40,0" Cursor="Hand" BorderThickness="0" Foreground="#FFFFFF" Background="#F4044D" Content="Confirm" Click="ConfirmButton_Click" FontFamily="pack://application:,,,/Assets/Fonts/#Open Sans">
                        <Button.Resources>
                            <Style TargetType="Border">
                                <Setter Property="CornerRadius" Value="5"/>
                            </Style>
                        </Button.Resources>
                    </Button>
                </Grid>
            </Grid>
        </Grid>
    </Grid>
</UserControl>