ChatX/chatclient/MainWindow.xaml

160 lines
12 KiB
Plaintext
Raw Permalink Normal View History

<Window
2025-05-31 20:30:22 +08:00
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"
2025-06-01 02:57:57 +08:00
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
2025-05-31 20:30:22 +08:00
xmlns:local="clr-namespace:chatclient"
xmlns:mah="http://metro.mahapps.com/winfx/xaml/controls" x:Class="chatclient.MainWindow"
2025-05-31 20:30:22 +08:00
mc:Ignorable="d"
2025-06-01 20:33:52 +08:00
Title="ChatWindow" Height="450" Width="800" MinHeight="240" MinWidth="380"
Style="{StaticResource MaterialDesignWindow}" Closed="MainWindow_Closed" Loaded="MainWindow_Loaded">
2025-05-31 20:30:22 +08:00
<Grid>
2025-06-01 20:33:52 +08:00
<materialDesign:Card>
<TabControl x:Name="TabControl" VerticalContentAlignment="Bottom" materialDesign:ColorZoneAssist.Mode="PrimaryMid" Style="{StaticResource MaterialDesignNavigationRailTabControl}">
2025-06-01 20:33:52 +08:00
<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>
2025-06-01 20:33:52 +08:00
</materialDesign:NavigationRailAssist.FloatingContent>
<TabItem x:Name="ChatMsg">
2025-06-01 02:57:57 +08:00
<TabItem.Header>
<StackPanel Width="auto" Height="auto">
2025-06-01 20:33:52 +08:00
<materialDesign:PackIcon Width="24" Height="24" HorizontalAlignment="Center" Kind="Message" />
<TextBlock HorizontalAlignment="Center" Text="消息" />
2025-06-01 02:57:57 +08:00
</StackPanel>
</TabItem.Header>
2025-06-01 20:33:52 +08:00
<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"/>
<!--<Button x:Name="btnRefresh" Style="{StaticResource MaterialDesignIconButton}"
ToolTip="刷新列表" Click="RefreshContacts_Click" Margin="5,0,10,0">
<materialDesign:PackIcon Kind="Refresh"/>
</Button>-->
<!--<ComboBox x:Name="cmbContacts" Width="150" Margin="5,0"
materialDesign:HintAssist.Hint="选择联系人"
DisplayMemberPath="DisplayName"/>-->
</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, StringFormat='HH:mm:ss'}" 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>
2025-06-01 20:33:52 +08:00
</Grid>
2025-06-01 02:57:57 +08:00
</TabItem>
<TabItem x:Name="Settings">
2025-06-01 02:57:57 +08:00
<TabItem.Header>
<StackPanel Width="auto" Height="auto">
<materialDesign:PackIcon Width="24" Height="24" HorizontalAlignment="Center" Kind="Cog" />
<TextBlock HorizontalAlignment="Center" Text="设置" />
2025-06-01 02:57:57 +08:00
</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="关于" FontSize="20" FontWeight="Bold" Margin="0,0,0,12"/>
<TextBlock Text="ChatClient 聊天室" FontSize="16" Margin="0,0,0,8"/>
<TextBlock Text="版本 1.0.0" Margin="0,0,0,8"/>
<TextBlock Text="作者DZY &amp; 绪山七寻" Margin="0,0,0,8"/>
<TextBlock Text="本项目基于 .NET 8 和 MaterialDesignInXAML。" TextWrapping="Wrap" Margin="0,0,0,8"/>
2025-06-01 02:57:57 +08:00
</StackPanel>
</TabItem>
</TabControl>
</materialDesign:Card>
<!--信息框-->
<materialDesign:Snackbar x:Name="SnackbarThree" MessageQueue="{materialDesign:MessageQueue}" />
2025-05-31 20:30:22 +08:00
</Grid>
</Window>