Added ConnectionFailedMessage, Placeholder for Username,Chat,ChatsList

PolyChat/MainPage.xaml

@@ -19,34 +19,36 @@
                 <RowDefinition Height="*"/>
             </Grid.RowDefinitions>
             <!-- CONNECTION HEADER -->
-            <StackPanel HorizontalAlignment="Stretch">
+            <StackPanel HorizontalAlignment="Stretch" Spacing="8" Margin="0 0 0 8">
-                <Grid HorizontalAlignment="Stretch" VerticalAlignment="Center" Margin="0 0 0 8">
-                    <Grid.ColumnDefinitions>
-                        <ColumnDefinition Width="*"/>
-                        <ColumnDefinition Width="56"/>
-                    </Grid.ColumnDefinitions>
-                    <TextBlock x:Name="textUsername" Text="No Name" VerticalAlignment="Center"/>
-                    <Button Grid.Column="1" Click="OnOpenEditUsernameDialog" Content="Edit" HorizontalAlignment="Stretch"/>
-                </Grid>
-                <Grid>
-                    <Grid.ColumnDefinitions>
-                        <ColumnDefinition Width="*"/>
-                        <ColumnDefinition Width="auto"/>
-                    </Grid.ColumnDefinitions>
-                    <TextBlock Margin="0 0 8 0" Text="Connect to" Foreground="{ThemeResource SystemColorDisabledTextColor}"/>
-                    <TextBlock x:Name="ipAddress" Grid.Column="1"/>
-                </Grid>
-                <Border BorderThickness="1" BorderBrush="{ThemeResource AppBarBorderThemeBrush}" Margin="0 8"/>
                 <Grid HorizontalAlignment="Stretch" VerticalAlignment="Center">
                     <Grid.ColumnDefinitions>
                         <ColumnDefinition Width="*"/>
                         <ColumnDefinition Width="56"/>
                     </Grid.ColumnDefinitions>
-                    <TextBlock Text="My Chats" VerticalAlignment="Center"/>
+                    <TextBlock x:Name="textUsername" VerticalAlignment="Center"/>
+                    <TextBlock x:Name="textNoUsername" Text="No Name" Foreground="{ThemeResource SystemColorDisabledTextColor}" VerticalAlignment="Center"/>
+                    <Button Grid.Column="1" Click="OnOpenEditUsernameDialog" Content="Edit" HorizontalAlignment="Stretch"/>
+                </Grid>
+                <Grid Margin="0 8 0 0">
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="*"/>
+                        <ColumnDefinition Width="auto"/>
+                    </Grid.ColumnDefinitions>
+                    <TextBlock Text="Connect to" Foreground="{ThemeResource SystemColorDisabledTextColor}"/>
+                    <TextBlock x:Name="ipAddress" Grid.Column="1"/>
+                </Grid>
+                <Border BorderThickness="1" BorderBrush="{ThemeResource AppBarBorderThemeBrush}"/>
+                <Grid HorizontalAlignment="Stretch" VerticalAlignment="Center">
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="*"/>
+                        <ColumnDefinition Width="56"/>
+                    </Grid.ColumnDefinitions>
+                    <TextBlock Text="My Chats" VerticalAlignment="Center" FontSize="20"/>
                     <Button Grid.Column="1" Click="OnOpenNewChatDialog" Content="New" HorizontalAlignment="Stretch"/>
                 </Grid>
             </StackPanel>
             <!-- CHATS LIST -->
+            <TextBlock x:Name="textNoChats" Grid.Row="1" Text="No open Chats" Foreground="{ThemeResource SystemColorDisabledTextColor}" Margin="0 32 0 0" HorizontalAlignment="Center"/>
             <ScrollViewer Grid.Row="1" HorizontalAlignment="Stretch" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Hidden">
                 <ListView x:Name="listViewPartners" ItemsSource="{x:Bind Partners}" HorizontalAlignment="Stretch" Margin="0 8 0 0">
                     <ListView.ItemTemplate>
