UI设计

stormchat-client-csharp/StormChatWPF/App.xaml

@@ -4,6 +4,10 @@
              xmlns:local="clr-namespace:StormChatWPF"
              StartupUri="LogWindow.xaml">
     <Application.Resources>
-         
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+				<ResourceDictionary Source="UI/Style.xaml"/>
+			</ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
     </Application.Resources>
 </Application>

stormchat-client-csharp/StormChatWPF/Chat.cs

@@ -62,7 +62,7 @@ namespace StormChatWPF
         {
             if (MainWindow.Instence != null)
             {
-                MainWindow.Instence.ShowMessage(message);
+                MainWindow.Instence.UI_ShowMessage(message);
             }
         }//接受到新消息
 
@@ -71,7 +71,7 @@ namespace StormChatWPF
             Message msg = new Message(text,target);
             Action<ResultHead> f = delegate (ResultHead head)
            {
-               MainWindow.Instence.ShowMessage(msg);
+               MainWindow.Instence.UI_ShowMessage(msg);
            };
             StormClient.QueueSendMessage(msg,f);
         }//发送消息

stormchat-client-csharp/StormChatWPF/LogWindow.xaml

@@ -21,7 +21,7 @@
 			<RowDefinition Height="150*"/>
 		</Grid.RowDefinitions>
 		<Image x:Name="LogBackground"  Grid.ColumnSpan="4" Height="268" Margin="10,10,10,0" Grid.RowSpan="2" VerticalAlignment="Top" Source="pack://application:,,,/UI/Resources/登录界面底.png"/>
-		<Button x:Name="Login_button" Content="LogIn" Click="Login_button_Click" Grid.ColumnSpan="2" Grid.Column="1" Grid.Row="2" Margin="160.6,69.6,160.6,44.6" Width="70" Height="25" HorizontalAlignment="Center"/>
+		<Button x:Name="Login_button" Content="LogIn" Click="Login_button_Click" Grid.ColumnSpan="2" Grid.Column="1" Grid.Row="2" Margin="165,72,166,42" Width="64" Height="25" HorizontalAlignment="Center"/>
 		<TextBox x:Name="AccountBox" TextWrapping="Wrap" Text="201701110203" Grid.Row="2" TextAlignment="Left" Margin="137.6,4.6,137.6,112.6" Grid.Column="1" Grid.ColumnSpan="2" Height="22" Width="122" HorizontalAlignment="Center" BorderThickness="0,0,0,1" VerticalAlignment="Top" />
 		<PasswordBox x:Name="passwordBox" Password="1233211234567" Margin="135,35,135,0" Grid.Column="1" Grid.Row="2" VerticalAlignment="Top" Grid.ColumnSpan="2" Height="22" Width="122" HorizontalAlignment="Center" BorderThickness="0,0,0,1" HorizontalContentAlignment="Left"/>
 		<Label x:Name="Account" Content="Account:" Grid.Column="1" Margin="0,138.8,70.2,0" Grid.Row="1" VerticalAlignment="Top" RenderTransformOrigin="0.415,0.379" Height="24" FontFamily="Comic Sans MS" FontStyle="Italic" Grid.RowSpan="2" HorizontalContentAlignment="Center" HorizontalAlignment="Right" Width="60"/>

stormchat-client-csharp/StormChatWPF/MainWindow.xaml

@@ -6,30 +6,42 @@
         xmlns:local="clr-namespace:StormChatWPF"
 		xmlns:my="clr-namespace:StormChatWPF.UI"
         mc:Ignorable="d"
-        Title="StormChat" Height="450" Width="800"
+        Title="StormChat" Height="600" Width="850"
-		WindowStartupLocation="CenterScreen">
+		WindowStartupLocation="CenterScreen"
-	<Grid>
+		Icon="UI/Resources/闪电.png">
+	<Grid Margin="0,0,0,0">
 		<Grid.RowDefinitions>
 			<RowDefinition Height="60*"/>
 			<RowDefinition Height="300*"/>
-			<RowDefinition Height="90*"/>
+			<RowDefinition Height="100*"/>
 		</Grid.RowDefinitions>
 		<Grid.ColumnDefinitions>
