﻿<!-- **********************************************************************
* Copyright (C) 2016 by Savoir-faire Linux                                *
* Author: Jäger Nicolas<nicolas.jager@savoirfairelinux.com>               *
* Author: Traczyk Andreas<andreas.traczyk@savoirfairelinux.com>           *
*                                                                         *
* This program is free software; you can redistribute it and/or modify    *
* it under the terms of the GNU General Public License as published by    *
* the Free Software Foundation; either version 3 of the License, or       *
* (at your option) any later version.                                     *
*                                                                         *
* This program is distributed in the hope that it will be useful,         *
* but WITHOUT ANY WARRANTY; without even the implied warranty of          *
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the           *
* GNU General Public License for more details.                            *
*                                                                         *
* You should have received a copy of the GNU General Public License       *
* along with this program.  If not, see <http://www.gnu.org/licenses/> .  *
*********************************************************************** -->
<Page x:Class="RingClientUWP.Views.SmartPanel"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:RingClientUWP"
      xmlns:controls="using:RingClientUWP.Controls"
      xmlns:views="using:RingClientUWP.Views"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      NavigationCacheMode="Enabled"
      mc:Ignorable="d">

    <Page.Resources>
        <!-- converters -->
        <views:NewMessageBubleNotification x:Key="_NewMessageBubleNotification_" />
        <views:IncomingVisibility x:Key="_IncomingVisibility_" />
        <views:OutGoingVisibility x:Key="_OutGoingVisibility_" />
        <views:HasAnActiveCall x:Key="_HasAnActiveCall_" />
        <views:AccountTypeToSourceImage x:Key="_AccountTypeToSourceImage_" />
        <views:AccountSelectedToVisibility x:Key="_AccountSelectedToVisibility_" />
        <views:CollapseEmptyString x:Key="_CollapseEmptyString_" />
        <views:ContactStatusNotification x:Key="_ContactStatusNotification_" />
        <views:boolToVisibility x:Key="_boolToVisibility_" />
        <views:CallStatusToSpinnerVisibility x:Key="_CallStatusToSpinnerVisibility_" />
        <views:CallStatusForIncomingCallAnimatedEllipse x:Key="_CallStatusForIncomingCallAnimatedEllipse_" />
        <views:CallStatusForIncomingCallStaticEllipse x:Key="_CallStatusForIncomingCallStaticEllipse_" />

        <!-- template for contacts. -->
        <DataTemplate x:Key="ContactTemplate"
                      x:DataType="local:Contact">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="310"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="60"/>
                    <!-- use the height of _contactBar_ to make it visible or collapsed. -->
                    <RowDefinition x:Name="_contactBar_"
                                   Height="{x:Bind _contactBarHeight, Mode=OneWay}"/>
                </Grid.RowDefinitions>
                <Grid Grid.Row="0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="60"/>
                        <ColumnDefinition Width="*"
                                          MinWidth="200"/>
                    </Grid.ColumnDefinitions>
                    <Image x:Name="_XcontactAvatar_"
                           VerticalAlignment="Center"
                           HorizontalAlignment="Center"
                           Grid.Column="0"
                           Width="55"
                           Height="55"
                           Source="Assets\TESTS\contactAvatar.png"/>
                    <!-- visual notifications. -->
                    <Border x:Name="_visualNotificationVideoChat_"
                            Visibility="Collapsed"
                            Style="{StaticResource BorderStyle1}">
                        <TextBlock Text="&#xE8AA;"
                                   Style="{StaticResource TextSegoeStyle1}"/>
                        <Border.RenderTransform>
                            <TranslateTransform X="17" Y="-14"/>
                        </Border.RenderTransform>
                    </Border>
                    <Grid Grid.Column="1">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="30"/>
                            <RowDefinition Height="30"/>
                        </Grid.RowDefinitions>
                        <!-- name of the contact. -->
                        <TextBlock  x:Name="_contactName_"
                                    Grid.Row="0"
                                    Text="{x:Bind _name, Mode=OneWay}"
                                    TextTrimming="CharacterEllipsis">
                        </TextBlock>
                    </Grid>
                </Grid>
            </Grid>
        </DataTemplate>
        <!-- template for AccountListItems. -->
        <DataTemplate x:Key="AccountListItemsTemplate"
                      x:DataType="controls:AccountListItem">
            <Grid Margin="0,10">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="40"/>
                    <ColumnDefinition Width="280"/>
                </Grid.ColumnDefinitions>
                <Border Grid.Column="0"
                        Margin="5,0"
                        Style="{StaticResource BorderStyle3}">
                    <Image x:Name="_AccountTypeIcon_"
                           VerticalAlignment="Center"
                           HorizontalAlignment="Center"
                           Source="{x:Bind  _account.accountType_, Converter={StaticResource _AccountTypeToSourceImage_}, Mode=OneWay}"/>
                </Border>
                <Button x:Name="_editAccountMenuButton_"
                        HorizontalAlignment="Right"
                        VerticalAlignment="Top"
                        Content="&#xE104;"
                        FontFamily="Segoe MDL2 Assets"
                        Click="_editAccountMenuButton__Click"
                        FontSize="20"
                        Foreground="White"
                        Background="Transparent"
                        BorderThickness="0"
                        Padding="0,4,0,2"
                        Margin="0,0,12,0"
                        Width="28"
                        Visibility="{x:Bind _isSelected, Converter={StaticResource _AccountSelectedToVisibility_}, Mode=OneWay}"
                        Grid.Column="1">
                    <Button.RenderTransform>
                        <TranslateTransform Y="-10"/>
                    </Button.RenderTransform>
                </Button>
                <StackPanel Grid.Column="1">
                    <TextBlock x:Name="_accountName_"
                           Style="{StaticResource TextStyle5}"
                           Text="{x:Bind  _account.name_, Mode=OneWay}"/>
                    <TextBlock x:Name="_ringID_"
                               Grid.ColumnSpan="2"
                               Style="{StaticResource TextStyle6}"
                               Visibility="{x:Bind  _account.ringID_, Converter={StaticResource _CollapseEmptyString_}, Mode=OneWay}"
                               Text="{x:Bind  _account.ringID_, Mode=OneWay}"/>
                    <TextBlock x:Name="_sipUsername_"
                               Grid.ColumnSpan="2"
                               Visibility="{x:Bind  _account._sipUsername, Converter={StaticResource _CollapseEmptyString_}, Mode=OneWay}"
                               Style="{StaticResource TextStyle6}"
                               Text="{x:Bind  _account._sipUsername, Mode=OneWay}"/>
                </StackPanel>
            </Grid>
        </DataTemplate>
        <!-- template for smartpanelitems. -->
        <DataTemplate x:Key="SmartPanelItemsTemplate"
                      x:DataType="controls:SmartPanelItem">
            <Grid PointerReleased="Grid_PointerReleased"
                  PointerEntered="Grid_PointerEntered"
                  PointerExited="Grid_PointerExited"
                  PointerMoved="Grid_PointerMoved"
                  Visibility="{x:Bind  _showMe, Mode=OneWay}">
                <Grid.RowDefinitions>
                    <!-- row definition for the contact. -->
                    <RowDefinition Height="auto"/>
                    <!-- row definition for the incoming call bar. -->
                    <RowDefinition Height="auto"/>
                </Grid.RowDefinitions>
                <!-- the first rectangle helps to detect mouse overing-->
                <Rectangle Fill="Transparent"
                           Width="320"
                           Grid.Row="0"/>
                <!-- the two next rectangles offer a better visibility correlation between the call button and the
                     backgrounds. Using them, avoid some visual bugs -->
                <!-- the second rectangle controls the background for a selected item -->
                <Rectangle Fill="#3bc1d3"
                           Width="320"
                           Visibility="{x:Bind _isSelected, Converter={StaticResource _boolToVisibility_}, Mode=OneWay}"
                           Grid.Row="0"/>
                <!-- the thirs rectangle controls the background for an hovered item -->
                <Rectangle Fill="#ced9e1"
                           Width="320"
                           Visibility="{x:Bind _isHovered, Converter={StaticResource _boolToVisibility_}, Mode=OneWay}"
                           Grid.Row="0"/>
                <!-- curtain over item with contact not ready (e.g. lookup is in progress) -->
                <Rectangle Fill="White"
                           Width="320"
                           Grid.Row="0"
                           Canvas.ZIndex="2"
                           Opacity="0.6"
                           Visibility="{x:Bind _contact._contactStatus, Converter={StaticResource _ContactStatusNotification_}, Mode=OneWay}"/>
                <ProgressBar Canvas.ZIndex="3"
                             Visibility="{x:Bind _contact._contactStatus, Converter={StaticResource _ContactStatusNotification_}, Mode=OneWay}"
                             IsIndeterminate="True"/>
                <!-- contact. -->
                <Grid Grid.Row="0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="310"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="60"/>
                        <!-- use the height of _contactBar_ to make it visible or collapsed. -->
                        <RowDefinition x:Name="_contactBar_"
                                       Height="{x:Bind _contact._contactBarHeight, Mode=OneWay}"/>
                    </Grid.RowDefinitions>
                    <Grid Grid.Row="0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="60"/>
                            <ColumnDefinition Width="*"
                                              MinWidth="200"/>
                        </Grid.ColumnDefinitions>
                        <StackPanel Grid.Column="0">
                            <!-- so far, I haven't fond any way to make a nested animation, inside a datatemplate, starting with the begin method from the code.
                            I use a black magic workaround with two ellipses... -->
                            <Ellipse x:Name="_incomingCallAnimatedEllipse_"
                                Height="50"
                                     Visibility="{x:Bind _callStatus, Converter={StaticResource _CallStatusForIncomingCallAnimatedEllipse_}, Mode=OneWay}"
                                        Width="50"
                                        VerticalAlignment="Center"
                                        HorizontalAlignment="Center"
                                        Margin="5">
                                <Ellipse.Fill>
                                    <ImageBrush  x:Name="_contactAvatar2_"
                                            ImageSource="{x:Bind _contact._avatarImage, Mode=OneWay}"/>
                                </Ellipse.Fill>
                                <Ellipse.Triggers>
                                    <EventTrigger>
                                        <BeginStoryboard>
                                            <Storyboard x:Name="_toto_">
                                                <DoubleAnimation Storyboard.TargetName="_incomingCallAnimatedEllipse_"
                                                             Storyboard.TargetProperty="Opacity"
                                                             From="1"
                                                             AutoReverse="True"
                                                             RepeatBehavior="Forever"
                                                             To="0"
                                                             Duration="0:0:1"/>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </EventTrigger>
                                </Ellipse.Triggers>
                            </Ellipse>
                            <Ellipse Visibility="{x:Bind _callStatus, Converter={StaticResource _CallStatusForIncomingCallStaticEllipse_}, Mode=OneWay}"

                                Height="50"
                                        Width="50"
                                        VerticalAlignment="Center"
                                        HorizontalAlignment="Center"
                                        Margin="5">
                                <Ellipse.Fill>
                                    <ImageBrush  x:Name="_contactAvatar_"
                                            ImageSource="{x:Bind _contact._avatarImage, Mode=OneWay}"/>
                                </Ellipse.Fill>
                            </Ellipse>
                            <!-- visual notifications. -->
                            <!--<Border x:Name="_visualNotificationVideoChat_"
                                Visibility="Collapsed"
                                Style="{StaticResource BorderStyle1}">
                                <TextBlock Text="&#xE8AA;"
                                       Style="{StaticResource TextSegoeStyle1}"/>
                                <Border.RenderTransform>
                                    <TranslateTransform X="17" Y="-14"/>
                                </Border.RenderTransform>
                            </Border>-->
                            <Border x:Name="_visualNotificationNewMessage_"
                                    Visibility="{x:Bind _contact._unreadMessages, Converter={StaticResource _NewMessageBubleNotification_}, Mode=OneWay}"
                                    Style="{StaticResource BorderStyle2}">
                                <TextBlock Text="{x:Bind _contact._unreadMessages, Mode=OneWay}"
                                           Style="{StaticResource TextStyle3}"/>
                                <Border.RenderTransform>
                                    <TranslateTransform X="-17" Y="-58"/>
                                </Border.RenderTransform>
                            </Border>
                        </StackPanel>

                        <Grid Grid.Column="1">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="60"/>
                                <RowDefinition Height="30"/>
                            </Grid.RowDefinitions>
                            <StackPanel Grid.Row="0">
                                <!-- name of the contact. -->
                                <TextBlock  x:Name="_contactName_"
                                            Text="{x:Bind _contact._name, Mode=OneWay}"
                                            TextTrimming="CharacterEllipsis">
                                </TextBlock>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock  x:Name="_contactLastTime_"
                                                FontStyle="Italic"
                                                Foreground="#333333"
                                                MaxWidth="200"
                                                TextTrimming="CharacterEllipsis"
                                                FontSize="10"
                                                Text="{x:Bind _contact._lastTime, Mode=OneWay}"/>
                                    <ProgressBar Foreground="#333333"
                                                 HorizontalAlignment="Right"
                                                 Width="150"
                                                 Visibility="{x:Bind _callStatus, Converter={StaticResource _CallStatusToSpinnerVisibility_}, Mode=OneWay}"
                                                 IsIndeterminate="True"/>
                                </StackPanel>
                                <!-- call action buttons. -->
                                <!-- Style="{StaticResource roundButtonTemplate}" old style, keep it until refacto -->
                                <Button Grid.Row="0"
                                    Visibility="{x:Bind _isCallable, Converter={StaticResource _boolToVisibility_}, Mode=OneWay}"
                                    Click="_callContact__Click"
                                    VerticalAlignment="Bottom"
                                    HorizontalAlignment="Left"
                                    Style="{StaticResource ButtonStyleForCallBar}"
                                    FontFamily="Segoe MDL2 Assets"
                                    Content="&#xE116;"/>
                                <StackPanel Orientation="Horizontal"
                                            Visibility="Visible"
                                            Grid.Row="0"
                                            VerticalAlignment="Bottom"
                                            HorizontalAlignment="Right">
                                    <Button x:Name="_acceptIncomingCallBtn_"
                                            Click="_acceptIncomingCallBtn__Click"
                                            Visibility="{x:Bind _callStatus, Converter={StaticResource _IncomingVisibility_}, Mode=OneWay}"
                                            VerticalAlignment="Bottom"
                                            HorizontalAlignment="Center"
                                            Style="{StaticResource ButtonStyleForCallBar}"
                                            FontFamily="Segoe MDL2 Assets"
                                            Content="&#xE10B;"/>
                                    <Button x:Name="_rejectIncomingCallBtn_"
                                            Click="_rejectIncomingCallBtn__Click"
                                            Visibility="{x:Bind _callStatus, Converter={StaticResource _IncomingVisibility_}, Mode=OneWay}"
                                            VerticalAlignment="Bottom"
                                            HorizontalAlignment="Center"
                                            Style="{StaticResource ButtonStyleForCallBar}"
                                            FontFamily="Segoe MDL2 Assets"
                                            Content="&#xE10A;"/>
                                </StackPanel>
                                <Button x:Name="_cancelCallBtn_"
                                        Click="_cancelCallBtn__Click"
                                        Visibility="{x:Bind _callStatus, Converter={StaticResource _OutGoingVisibility_}, Mode=OneWay}"
                                        VerticalAlignment="Bottom"
                                        HorizontalAlignment="Right"
                                        Style="{StaticResource ButtonStyleForCallBar}"
                                        FontFamily="Segoe MDL2 Assets"
                                        Content="&#xE10A;"/>
                            </StackPanel>
                        </Grid>
                    </Grid>
                </Grid>
                <!-- old call bar.KEEP FOR DEBUG -->
                <!--<Grid Width="320"
                      Grid.Row="1"
                      HorizontalAlignment="Left"
                      Background="DarkGray">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="auto"/>
                        <RowDefinition Height="auto"/>
                    </Grid.RowDefinitions>

                    <TextBlock x:Name="_CallStatus_"
                           Grid.Row="0"
                           Foreground="White"
                           Text="{x:Bind _callStatus, Mode=OneWay}"
                           Visibility="{x:Bind _callStatus, Converter={StaticResource _HasAnActiveCall_}, Mode=OneWay}"
                           HorizontalAlignment="Center">
                    </TextBlock>
                    <StackPanel Orientation="Horizontal"
                                Visibility="Visible"
                                Grid.Row="1"
                                HorizontalAlignment="Center">
                        <Button x:Name="_acceptIncomingCallBtn_"
                            Click="_acceptIncomingCallBtn__Click"
                            Visibility="{x:Bind _callStatus, Converter={StaticResource _IncomingVisibility_}, Mode=OneWay}"
                            VerticalAlignment="Center"
                            HorizontalAlignment="Center"
                            Content="Accept"/>
                        <Button x:Name="_rejectIncomingCallBtn_"
                            Click="_rejectIncomingCallBtn__Click"
                            Visibility="{x:Bind _callStatus, Converter={StaticResource _IncomingVisibility_}, Mode=OneWay}"
                            VerticalAlignment="Center"
                            HorizontalAlignment="Center"
                            Content="Reject"/>
                        <Button x:Name="_cancelCallBtn_"
                            Click="_cancelCallBtn__Click"
                            Visibility="{x:Bind _callStatus, Converter={StaticResource _OutGoingVisibility_}, Mode=OneWay}"
                            VerticalAlignment="Center"
                            HorizontalAlignment="Center"
                            Content="Cancel"/>
                    </StackPanel>
                </Grid>-->
            </Grid>
        </DataTemplate>
    </Page.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <!-- where accounts and share menu drop down are. -->
            <RowDefinition Height="auto"/>
            <!-- where contacts and settings are. -->
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <!-- drop down menus. -->
        <Grid Background="#3bc1d3">
            <Grid.RowDefinitions>
                <!-- where the selected account is shown. -->
                <RowDefinition x:Name="_selectedAccountRow_"
                               Height="90"/>
                <!-- where the drop down menus are shown. -->
                <RowDefinition Height="auto"/>
            </Grid.RowDefinitions>
            <!-- selected account. -->
            <Grid Grid.Row="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition x:Name="_selectedAccountAvatarColumn_"
                                      Width="90"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Ellipse
                    x:Name="_selectedAccountAvatarContainer_"
                    Height="80"
                    Width="80"
                    Grid.Column="0"
                    Stroke="White"
                    StrokeThickness="3"
                    PointerEntered="_selectedAccountAvatarContainer__PointerEntered"
                    PointerExited="_selectedAccountAvatarContainer__PointerExited"
                    PointerReleased="_selectedAccountAvatarContainer__PointerReleased"
                    Margin="5">
                    <Ellipse.Fill>
                        <ImageBrush
                            x:Name="_selectedAccountAvatar_"
                            ImageSource="Assets\TESTS\contactAvatar.png"/>
                    </Ellipse.Fill>
                </Ellipse>
                <Ellipse
                    x:Name="_shaderPhotoboothIcon_"
                    Visibility="Collapsed"
                    Height="80"
                    Width="80"
                    Grid.Column="0"
                    IsHitTestVisible="False"
                    Fill="Black"
                    Opacity="0.3"
                    Margin="5">
                </Ellipse>
                <TextBlock x:Name="_photoboothIcon_"
                           Grid.Column="0"
                           Visibility="Collapsed"
                           IsHitTestVisible="False"
                           Style="{StaticResource TextSegoeStyle-Centered-40pt-white}"
                           Text="&#xE722;">
                </TextBlock>
                <StackPanel Grid.Column="1"
                            VerticalAlignment="Bottom">
                    <TextBlock x:Name="_selectedAccountName_"
                               Text="[TEXT MISSING]"
                               Margin="10,0,0,10"
                               TextTrimming="CharacterEllipsis"
                               Style="{StaticResource TextStyle2}"/>
                    <StackPanel Orientation="Horizontal">
                        <!--Content="&#xE0A1;-->
                        <Button x:Name="_smartGridButton_"
                                      VerticalAlignment="Bottom"
                                      Content="&#xe716;"
                                      Click="_smartGridButton__Clicked"
                                      Style="{StaticResource smartGridButtonStyle}"/>
                        <ToggleButton x:Name="_accountsMenuButton_"
                                      VerticalAlignment="Bottom"
                                      Content="&#xE168;"
                                      Checked="_accountsMenuButton__Checked"
                                      Unchecked="_accountsMenuButton__Unchecked"
                                      Style="{StaticResource ToggleButtonStyle1}"/>
                        <!-- _shareMenuButton_ -->
                        <ToggleButton x:Name="_shareMenuButton_"
                                      VerticalAlignment="Bottom"
                                      Checked="_shareMenuButton__Checked"
                                      Unchecked="_shareMenuButton__Unchecked"
                                      Style="{StaticResource ToggleButtonStyle1}">
                            <Image Source="Assets/qrCodeIcon.png"
                                   Stretch="Uniform"/>
                        </ToggleButton>
                        <!-- _devicesMenuButton_ -->
                        <ToggleButton x:Name="_devicesMenuButton_"
                                      VerticalAlignment="Bottom"
                                      Content="&#xE836;"
                                      Checked="_devicesMenuButton__Checked"
                                      Unchecked="_devicesMenuButton__Unchecked"
                                      Style="{StaticResource ToggleButtonStyle1}"/>
                        <!-- _settingsMenuButton_ -->
                        <ToggleButton x:Name="_settingsMenuButton_"
                                      VerticalAlignment="Bottom"
                                      Content="&#xE115;"
                                      Checked="_settingsMenu__Checked"
                                      Unchecked="_settingsMenu__Unchecked"
                                      Style="{StaticResource ToggleButtonStyle1}"/>
                    </StackPanel>
                </StackPanel>
            </Grid>

            <!--sub menus like the accounts list or the share menu are just below, technicaly they are nested inside the
            same row. To summon them we use the visibility of their own grid, by linking it to a toggle button-->




        </Grid>
        <!-- smartList and settings. -->
        <Grid Grid.Row="1"
              Background="#FFE4F1F9">
            <!-- accounts menu. -->
            <Grid x:Name="_accountsMenuGrid_"
                  Grid.Row="0"
                  Visibility="Collapsed"
                  Background="#3bc1d3">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="30"/>
                </Grid.RowDefinitions>
                <ScrollViewer x:Name="_accountsListScrollView_"
                              ScrollViewer.VerticalScrollBarVisibility="Auto"
                              ScrollViewer.VerticalScrollMode="Enabled">
                    <ListBox x:Name="_accountsList_"
                         Grid.Row="0"
                         SelectionChanged="_accountList__SelectionChanged"
                         Width="320"
                         ItemContainerStyle="{StaticResource contactsListBoxStyle}"
                         Background="#FFE4F1F9"
                         ItemTemplate="{StaticResource AccountListItemsTemplate}"/>
                </ScrollViewer>
                <StackPanel Orientation="Horizontal"
                            Grid.Row="1">
                    <!--Style="{StaticResource ButtonStyle6}"-->
                    <Button x:Name="_addAccountBtn_"
                            VerticalAlignment="Center"
                            HorizontalAlignment="Center"
                            Content="&#xE948;"
                            Click="_addAccountBtn__Click"
                            Style="{StaticResource ButtonStyle5}"/>
                    <!--Style="{StaticResource ButtonStyle6}"-->
                    <Button x:Name="_linkThisDeviceBtn_"
                            VerticalAlignment="Center"
                            HorizontalAlignment="Center"
                            Content="&#xEBD2;"
                            Click="_linkThisDeviceBtn__Click"
                            Style="{StaticResource ButtonStyle5}"/>
                </StackPanel>
            </Grid>
            <!-- account edition menu. -->
            <Grid x:Name="_accountEditionGrid_"
                  Grid.Row="0"
                  Visibility="Collapsed"
                  Background="#3bc1d3">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="30"/>
                </Grid.RowDefinitions>
                <ScrollViewer x:Name="_scrollViewerEditionMenu_"
                              Grid.Row="0">
                    <StackPanel Orientation="Vertical"
                                Padding="10,0"
                                Grid.Row="0"
                                Background="#FFE4F1F9">
                        <!-- alias sub menu. -->
                        <StackPanel Orientation="Horizontal"
                                    Margin="0,20">
                            <TextBlock Style="{StaticResource TextSegoeStyle-20pt-black}"
                                       Margin="0,0,10,0"
                                       Text="&#xE8EC;"/>
                            <TextBlock Text="Alias"/>
                        </StackPanel>
                        <Grid Margin="10,0,10,10">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="25"/>
                            </Grid.ColumnDefinitions>
                            <TextBox  x:Name="_accountAliasTextBoxEdition_"
                                      Grid.Column="0"
                                      TextChanged="_accountAliasTextBoxEdition__TextChanged"
                                      PlaceholderText="Enter alias"/>
                            <TextBlock x:Name="_accountAliasValidEdition_"
                                               Grid.Column="1"
                                               Padding="10,0"
                                               Style="{StaticResource TextSegoeStyle-20pt-green}"
                                               Visibility="Collapsed"
                                               Text="&#xE10B;"/>
                            <TextBlock x:Name="_accountAliasInvalidEdition_"
                                               Grid.Column="1"
                                               Padding="10,0"
                                               Style="{StaticResource TextSegoeStyle-20pt-red}"
                                               Text="&#xE10A;"/>
                        </Grid>
                        <!-- edition sub menu. -->
                        <StackPanel x:Name="_ringStackEdition_">
                            <!-- register account on blockachain -->
                            <StackPanel Orientation="Horizontal"
                                        Margin="0,20">
                                <TextBlock Style="{StaticResource TextSegoeStyle-20pt-black}"
                                           Margin="0,0,10,0"
                                           Text="&#xE167;"/>
                                <TextBlock Text="Register public username"/>
                            </StackPanel>
                            <ToggleSwitch x:Name="_RegisterStateEdition_"
                                      IsOn="True"
                                      Toggled="_RegisterStateEdition__Toggled"
                                      Margin="0,10"/>
                            <TextBlock x:Name="_whatWilHappenEdition_"
                                       Margin="0,10,0,0"
                                       Style="{StaticResource BodyTextBlockStyle}"
                                       Text="peoples will find you with your username"/>
                            <HyperlinkButton Content="Learn more"
                                             Margin="0,0,0,10"
                                             NavigateUri="http://ring.cx"/>
                            <Grid Margin="10">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="25"/>
                                </Grid.ColumnDefinitions>
                                <TextBox x:Name="_usernameTextBoxEdition_"
                                         Grid.Column="0"
                                         PlaceholderText="Enter your full name"
                                         KeyUp="_usernameTextBoxEdition__KeyUp"/>
                                <TextBlock x:Name="_usernameValidEdition_"
                                                   Grid.Column="1"
                                                   Padding="10,0"
                                                   Style="{StaticResource TextSegoeStyle-20pt-green}"
                                                   Visibility="Collapsed"
                                                   Text="&#xE10B;"/>
                                <TextBlock x:Name="_usernameInvalidEdition_"
                                                   Grid.Column="1"
                                                   Padding="10,0"
                                                   Style="{StaticResource TextSegoeStyle-20pt-red}"
                                                   Text="&#xE10A;"/>
                            </Grid>
                            <Button x:Name="_registerOnBlockchainEdition_"
                                Content="register"
                                Visibility="Collapsed"
                                Click="_registerOnBlockchainEdition__Click"/>
                            <StackPanel Orientation="Horizontal" Margin="10">
                                <TextBlock Style="{StaticResource TextSegoeStyle-20pt-black}"
                                       Text="&#xE15E;"/>
                                <TextBlock Text="UPnP" Margin="10"/>
                            </StackPanel>
                            <ToggleSwitch x:Name="_upnpState_"
                                      Margin="20,10"/>
                        </StackPanel>
                        <!-- SIP parameters. -->
                        <StackPanel x:Name="_sipAccountStackEdition_"
                                Visibility="Collapsed">
                            <StackPanel Orientation="Horizontal"
                                    Margin="10">
                                <TextBlock Style="{StaticResource TextSegoeStyle-20pt-black}"
                                       Text="&#xE717;"/>
                                <TextBlock Text="SIP account parameters"
                                       Margin="10"/>
                            </StackPanel>
                            <TextBox  x:Name="_sipHostnameEdition_"
                                  Margin="10"
                                  PlaceholderText="Enter hostname"/>
                            <TextBox  x:Name="_sipUsernameEditionTextBox_"
                                  Margin="10"
                                  PlaceholderText="Enter username"/>
                            <PasswordBox x:Name="_sipPasswordEdition_"
                                     Margin="10"
                                     PlaceholderText="Enter password"/>
                        </StackPanel>
                        <!-- delete account sub menu. -->
                        <StackPanel Orientation="Horizontal" Margin="10">
                            <TextBlock Style="{StaticResource TextSegoeStyle-20pt-black}"
                                   Text="&#xE74D;"/>
                            <TextBlock Text="Delete account" Margin="10"/>
                        </StackPanel>
                        <ToggleSwitch x:Name="_deleteAccountEdition_"
                                      Toggled="_deleteAccountEdition__Toggled"
                                      Margin="20,10"/>
                        <TextBlock x:Name="_whatWilHappendeleteRingAccountEdition_"
                                   Margin="0,10,0,0"
                                   Style="{StaticResource BodyTextBlockStyle}"
                                   Foreground="Red"
                                   Visibility="Collapsed"
                                   Text="Your account will be deleted from this computer. Other devices are not affected. Your public registration can never be deleted."/>
                        <TextBlock x:Name="_whatWilHappendeleteSipAccountEdition_"
                                   Margin="0,10,0,0"
                                   Style="{StaticResource BodyTextBlockStyle}"
                                   Foreground="Red"
                                   Visibility="Collapsed"
                                   Text="Your account will be deleted from this computer."/>
                        <HyperlinkButton x:Name="_learnMoreDeleteAccountEdition_"
                                         Content="Learn more"
                                         Visibility="Collapsed"
                                         Margin="0,0,0,10"
                                         NavigateUri="http://ring.cx"/>
                    </StackPanel>
                </ScrollViewer>
                <!-- buttons yes/no to accept the modification. -->
                <Grid Grid.Row="1">
                    <StackPanel Orientation="Horizontal"
                                HorizontalAlignment="Center">
                        <Button x:Name="_acceptAccountModification_"
                                Grid.Row="1"
                                VerticalAlignment="Center"
                                HorizontalAlignment="Center"
                                Content="&#xE081;"
                                Click="_acceptAccountModification__Click"
                                Style="{StaticResource ButtonStyle5}"/>
                        <Button x:Name="_cancelAccountModification_"
                                Grid.Row="1"
                                VerticalAlignment="Center"
                                HorizontalAlignment="Center"
                                Content="&#xE106;"
                                Click="_cancelAccountModification__Click"
                                Style="{StaticResource ButtonStyle5}"/>
                    </StackPanel>
                </Grid>
            </Grid>
            <!-- account creation menu. -->
            <Grid x:Name="_accountCreationMenuGrid_"
                  Grid.Row="0"
                  Visibility="Collapsed"
                  Background="#3bc1d3">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="30"/>
                </Grid.RowDefinitions>
                <ScrollViewer Grid.Row="0">
                    <StackPanel Orientation="Vertical"
                                Padding="10,0"
                                Background="#FFE4F1F9">
                        <!-- alias sub menu. -->
                        <StackPanel Orientation="Horizontal"
                                    Margin="0,20">
                            <TextBlock Style="{StaticResource TextSegoeStyle-20pt-black}"
                                       Margin="0,0,10,0"
                                       Text="&#xE8EC;"/>
                            <TextBlock Text="Alias"/>
                        </StackPanel>
                        <Grid Margin="10,0,10,10">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="25"/>
                            </Grid.ColumnDefinitions>
                            <TextBox  x:Name="_accountAliasTextBox_"
                                      Grid.Column="0"
                                      TextChanged="_accountAliasTextBox__TextChanged"
                                      PlaceholderText="Enter alias"/>
                            <TextBlock x:Name="_accountAliasValid_"
                                               Grid.Column="1"
                                               Padding="10,0"
                                               Style="{StaticResource TextSegoeStyle-20pt-green}"
                                               Visibility="Collapsed"
                                               Text="&#xE10B;"/>
                            <TextBlock x:Name="_accountAliasInvalid_"
                                               Grid.Column="1"
                                               Padding="10,0"
                                               Style="{StaticResource TextSegoeStyle-20pt-red}"
                                               Text="&#xE10A;"/>
                        </Grid>

                        <!-- account type chooser -->
                        <StackPanel Orientation="Horizontal"
                                    Margin="0,20">
                            <TextBlock Style="{StaticResource TextSegoeStyle-20pt-black}"
                                       Margin="0,0,10,0"
                                       Text="&#xE168;"/>
                            <TextBlock Text="Account type"/>
                        </StackPanel>
                        <ComboBox x:Name="_accountTypeComboBox_"
                                      SelectedIndex="0"
                                      Margin="10,10,0,0"
                                      SelectionChanged="_accountTypeComboBox__SelectionChanged"
                                      VerticalAlignment="Center"
                                      Width="195">
                            <ComboBoxItem Content="Ring"/>
                            <ComboBoxItem Content="Sip"/>
                        </ComboBox>
                        <!-- RING account. -->
                        <StackPanel x:Name="_ringAccountCreationStack_"
                                    Margin="0,20"
                                    Visibility="Visible">
                            <!-- register account on blockachain -->
                            <StackPanel Orientation="Horizontal"
                                        Margin="0,20">
                                <TextBlock Style="{StaticResource TextSegoeStyle-20pt-black}"
                                           Margin="0,0,10,0"
                                           Text="&#xE167;"/>
                                <TextBlock Text="Register public username"/>
                            </StackPanel>
                            <ToggleSwitch x:Name="_RegisterState_"
                                      IsOn="True"
                                      Toggled="_RegisterState__Toggled"
                                      Margin="0,10"/>
                            <TextBlock x:Name="_whatWilHappen_"
                                       Margin="0,10,0,0"
                                       Style="{StaticResource BodyTextBlockStyle}"
                                       Text="peoples will find you with your username"/>
                            <HyperlinkButton Content="Learn more"
                                             Margin="0,0,0,10"
                                             NavigateUri="http://ring.cx"/>
                            <Grid Margin="10">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="25"/>
                                </Grid.ColumnDefinitions>
                                <TextBox x:Name="_usernameTextBox_"
                                         Grid.Column="0"
                                         PlaceholderText="Enter your full name"
                                         KeyUp="_usernameTextBox__KeyUp"
                                                 />
                                <TextBlock x:Name="_usernameValid_"
                                                   Grid.Column="1"
                                                   Padding="10,0"
                                                   Style="{StaticResource TextSegoeStyle-20pt-green}"
                                                   Visibility="Collapsed"
                                                   Text="&#xE10B;"/>
                                <TextBlock x:Name="_usernameInvalid_"
                                                   Grid.Column="1"
                                                   Padding="10,0"
                                                   Style="{StaticResource TextSegoeStyle-20pt-red}"
                                                   Text="&#xE10A;"/>
                            </Grid>
                            <!-- password sub menu. -->
                            <StackPanel Orientation="Horizontal"
                                        Margin="0,20">
                                <TextBlock Style="{StaticResource TextSegoeStyle-20pt-black}"
                                        Margin="0,0,10,0"
                                       Text="&#xE8D7;"/>
                                <TextBlock Text="Password"/>
                            </StackPanel>
                            <Grid Margin="10">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="25"/>
                                </Grid.ColumnDefinitions>
                                <PasswordBox x:Name="_ringPasswordBoxAccountCreation_"
                                             Grid.Column="0"
                                             PasswordChanged="_passwordBoxAccountCreationCheck__PasswordChanged"
                                             PlaceholderText="Enter password"/>
                                <TextBlock x:Name="_passwordValid_"
                                           Grid.Column="1"
                                           Padding="10,0"
                                           Style="{StaticResource TextSegoeStyle-20pt-green}"
                                           Visibility="Collapsed"
                                           Text="&#xE10B;"/>
                                <TextBlock x:Name="_passwordInvalid_"
                                           Grid.Column="1"
                                           Padding="10,0"
                                           Style="{StaticResource TextSegoeStyle-20pt-red}"
                                           Text="&#xE10A;"/>
                            </Grid>
                            <Grid Margin="10">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="25"/>
                                </Grid.ColumnDefinitions>
                                <PasswordBox x:Name="_ringPasswordBoxAccountCreationCheck_"
                                             Grid.Column="0"
                                             PasswordChanged="_passwordBoxAccountCreationCheck__PasswordChanged"
                                             PlaceholderText="Repeat password"/>
                                <TextBlock x:Name="_passwordCheckValid_"
                                           Grid.Column="1"
                                           Padding="10,0"
                                           Style="{StaticResource TextSegoeStyle-20pt-green}"
                                           Visibility="Collapsed"
                                           Text="&#xE10B;"/>
                                <TextBlock x:Name="_passwordCheckInvalid_"
                                           Grid.Column="1"
                                           Padding="10,0"
                                           Style="{StaticResource TextSegoeStyle-20pt-red}"
                                           Text="&#xE10A;"/>
                            </Grid>
                            <!-- upnp sub menu. -->
                            <StackPanel Orientation="Horizontal"
                                        Margin="0,20">
                                <TextBlock Style="{StaticResource TextSegoeStyle-20pt-black}"
                                            Margin="0,0,10,0"
                                           Text="&#xE15E;"/>
                                <TextBlock Text="UPnP"/>
                            </StackPanel>
                            <ToggleSwitch x:Name="_upnpStateAccountCreation_"
                                          IsOn="True"
                                          Margin="0,10"/>
                        </StackPanel>
                        <!-- SIP account. -->
                        <StackPanel x:Name="_sipAccountCreationStack_"
                                    Visibility="Collapsed">
                            <StackPanel Orientation="Horizontal"
                                        Margin="10">
                                <TextBlock Style="{StaticResource TextSegoeStyle-20pt-black}"
                                           Text="&#xE717;"/>
                                <TextBlock Text="SIP account parameters"
                                           Margin="10"/>
                            </StackPanel>
                            <TextBox  x:Name="_sipHostnameTextBox_"
                                      Margin="10"
                                      PlaceholderText="Enter hostname"/>
                            <TextBox  x:Name="_sipUsernameTextBox_"
                                      Margin="10"
                                      PlaceholderText="Enter username"/>
                            <PasswordBox x:Name="_sipPasswordBoxAccountCreation_"
                                         Margin="10"
                                         PlaceholderText="Enter password"/>
                        </StackPanel>
                    </StackPanel>
                </ScrollViewer>

                <!-- buttons yes/no to create the new account. -->
                <Grid Grid.Row="1">
                    <StackPanel Orientation="Horizontal"
                                HorizontalAlignment="Center">
                        <Button x:Name="_createAccountYes_"
                                Grid.Row="1"
                                VerticalAlignment="Center"
                                HorizontalAlignment="Center"
                                Content="&#xE081;"
                                Click="_createAccountYes__Click"
                                Style="{StaticResource ButtonStyle5}"/>
                        <Button x:Name="_createAccountNo_"
                                Grid.Row="1"
                                VerticalAlignment="Center"
                                HorizontalAlignment="Center"
                                Content="&#xE106;"
                                Click="_createAccountNo__Click"
                                Style="{StaticResource ButtonStyle5}"/>
                    </StackPanel>
                </Grid>
            </Grid>
            <!-- add account menu. -->
            <Grid x:Name="_accountAddMenuGrid_"
                  Visibility="Collapsed"
                  Grid.Row="0"
                  Background="#3bc1d3">
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="30"/>
                </Grid.RowDefinitions>
                <StackPanel Orientation="Horizontal"
                            Background="#FFE4F1F9"
                            Padding="10"
                                    Grid.Row="0">
                    <Button x:Name="_step1button_"
                            Click="_step1button__Click"
                            Content="Step 1"/>
                    <TextBlock Text=">"/>
                    <Button x:Name="_step2button_"
                            Click="_step2button__Click"
                            Content="Step 2"/>
                </StackPanel>
                <!-- step 1. -->
                <StackPanel x:Name="_step1Menu_"
                                    Background="#FFE4F1F9"
                                    Padding="10"
                                    Grid.Row="1">
                    <TextBlock Text="To link this device to a Ring account, you'll first need to generate a PIN from Ring on a device hosting the account."
                                        TextWrapping="Wrap"
                                        TextAlignment="Justify"/>
                    <HyperlinkButton Content="Learn more"
                                                Margin="0,0,0,10"
                                                NavigateUri="http://ring.cx"/>
                </StackPanel>
                <!-- step 2. -->
                <StackPanel x:Name="_step2Menu_"
                                    Background="#FFE4F1F9"
                                    Visibility="Collapsed"
                                    Grid.Row="1">
                    <TextBox  x:Name="_PINTextBox_"
                                    Margin="10"
                                    GotFocus="_PINTextBox__GotFocus"
                                    PlaceholderText="Enter PIN"/>
                    <PasswordBox x:Name="_ArchivePassword_"
                                    Margin="10"
                                    PlaceholderText="Enter your password"/>
                    <TextBlock x:Name="_response_"
                               Foreground="Red"
                               HorizontalAlignment="Center"
                               Text=""/>
                </StackPanel>
                <!-- buttons next step and yes/no to add the account. -->
                <Grid Grid.Row="2">
                    <StackPanel Orientation="Horizontal"
                                        Padding="10,0"
                                        HorizontalAlignment="Center">
                        <Button x:Name="_nextstep_"
                                        VerticalAlignment="Center"
                                        HorizontalAlignment="Center"
                                        Content="&#xE081;"
                                        Click="_step2button__Click"
                                        Style="{StaticResource ButtonStyle2}"/>
                        <Button x:Name="_addAccountYes_"
                                        VerticalAlignment="Center"
                                        HorizontalAlignment="Center"
                                        Visibility="Collapsed"
                                        Content="&#xE081;"
                                        Click="_addAccountYes__Click"
                                        Style="{StaticResource ButtonStyle5}"/>
                        <Button x:Name="_addAccountNo_"
                                        VerticalAlignment="Center"
                                        HorizontalAlignment="Center"
                                        Visibility="Collapsed"
                                        Content="&#xE106;"
                                        Click="_addAccountNo__Click"
                                        Style="{StaticResource ButtonStyle5}"/>
                    </StackPanel>
                </Grid>
            </Grid>
            <!-- share menu. -->
            <Grid x:Name="_shareMenuGrid_"
                  Grid.Row="0"
                  Visibility="Collapsed"
                  Background="#3bc1d3">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="30"/>
                </Grid.RowDefinitions>
                <Grid Background="#FFE4F1F9">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="auto"/>
                        <RowDefinition Height="auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Grid Background="white"
                          Margin="10"
                          MaxHeight="140"
                          Grid.Row="0"
                          MaxWidth="140"
                          Padding="5">
                        <Image x:Name="_selectedAccountQrCode_"
                           Width="200"
                           Margin="5"
                           Grid.Row="0"
                           Stretch="None"
                           Height="200"/>
                    </Grid>
                    <TextBlock x:Name="_ringId_"
                               Padding="1"
                               Style="{StaticResource TextStyle4}"
                               Text=""
                               Grid.Row="1"
                               IsTextSelectionEnabled="True"
                               HorizontalAlignment="Center"/>
                </Grid>
                <Button x:Name="_shareMenuDone_"
                        Grid.Row="1"
                        VerticalAlignment="Center"
                        HorizontalAlignment="Center"
                        Content="&#xE081;"
                        Click="_shareMenuDone__Click"
                        Style="{StaticResource ButtonStyle6}"/>
            </Grid>
            <!-- devices menu. -->
            <Grid x:Name="_devicesMenuGrid_"
                  Grid.Row="0"
                  Visibility="Collapsed"
                  Background="#3bc1d3">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="30"/>
                </Grid.RowDefinitions>
                <Grid Background="#FFE4F1F9">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="auto"/>
                        <RowDefinition Height="auto"/>
                        <RowDefinition Height="auto"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="auto"/>
                        <RowDefinition Height="auto"/>
                    </Grid.RowDefinitions>
                    <!-- about this device -->
                    <StackPanel Orientation="Horizontal"
                                    Grid.Row="0"
                                    Margin="10,20">
                        <TextBlock Style="{StaticResource TextSegoeStyle-20pt-black}"
                                       Margin="0,0,10,0"
                                       Text="&#xE211;"/>
                        <TextBlock Text="Your device ID"/>
                    </StackPanel>
                    <TextBlock x:Name="_deviceId_"
                               Margin="10"
                               Text="[TEXT_MISSING]"
                               TextTrimming="CharacterEllipsis"
                               FontSize="12"
                               Grid.Row="1"
                               IsTextSelectionEnabled="True"
                               HorizontalAlignment="Center"/>
                    <!-- about linked devices -->
                    <StackPanel Orientation="Horizontal"
                                    Grid.Row="2"
                                    Margin="10,20">
                        <TextBlock Style="{StaticResource TextSegoeStyle-20pt-black}"
                                       Margin="0,0,10,0"
                                       Text="&#xEBD2;"/>
                        <TextBlock Text="other linked devices"/>
                    </StackPanel>
                    <TextBlock x:Name="_waitingDevicesList_"
                               Text="waiting for devices list..."
                               Grid.Row="3"
                               IsTextSelectionEnabled="True"
                               HorizontalAlignment="Center"/>
                    <ListBox x:Name="_devicesIdList_"
                             Visibility="Collapsed"
                             Padding="10,0"
                             Background="#FFE4F1F9"
                             Grid.Row="3"/>
                </Grid>
                <!-- button to add device. -->
                <Button x:Name="_addDevice_"
                        Grid.Row="1"
                        VerticalAlignment="Center"
                        HorizontalAlignment="Center"
                        Content="&#xE948;"
                        Click="_addDevice__Click"
                        Style="{StaticResource ButtonStyle6}"/>
            </Grid>
            <!-- add device (pin generator) menu. -->
            <Grid x:Name="_addingDeviceGrid_"
                  Grid.Row="0"
                  Visibility="Collapsed"
                  Background="#3bc1d3">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="30"/>
                </Grid.RowDefinitions>
                <Grid Background="#FFE4F1F9">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="auto"/>
                        <RowDefinition Height="auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <TextBlock VerticalAlignment="Center"
                                       Text="PIN generator"
                               HorizontalAlignment="Center"
                               Grid.Row="0"
                                       Margin="10,10,0,10"/>
                    <PasswordBox x:Name="_passwordForPinGenerator_"
                                 Margin="10"
                                 Grid.Row="1"
                                 PlaceholderText="Enter your password"/>
                </Grid>
                <!-- buttons yes/no to generate a PIN. -->
                <Grid Grid.Row="1">
                    <StackPanel Orientation="Horizontal"
                                HorizontalAlignment="Center">
                        <Button x:Name="_pinGeneratorYes_"
                                Grid.Row="1"
                                VerticalAlignment="Center"
                                HorizontalAlignment="Center"
                                Content="&#xE081;"
                                Click="_pinGeneratorYes__Click"
                                Style="{StaticResource ButtonStyle5}"/>
                        <Button x:Name="_pinGeneratorNo_"
                                Grid.Row="1"
                                VerticalAlignment="Center"
                                HorizontalAlignment="Center"
                                Content="&#xE106;"
                                Click="_pinGeneratorNo__Click"
                                Style="{StaticResource ButtonStyle5}"/>
                    </StackPanel>
                </Grid>
            </Grid>
            <!-- waiting for a PIN. -->
            <Grid x:Name="_waitingForPin_"
                Grid.Row="0"
                Visibility="Collapsed"
                Background="#3bc1d3">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="30"/>
                </Grid.RowDefinitions>
                <Grid Background="#FFE4F1F9">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <TextBlock x:Name="_waitingAndResult_"
                               VerticalAlignment="Center"
                               Text="Exporting account on the Ring..."
                               HorizontalAlignment="Center"
                               Grid.Row="0"
                               Margin="10,10,0,10"/>
                </Grid>
                <Grid Grid.Row="1">
                    <StackPanel Orientation="Horizontal"
                                HorizontalAlignment="Center">
                        <Button x:Name="_closePin_"
                                Grid.Row="1"
                                VerticalAlignment="Center"
                                HorizontalAlignment="Center"
                                Content="&#xE081;"
                                Click="_closePin__Click"
                                Style="{StaticResource ButtonStyle5}"/>
                    </StackPanel>
                </Grid>
            </Grid>
            <!-- contacts + calls => smartpanelitems. -->
            <Grid x:Name="_smartGrid_"
                  Grid.Row="0">
                <Grid.RowDefinitions>
                    <RowDefinition x:Name="_rowRingTxtBx_"
                                   Height="40"/>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <Border     x:Name="BackgroundElement"
                                Grid.Column="0"
                                Background="White"
                                Margin="6"
                                Opacity="1"
                                Grid.ColumnSpan="2">
                    </Border>
                    <TextBox    x:Name="_ringTxtBx_"
                                Grid.Column="0"
                                VerticalAlignment="Center"
                                BorderThickness="0"
                                HorizontalAlignment="Stretch"
                                Padding="4"
                                Margin="6"
                                Foreground="Black"
                                Background="White"
                                TextWrapping="Wrap"
                                KeyDown="_ringTxtBx__KeyDown"
                                KeyUp="_ringTxtBx__KeyUp"
                                Text="">
                    </TextBox>
                    <Button     x:Name="_addButton_"
                                Background="Transparent"
                                Grid.Column="1"
                                FontFamily="Segoe MDL2 Assets"
                                Foreground="#3bc1d3"
                                Content=" &#xE1E2;"
                                Click="_ringTxtBx__Click"
                                BorderThickness="0"
                                Visibility="Visible"
                                IsTabStop="False"
                                FontSize="20"
                                Width="38"
                                Margin="6"
                                Padding="4,4,8,4"
                                VerticalAlignment="Stretch">
                        <Button.RenderTransform>
                            <TranslateTransform X="0"/>
                        </Button.RenderTransform>
                    </Button>
                </Grid>
                <ListBox    x:Name="_smartList_"
                            Grid.Row="2"
                            Background="Transparent"
                            Margin="0"
                            SelectionChanged="_smartList__SelectionChanged"
                            Padding="0"
                            ScrollViewer.HorizontalScrollBarVisibility="Auto"
                            ScrollViewer.HorizontalScrollMode="Disabled"
                            MaxWidth="320"
                            ItemContainerStyle="{StaticResource contactsListBoxStyle}"
                            ItemTemplate="{StaticResource SmartPanelItemsTemplate}"/>
            </Grid>
            <!-- settings. -->
            <Grid x:Name="_settingsMenu_"
                  Grid.Row="0"
                  Visibility="Collapsed"
                  Background="#FFE4F1F9">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <ScrollViewer
                    ScrollViewer.VerticalScrollBarVisibility="Auto">
                    <Grid x:Name="_videoSettings_"
                      Grid.Row="0">
                        <StackPanel Margin="10">
                            <TextBlock Text="Video Device"
                                   Margin="10"/>
                            <ComboBox x:Name="_videoDeviceComboBox_"
                                  Margin="10"
                                  SelectionChanged="_videoDeviceComboBox__SelectionChanged">
                            </ComboBox>
                            <TextBlock Text="Video Resolution" Margin="10"/>
                            <ComboBox x:Name="_videoResolutionComboBox_"
                                  Margin="10"
                                  SelectionChanged="_videoResolutionComboBox__SelectionChanged">
                            </ComboBox>
                            <TextBlock Text="Video Rate" Margin="10"/>
                            <ComboBox x:Name="_videoRateComboBox_"
                                  Margin="10"
                                  SelectionChanged="_videoRateComboBox__SelectionChanged">
                            </ComboBox>
                        </StackPanel>
                    </Grid>
                </ScrollViewer>
            </Grid>
        </Grid>
    </Grid>

</Page>