@@ -55,14 +57,14 @@
                                 <StackPanel x:Name="ChatPartner" VerticalAlignment="Center" HorizontalAlignment="Stretch">
                                     <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
                                         <TextBlock HorizontalAlignment="Stretch" Text="{x:Bind Name}"/>
-                                        <TextBlock Text=" ("/>
+                                        <TextBlock Foreground="{ThemeResource SystemColorDisabledTextColor}" Text=" ("/>
-                                        <TextBlock Text="{x:Bind Code}"/>
+                                        <TextBlock Foreground="{ThemeResource SystemColorDisabledTextColor}" Text="{x:Bind Code}"/>
-                                        <TextBlock Text=")"/>
+                                        <TextBlock Foreground="{ThemeResource SystemColorDisabledTextColor}" Text=")"/>
                                     </StackPanel>
                                     <!--
                                     <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
                                         <TextBlock HorizontalAlignment="Stretch" Text="{x:Bind Messages.Last().toString()}"/>
-                                        <TextBlock Text="{x:Bind Messages.Last().Date}"/>
+                                        <TextBlock Text="{x:Bind Message[Messages.Count()].Date}"/>
                                     </StackPanel>
                                     -->
                                 </StackPanel>
@@ -72,8 +74,9 @@
                 </ListView>
             </ScrollViewer>
         </Grid>
+        <TextBlock x:Name="textNoChatSelected" Grid.Column="1" Text="No Chat Selected" Foreground="{ThemeResource SystemColorDisabledTextColor}" FontSize="24" VerticalAlignment="Center" HorizontalAlignment="Center"/>
         <!-- RIGHT SIDE -->
-        <Grid Grid.Column="1">
+        <Grid x:Name="gridRight" Grid.Column="1">
             <Grid.RowDefinitions>
                 <RowDefinition Height="64"/>
                 <RowDefinition Height="*"/>
@@ -112,9 +115,9 @@
                     <ColumnDefinition Width="*"/>
                     <ColumnDefinition Width="auto"/>
                 </Grid.ColumnDefinitions>
-                <TextBox x:Name="inputSend" KeyDown="OnKeyDown" PlaceholderText="My message" VerticalAlignment="Center"/>
+                <TextBox x:Name="inputSend" KeyUp="OnKeyUp" PlaceholderText="My message" VerticalAlignment="Center"/>
-                <StackPanel Orientation="Horizontal" Grid.Column="1">
+                <StackPanel Orientation="Horizontal" Grid.Column="1" Margin="16 0 0 0">
-                    <Button Content="Send" Click="OnSendMessage"/>
+                    <Button x:Name="buttonSend" IsEnabled="False" Content="Send" Click="OnSendMessage" Foreground="{ThemeResource SystemColorButtonTextColor}" Background="{ThemeResource SystemAccentColor}"/>
                 </StackPanel>
             </Grid>
         </Grid>

PolyChat/MainPage.xaml.cs