-			<ColumnDefinition Width="200*"/>
+			<ColumnDefinition Width="60*"/>
+			<ColumnDefinition Width="140*"/>
 			<ColumnDefinition Width="200*"/>
 			<ColumnDefinition Width="200*"/>
 			<ColumnDefinition Width="200*"/>
 		</Grid.ColumnDefinitions>
-		<ListView x:Name="UsersList" Margin="0,0,0,0" IsEnabled="True" SelectionChanged="UsersList_SelectionChanged" Grid.Row="1" Grid.RowSpan="2" HorizontalAlignment="Left" Width="198"/>
+		<ListView x:Name="UsersList" IsEnabled="True" SelectionChanged="UsersList_SelectionChanged" Grid.Row="1" Grid.RowSpan="2" HorizontalAlignment="Left" Width="206" Grid.ColumnSpan="2" Margin="0,10,0,0" />
-		<TextBox x:Name="InputBox" Margin="200,0,0,0" TextWrapping="Wrap" Text="" Grid.Row="2" Grid.ColumnSpan="4" />
+		<TextBox x:Name="InputBox" TextWrapping="Wrap" Text="" Grid.Row="2" Grid.ColumnSpan="3" Grid.Column="2" Height="109" VerticalAlignment="Bottom" Margin="10,0,10,5" />
-		<Button Content="Send" HorizontalAlignment="Right" Margin="0,0,0,0" VerticalAlignment="Bottom" Width="75" Click="Button_Click" Height="20" Grid.Row="2" Grid.Column="3"/>
+		<Button Content="Send" HorizontalAlignment="Right" VerticalAlignment="Bottom" Width="75" Click="Button_Click" Height="20" Grid.Row="2" Grid.Column="4" Margin="0,0,10,10"/>
-		<ScrollViewer Grid.ColumnSpan="3" Grid.Column="1" Margin="0,0,0,0" Grid.Row="1" >
+		<ScrollViewer Grid.ColumnSpan="3" Grid.Column="2" Grid.Row="1" BorderThickness="1">
 			<ScrollViewer.Content>
 				<StackPanel x:Name="OutBox" Margin="0,0,0,0" Grid.ColumnSpan="3" Grid.Column="1" Grid.Row="1" ScrollViewer.VerticalScrollBarVisibility="Hidden"/>
 			</ScrollViewer.Content>
 		</ScrollViewer>
-		<Image x:Name="User_HeadPicture" HorizontalAlignment="Left" Width="60" VerticalAlignment="Stretch"/>
+		<Image x:Name="User_HeadPicture" VerticalAlignment="Stretch" Margin="0,10,0,0"/>
-		<Label x:Name="User_NickNmae" Content="Label" Margin="0,10,0.4,0" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" HorizontalAlignment="Right" Width="140" FontSize="18" Height="30" VerticalAlignment="Top"/>
+		<Label x:Name="User_NickNmae" Content="小施" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" FontSize="18" Grid.Column="1" HorizontalAlignment="Left" Width="115" Margin="5,10,0,25"/>
-		<Label x:Name="User_motto" Content="人生很长，慢慢走。" Margin="0,40,0.4,0" VerticalContentAlignment="Top" HorizontalAlignment="Right" Width="138" FontSize="6"/>
+		<Label x:Name="User_motto" Content="别寻事惹非" Margin="5,54,0,0" VerticalContentAlignment="Center" FontSize="6" Grid.Column="1" HorizontalAlignment="Left" Width="143"/>
+		<Image x:Name="image" Grid.Column="2"  Height="54" Margin="53,10,106,10"  Width="51" Source="UI/Resources/闪电.png" Visibility="Visible" Stretch="Fill">
+			<Image.ContextMenu>
+				<ContextMenu x:Name="Menu" Initialized="Menu_Initialized" MouseLeftButtonUp="Menu_MouseLeftButtonDown">
+					<MenuItem Header="Settings" Click="MenuItem_Settings_Click"/>
+					<MenuItem Header="SignOut"/>
+				</ContextMenu>
+			</Image.ContextMenu>
+		</Image>
+
+
 	</Grid>
 </Window>

