ChatX/chatclient/MainWindow.xaml
XuShanQiXun 015535c100 添加时间格式转换器和命名空间引用
在 `App.xaml` 中添加了对 `chatclient.Data` 命名空间的引用。
在 `ChatDataModel.cs` 中移除不必要的 `using` 语句,添加对 `System.Windows` 和 `System.Windows.Media.Imaging` 的引用,并为 `ConvertBack` 方法添加文档注释。
在 `MainWindow.xaml` 中定义了 `TimeFormatConverter` 资源,以增强时间显示功能。
2025-06-22 00:55:33 +08:00

166 lines
12 KiB
XML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<Window
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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:local="clr-namespace:chatclient"
xmlns:data="clr-namespace:chatclient.Data"
xmlns:mah="http://metro.mahapps.com/winfx/xaml/controls" x:Class="chatclient.MainWindow"
mc:Ignorable="d"
Title="ChatWindow" Height="450" Width="800" MinHeight="240" MinWidth="380"
Style="{StaticResource MaterialDesignWindow}" Closed="MainWindow_Closed" Loaded="MainWindow_Loaded">
<Window.Resources>
<data:TimeFormatConverter x:Key="TimeConverter"/>
</Window.Resources>
<Grid>
<materialDesign:Card>
<TabControl x:Name="TabControl" VerticalContentAlignment="Bottom" materialDesign:ColorZoneAssist.Mode="PrimaryMid" Style="{StaticResource MaterialDesignNavigationRailTabControl}">
<materialDesign:NavigationRailAssist.FloatingContent>
<StackPanel>
<Button Style="{StaticResource MaterialDesignFloatingActionMiniLightButton}" Margin="12">
<Image Source="/resource/user.png" />
</Button>
<TextBlock Text="{Binding UserName}" TextAlignment="Center" MaxWidth="64" MaxHeight="64" TextWrapping="Wrap"/>
</StackPanel>
</materialDesign:NavigationRailAssist.FloatingContent>
<TabItem x:Name="ChatMsg">
<TabItem.Header>
<StackPanel Width="auto" Height="auto">
<materialDesign:PackIcon Width="24" Height="24" HorizontalAlignment="Center" Kind="Message" />
<TextBlock HorizontalAlignment="Center" Text="消息" />
</StackPanel>
</TabItem.Header>
<Grid>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<!-- 标题栏 -->
<RowDefinition Height="*"/>
<!-- 消息区域 -->
<RowDefinition Height="Auto"/>
<!-- 输入区域 -->
</Grid.RowDefinitions>
<!-- 标题栏 -->
<materialDesign:Card Grid.Row="0" Padding="10" Margin="0,0,0,5">
<StackPanel Orientation="Horizontal">
<TextBlock Text="聊天室" FontSize="16" FontWeight="Bold"
VerticalAlignment="Center" Margin="5,0" Cursor="Hand"/>
</StackPanel>
</materialDesign:Card>
<!-- 消息区域 -->
<ScrollViewer x:Name="messageScroller" Grid.Row="1" VerticalScrollBarVisibility="Auto"
Padding="10" Background="{DynamicResource MaterialDesignPaper}">
<ItemsControl x:Name="messageList">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="{Binding Alignment}" Margin="0,5">
<Grid.ColumnDefinitions>
<!-- 左侧列:头像或空白 -->
<ColumnDefinition Width="Auto"/>
<!-- 中间列:消息卡片 -->
<ColumnDefinition Width="*"/>
<!-- 右侧列:头像或空白 -->
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<!-- 左侧头像仅当Alignment=Left时显示 -->
<Border x:Name="leftAvatar" Grid.Column="0" Width="40" Height="40" Margin="10,0,5,0" CornerRadius="20" VerticalAlignment="Top">
<!-- 图片头像 -->
<Image Source="{Binding Image}" Stretch="UniformToFill" HorizontalAlignment="Center" VerticalAlignment="Center">
<Image.Clip>
<EllipseGeometry Center="20,20" RadiusX="20" RadiusY="20"/>
</Image.Clip>
</Image>
</Border>
<!-- 消息卡片(始终在中间列) -->
<materialDesign:Card Grid.Column="1" Padding="10" HorizontalAlignment="{Binding Alignment}">
<StackPanel>
<TextBlock Text="{Binding Sender}" x:Name="Sender" FontWeight="Bold" Foreground="{Binding SenderColor}"/>
<TextBlock Text="{Binding Content}" TextWrapping="Wrap" Margin="0,5,0,0"/>
<TextBlock Text="{Binding Timestamp, Converter={StaticResource TimeConverter}}" x:Name="Timestamp" Foreground="Gray" FontSize="10" HorizontalAlignment="Right" Margin="0,5,0,0"/>
</StackPanel>
</materialDesign:Card>
<!-- 右侧头像仅当Alignment=Right时显示 -->
<Border x:Name="rightAvatar" Grid.Column="2" Width="40" Height="40" Margin="5,0,10,0" CornerRadius="20" VerticalAlignment="Top">
<Image Source="{Binding Image}" Stretch="UniformToFill" HorizontalAlignment="Center" VerticalAlignment="Center">
<Image.Clip>
<EllipseGeometry Center="20,20" RadiusX="20" RadiusY="20"/>
</Image.Clip>
</Image>
</Border>
</Grid>
<!-- 根据Alignment显示正确的头像 -->
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding MsgType}" Value="3">
<Setter TargetName="Sender" Property="Visibility" Value="Collapsed"/>
<Setter TargetName="Timestamp" Property="Visibility" Value="Collapsed"/>
<Setter TargetName="leftAvatar" Property="Visibility" Value="Collapsed"/>
<Setter TargetName="rightAvatar" Property="Visibility" Value="Collapsed"/>
</DataTrigger>
<!-- 左对齐消息:显示左侧头像 -->
<DataTrigger Binding="{Binding Alignment}" Value="Left">
<Setter TargetName="leftAvatar" Property="Visibility" Value="Visible"/>
<Setter TargetName="rightAvatar" Property="Visibility" Value="Collapsed"/>
</DataTrigger>
<!-- 右对齐消息:显示右侧头像 -->
<DataTrigger Binding="{Binding Alignment}" Value="Right">
<Setter TargetName="leftAvatar" Property="Visibility" Value="Collapsed"/>
<Setter TargetName="rightAvatar" Property="Visibility" Value="Visible"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
<materialDesign:Card materialDesign:ElevationAssist.Elevation="Dp8" Grid.Row="2">
<Grid Margin="5,0,5,0">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBox x:Name="txtMessage" Grid.Row="0" materialDesign:HintAssist.Hint="输入消息..." AcceptsReturn="True" VerticalScrollBarVisibility="Auto"
TextWrapping="Wrap" MinHeight="50" MaxHeight="100" Margin="5" BorderBrush="#00000000"/>
<Button x:Name="btnSend" Grid.Row="1" Content="发送" MinWidth="80" Style="{StaticResource MaterialDesignRaisedButton}"
Click="SendMessage_Click" Width="20" HorizontalAlignment="Right" Margin="2,2,4,4"/>
</Grid>
</materialDesign:Card>
</Grid>
</Grid>
</TabItem>
<TabItem x:Name="Settings">
<TabItem.Header>
<StackPanel Width="auto" Height="auto">
<materialDesign:PackIcon Width="24" Height="24" HorizontalAlignment="Center" Kind="Cog" />
<TextBlock HorizontalAlignment="Center" Text="设置" />
</StackPanel>
</TabItem.Header>
<StackPanel Margin="10">
<TextBlock Text="设置" FontSize="20" FontWeight="Bold" Margin="0,0,0,12"/>
<Separator Margin="0 0" Width="auto" Height="10" HorizontalAlignment="Stretch" VerticalAlignment="Top"/>
<TextBlock Text="关于" x:Name="About" FontSize="20" FontWeight="Bold" Margin="0,0,0,12"/>
<TextBlock Text="ChatX 聊天室" FontSize="16" Margin="0,0,0,2"/>
<TextBlock Text="版本 0.0.2" Margin="0,0,0,2"/>
<TextBlock Text="作者DZY &amp; 绪山七寻" Margin="0,0,0,10"/>
<TextBlock Text="使用的第三方资源" FontSize="16" Margin="0,0,0,2"/>
<TextBlock Text="ChatX" Margin="0,0,0,2" FontSize="13"/>
<TextBlock Text="├─ .NET 8.0" Margin="0,0,0,2"/>
<TextBlock Text="├─ WPF" Margin="0,0,0,2"/>
<TextBlock Text="├─ HarmonyOS Sans" Margin="0,0,0,2"/>
<TextBlock Text="├─ MaterialDesignThemes" Margin="0,0,0,2"/>
<TextBlock Text="│ ├─ MaterialDesignThemes.MahApps" Margin="0,0,0,2"/>
<TextBlock Text="│ └─ MaterialDesignThemes.Wpf" Margin="0,0,0,2"/>
<TextBlock Text="├─ log4net" Margin="0,0,0,2"/>
<TextBlock Text="└─ Hardcodet.NotifyIcon.Wpf" Margin="0,0,0,2"/>
</StackPanel>
</TabItem>
</TabControl>
</materialDesign:Card>
<!--信息框-->
<materialDesign:Snackbar x:Name="SnackbarThree" MessageQueue="{materialDesign:MessageQueue}" />
</Grid>
</Window>