@@ -19,23 +19,42 @@ namespace PolyChat
     {
         private NetworkingController networkingController;
         private ObservableCollection<ChatPartner> Partners;
-        private ChatPartner selectedPartner;
+        private ChatPartner selectedPartner = null;
         private string username;
         public MainPage()
         {
             this.InitializeComponent();
+            // init controller
             networkingController = new NetworkingController(this);
-
+            // ui variables
-            Partners = new ObservableCollection<ChatPartner>();
             ipAddress.Text = IP.GetCodeFromIP(networkingController.getIP().ToString());
+            Partners = new ObservableCollection<ChatPartner>();
+            updateNoChatsPlaceholder();
+            updateNoUsernamePlaceholder();
+            updateNoChatSelected();
+            updateSendButtonEnabled();
         }
 
+        public async void ShowConnectionError(string message)
+        {
+            ConnectionFailedDialog dialog = new ConnectionFailedDialog(message);
+            var result = await dialog.ShowAsync();
+            if (result == ContentDialogResult.Primary)
+            {
+                //retry
+            }
+            // else abort -> del chat
+        }
+
+        // EVENTS
+
         public void OnChatPartnerSelected(object sender, RoutedEventArgs e)
         {
             string code = ((RadioButton)sender).Tag.ToString();
             selectedPartner = Partners.First(p => p.Code == code);
             listViewMessages.ItemsSource = selectedPartner.Messages;
             selectedPartnerName.Text = selectedPartner.Name;
+            updateNoChatSelected();
         }
 
         public void OnSendMessage(object sender = null, RoutedEventArgs e = null)
@@ -55,15 +74,13 @@ namespace PolyChat
             var result = await dialog.ShowAsync();
             if (result == ContentDialogResult.Primary)
             {
-                string ip = dialog.getValue();
+                string ip = IP.GetIPfromCode(dialog.getValue());
-                if (IP.ValidateIP(ip))
+                networkingController.connectNewClient(ip);
-                {
+                Partners.Add(new ChatPartner(
-                    networkingController.connectNewClient(ip);
+                    "Connecting...",
-                    Partners.Add(new ChatPartner(
+                    ip
-                        "Connecting...",
+                ));
-                        ip
+                updateNoChatsPlaceholder();
-                    ));
-                }
             }
         }
 
@@ -77,6 +94,7 @@ namespace PolyChat
                 if (username.Length == 0) textUsername.Text = "Unknown";
                 else textUsername.Text = username;
             }
+            updateNoUsernamePlaceholder();
         }
 
         public void OnIncomingMessage(ChatMessage message)
@@ -92,14 +110,56 @@ namespace PolyChat
         private void OnDeleteChat(object sender = null, RoutedEventArgs e = null)
         {
             Partners.Remove(selectedPartner);
+            updateNoChatsPlaceholder();
         }
 
-        private void OnKeyDown(object sender, Windows.UI.Xaml.Input.KeyRoutedEventArgs e)
+        private void OnKeyUp(object sender, Windows.UI.Xaml.Input.KeyRoutedEventArgs e)
         {
+            updateSendButtonEnabled();
             if (e.Key == Windows.System.VirtualKey.Enter)
             {
                 OnSendMessage();
             }
         }
+
+        // UPDATE FUNCTIONS FOR UI PLACEHOLDERS
+
+        private void updateNoChatsPlaceholder()
+        {
+            textNoChats.Visibility = Partners.Count() == 0 ? Visibility.Visible : Visibility.Collapsed;
+        }
+
+        private void updateNoUsernamePlaceholder()
+        {
+            if (username == null)
+            {
+                textNoUsername.Visibility = Visibility.Visible;
+                textUsername.Visibility = Visibility.Collapsed;
+            }
+            else
+            {
+                textNoUsername.Visibility = Visibility.Collapsed;
+                textUsername.Visibility = Visibility.Visible;
+            }
+        }
+
+        private void updateNoChatSelected()
+        {
+            if (selectedPartner != null)
+            {
+                gridRight.Visibility = Visibility.Visible;
+                textNoChatSelected.Visibility = Visibility.Collapsed;
+            }
+            else
+            {
+                gridRight.Visibility = Visibility.Collapsed;
+                textNoChatSelected.Visibility = Visibility.Visible;
+            }
+        }
+
+        private void updateSendButtonEnabled()
+        {
+            buttonSend.IsEnabled = inputSend.Text.Length != 0;
+        }
     }
 }

PolyChat/PolyChat.csproj

@@ -134,6 +134,9 @@
     <Compile Include="Controller.cs" />
     <Compile Include="Properties\AssemblyInfo.cs" />
     <Compile Include="Util\IP.cs" />
+    <Compile Include="Views\ConnectionFailedDialog.xaml.cs">
+      <DependentUpon>ConnectionFailedDialog.xaml</DependentUpon>
+    </Compile>
     <Compile Include="Views\EditUsernameDialog.xaml.cs">
       <DependentUpon>EditUsernameDialog.xaml</DependentUpon>
     </Compile>