stormchat-client-csharp/StormChatWPF/MainWindow.xaml.cs

@@ -5,6 +5,7 @@ using System.IO;
 using System.Linq;
 using System.Windows;
 using System.Windows.Controls;
+using System.Windows.Controls.Primitives;
 using System.Windows.Media.Imaging;
 
 namespace StormChatWPF
@@ -25,10 +26,10 @@ namespace StormChatWPF
         }
         void Window_Load(object sender, EventArgs e)
         {
-            LoadContactsList();
+            UI_LoadContactsList();
-            LoadUserMe();
+            UI_LoadUserMe();
         }
-        private void LoadUserMe()
+        private void UI_LoadUserMe()
         {
             BitmapImage image = new BitmapImage();
             image.BeginInit();
@@ -38,9 +39,32 @@ namespace StormChatWPF
             User_HeadPicture.Source = image;
             User_NickNmae.Content = User.Me.NickName;
             User_motto.Content = User.Me.Motto;
-        }
+        }//加载用当前用户UI显示信息
+        private void UI_LoadSettings()
+        {
 
-        private void LoadContactsList()
+        }
+        internal void UI_ShowMessage(Message message)
+        {
+            if (message.To == User.Me)
+            {
+                App.Current.Dispatcher.Invoke(
+                (Action)delegate ()
+                {
+                    OutBox.Children.Add(new StormChatWPF.UI.ChatBubble(message, HorizontalAlignment.Left));
+                });
+            }//接受到的的消息
+            else
+            {
+                App.Current.Dispatcher.Invoke(
+                    (Action)delegate ()
+                    {
+                        OutBox.Children.Add(new StormChatWPF.UI.ChatBubble(message, HorizontalAlignment.Right));
+                    });
+            }//发送的的消息
+        }//将消息展现于UI界面
+
+        private void UI_LoadContactsList()
         {
             if (Chat.ContactsList.Any())
             {
@@ -79,25 +103,7 @@ namespace StormChatWPF
             }
         }
 
-        internal void ShowMessage(Message message)
+        
-        {
-            if (message.To == User.Me)
-            {
-                App.Current.Dispatcher.Invoke(
-                (Action)delegate ()
-                {
-                    OutBox.Children.Add(new StormChatWPF.UI.ChatBubble(message, HorizontalAlignment.Left));
-                });
-            }//接受到的的消息
-            else
-            {
-                App.Current.Dispatcher.Invoke(
-                    (Action)delegate ()
-                {
-                    OutBox.Children.Add(new StormChatWPF.UI.ChatBubble(message, HorizontalAlignment.Right));
-                });
-            }//发送的的消息
-        }//将消息展现于UI界面
 
         private void button_Click_1(object sender, RoutedEventArgs e)
         {
@@ -108,5 +114,25 @@ namespace StormChatWPF
         }
 
         event LoadFinish MainWindowLoad;
+
+        private void MenuItem_Settings_Click(object sender, RoutedEventArgs e)
+        {
+            MessageBox.Show("Settings");
+        }
+
+        private void Menu_Initialized(object sender, EventArgs e)
+        {
+            this.image.ContextMenu = null;
+        }
+
+        private void Menu_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
+        {
+            
+            this.Menu.PlacementTarget = this.image;
+            //位置
+            this.Menu.Placement = PlacementMode.Top;
+            //显示菜单
+            this.Menu.IsOpen = true;
+        }
     }
 }

stormchat-client-csharp/StormChatWPF/StormChatWPF.csproj

@@ -70,8 +70,8 @@
       <DependentUpon>Contacts.xaml</DependentUpon>
     </Compile>
     <Compile Include="UI\ContactsInfo.cs" />
-    <Compile Include="UI\UserMeHeadInfo.xaml.cs">
+    <Compile Include="UI\DropDownMenu.xaml.cs">
-      <DependentUpon>UserMeHeadInfo.xaml</DependentUpon>
+      <DependentUpon>DropDownMenu.xaml</DependentUpon>
     </Compile>
     <Compile Include="Window1.xaml.cs">
       <DependentUpon>Window1.xaml</DependentUpon>
@@ -96,7 +96,11 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
-    <Page Include="UI\UserMeHeadInfo.xaml">
+    <Page Include="UI\DropDownMenu.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+    <Page Include="UI\Style.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>

stormchat-client-csharp/StormChatWPF/UI/DropDownMenu.xaml

@@ -1,17 +1,13 @@
-<UserControl x:Class="StormChatWPF.UI.UserMeHeadInfo"
+<UserControl x:Class="StormChatWPF.UI.DropDownMenu"
              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:StormChatWPF.UI"
              mc:Ignorable="d" 
-             d:DesignHeight="60" d:DesignWidth="200">
+             d:DesignHeight="30" d:DesignWidth="30">
 	<Grid>
-		<Grid.ColumnDefinitions>
+		<ComboBox x:Name="comboBox" Style="{StaticResource DropDownMenu}" Margin="-48,-7,37,-4"/>
-			<ColumnDefinition Width="60*"/>
+		<Image x:Name="image" HorizontalAlignment="Left" Height="30" Margin="-44,-40,0,0" VerticalAlignment="Top" Width="30"/>
-			<ColumnDefinition Width="120*"/>
-		</Grid.ColumnDefinitions>
-		<Image x:Name="image" Height="60" Margin="0,0,0,0" VerticalAlignment="Top"/>
-		
 	</Grid>
 </UserControl>

stormchat-client-csharp/StormChatWPF/UI/DropDownMenu.xaml.cs

@@ -15,11 +15,11 @@ using System.Windows.Shapes;
 namespace StormChatWPF.UI
 {
     /// <summary>
-    /// UserMeHeadInfo.xaml 的交互逻辑
+    /// DropDownMenu.xaml 的交互逻辑
     /// </summary>
-    public partial class UserMeHeadInfo : UserControl
+    public partial class DropDownMenu : UserControl
     {
-        public UserMeHeadInfo()
+        public DropDownMenu()
         {
             InitializeComponent();
         }

stormchat-client-csharp/StormChatWPF/UI/Style.xaml

@@ -0,0 +1,16 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:local="clr-namespace:StormChatWPF.UI">
+    <Style x:Key="DropDownMenu" TargetType="ComboBox">
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="ComboBox">
+                    <Grid  Height="100" Width="100" Margin="0,0,0,0">
+                        <ComboBox Width="Auto" Height="Auto" VerticalAlignment="Top" Margin="30,10,30,0" Visibility="Hidden"/>
+                        <Image Width="Auto" Height="Auto" Source="pack://application:,,,/UI/Resources/闪电.png" Stretch="Fill" Margin="0" VerticalAlignment="Stretch"/>
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+</ResourceDictionary>

stormchat-client-csharp/StormChatWPF/Window1.xaml

@@ -7,11 +7,6 @@
         mc:Ignorable="d"
         Title="Window1" Height="300" Width="300">
 	<Grid>
-		<StackPanel HorizontalAlignment="Left" Margin="187,0,0,10.4" Width="100">
+		<ComboBox x:Name="comboBox" HorizontalAlignment="Left" Margin="75,85,0,0" VerticalAlignment="Top" Width="120" Style="{DynamicResource DropDownMenu}"/>
-			<Image x:Name="image" Height="46" Source="UI/Resources/聊天气泡.png" Margin="0,0,10,0"/>
-
-		</StackPanel>
-		<Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="90,108,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/>
-
 	</Grid>
 </Window>

stormchat-client-csharp/StormChatWPF/Window1.xaml.cs

@@ -26,11 +26,6 @@ namespace StormChatWPF
 
         private void Button_Click(object sender, RoutedEventArgs e)
         {
-            image.Source = new BitmapImage()
-            {
-                StreamSource = new FileStream(@"C:\Users\10568\Source\Repos\stormchat\stormchat-client-csharp\StormChatWPF\UI\Resources\闪电.png", FileMode.Open)
-
-            };
         }
     }
 }