@@ -165,6 +168,10 @@
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
     </Page>
+    <Page Include="Views\ConnectionFailedDialog.xaml">
+      <Generator>MSBuild:Compile</Generator>
+      <SubType>Designer</SubType>
+    </Page>
     <Page Include="Views\EditUsernameDialog.xaml">
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>

PolyChat/Views/ConnectionFailedDialog.xaml

@@ -0,0 +1,17 @@
+<ContentDialog x:Class="PolyChat.Views.ConnectionFailedDialog"
+               xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+               xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+               xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+               xmlns:local="using:PolyChat.Views"
+               xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+               x:Name="MessageDialog"
+               Title="Connection Failed"
+               PrimaryButtonText="Retry"
+               SecondaryButtonText="Abort"
+               mc:Ignorable="d">
+
+    <StackPanel>
+        <TextBlock Text="Message:" Foreground="{ThemeResource SystemColorDisabledTextColor}" Margin="0 0 0 8"/>
+        <TextBlock x:Name="textError" Foreground="{ThemeResource SystemErrorTextColor}"/>
+    </StackPanel>
+</ContentDialog>

PolyChat/Views/ConnectionFailedDialog.xaml.cs

@@ -0,0 +1,26 @@
+using PolyChat.Models;
+using PolyChat.Util;
+using System;
+using System.Collections.ObjectModel;
+using System.Linq;
+using Windows.UI.Popups;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Media;
+
+// The Blank Page item template is documented at https://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409
+
+namespace PolyChat.Views
+{
+    /// <summary>
+    /// An empty page that can be used on its own or navigated to within a Frame.
+    /// </summary>
+    public sealed partial class ConnectionFailedDialog : ContentDialog
+    {
+        public ConnectionFailedDialog(string message)
+        {
+            this.InitializeComponent();
+            textError.Text = message;
+        }
+    }
+}

PolyChat/Views/EditUsernameDialog.xaml

@@ -13,7 +13,7 @@
     <Grid>
         <Grid.RowDefinitions>
             <RowDefinition Height="auto"/>
-            <RowDefinition Height="16"/>
+            <RowDefinition Height="24"/>
         </Grid.RowDefinitions>
         <TextBox x:Name="input" KeyUp="OnKeyUp" PlaceholderText="Marco Sattler"/>
         <TextBlock Grid.Row="1" x:Name="textError" Text="Username cannot be empty" VerticalAlignment="Center" Foreground="{ThemeResource SystemErrorTextColor}"/>

PolyChat/Views/NewChatDialog.xaml

@@ -13,10 +13,10 @@
     <Grid>
         <Grid.RowDefinitions>
             <RowDefinition Height="auto"/>
-            <RowDefinition Height="auto"/>
+            <RowDefinition Height="24"/>
         </Grid.RowDefinitions>
         <TextBox x:Name="input" KeyUp="OnKeyUp" PlaceholderText="Partner Code"/>
-        <TextBlock Grid.Row="1" x:Name="textSuccess" Text="Looking good" VerticalAlignment="Top" Foreground="{ThemeResource SystemAccentColor}" Visibility="Collapsed"/>
+        <TextBlock Grid.Row="1" x:Name="textSuccess" Text="Looking good" VerticalAlignment="Center" Foreground="{ThemeResource SystemAccentColor}" Visibility="Collapsed"/>
-        <TextBlock Grid.Row="1" x:Name="textError" Text="Invalid or empty Code" VerticalAlignment="Top" Foreground="{ThemeResource SystemErrorTextColor}" Visibility="Collapsed"/>
+        <TextBlock Grid.Row="1" x:Name="textError" Text="Invalid or empty Code" VerticalAlignment="Center" Foreground="{ThemeResource SystemErrorTextColor}" Visibility="Visible"/>
     </Grid>
 </ContentDialog>