C × WPF chat interface (3 / 3)

Reading navigation

1. Background of this article
2. code implementation
3. Reference in this article

1. Background

The last article in the series, a complete chat interface. Of course, it only depends on the effect. The specific project needs to make the left friend list, the middle conversation list, and the right contact profile into the form of MVVM binding. Making a template is a complete project. This series is only a design reference for the interface.

The first two articles:

1. C × WPF contact list (1 / 3)
2. C × WPF profile (2 / 3)

The final results of the three articles are as follows:

2. Code implementation

Use. Net CORE 3.1 to create a WPF project named "Chat". Add two Nuget libraries, MaterialDesignThemes(3.0.1) and MaterialDesignColors(1.2.2). All the pictures in the article have been replaced by the logo pictures outside the website of the webmaster. Directly Copy the code in the article to run. You can also download the source code of the original author for research and learning. The source code download link will be provided at the end of the article.

2.1 importing MD control style file

To use the general operation of MD control, four style files need to be introduced into App.xaml:

<Application x:Class="Chat.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Dark.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Green.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

2.2 interface layout

Pure layout code: the whole interface is divided into three parts: left, middle and right, that is, friend list, friend conversation and friend profile. For the actual project, the three parts need to be made into templates for MVVM binding development, which is convenient for expansion.

<Window x:Class="Chat.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Chat"
        mc:Ignorable="d"
        Height="600" Width="1080" ResizeMode="NoResize" MouseLeftButtonDown="Window_MouseLeftButtonDown"
        WindowStartupLocation="CenterScreen" WindowStyle="None" FontFamily="Dosis">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="270"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="270"/>
        </Grid.ColumnDefinitions>

        <!--#Friends list on the left of region -- >
        <StackPanel Grid.Column="0" Background="{StaticResource PrimaryHueDarkBrush}">
            <StackPanel Orientation="Horizontal" Background="White">
                <Image Width="210" Height="80" Source="https://img.dotnet9.com/logo-head.png"/>
                <Button Style="{StaticResource MaterialDesignFlatButton}">
                    <materialDesign:PackIcon Kind="PlusCircle" Width="24" Height="24"/>
                </Button>
            </StackPanel>
            <TextBox Margin="20 10" Style="{StaticResource MaterialDesignFloatingHintTextBox}" materialDesign:HintAssist.Hint="search" Foreground="White"/>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>

                <Button Style="{StaticResource MaterialDesignFlatButton}" Grid.Column="0">
                    <materialDesign:PackIcon Kind="History" Foreground="White"/>
                </Button>
                <Button Style="{StaticResource MaterialDesignFlatButton}" Grid.Column="1">
                    <materialDesign:PackIcon Kind="People" Foreground="White"/>
                </Button>
                <Button Style="{StaticResource MaterialDesignFlatButton}" Grid.Column="2">
                    <materialDesign:PackIcon Kind="Contacts" Foreground="White"/>
                </Button>
                <Button Style="{StaticResource MaterialDesignFlatButton}" Grid.Column="3">
                    <materialDesign:PackIcon Kind="Archive" Foreground="White"/>
                </Button>
            </Grid>
            <ListView>
                <ListViewItem HorizontalAlignment="Stretch">
                    <Grid HorizontalAlignment="Center" Margin="5">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="50"/>
                            <ColumnDefinition Width="150"/>
                            <ColumnDefinition Width="50*"/>
                        </Grid.ColumnDefinitions>

                        <Border Width="40" Height="40" CornerRadius="25" BorderBrush="White" BorderThickness="0.6">
                            <Border.Background>
                                <ImageBrush ImageSource="https://img.dotnet9.com/logo.png"/>
                            </Border.Background>
                        </Border>
                        <Border Width="10" Height="10" VerticalAlignment="Bottom" Margin="5" HorizontalAlignment="Right" CornerRadius="15" Background="LightGreen"/>

                        <StackPanel Grid.Column="1">
                            <TextBlock Text="Dotnet9.com" Margin="10 0"/>
                            <TextBlock Text="A website for programmers who are keen on the spirit of Internet sharing!" Margin="10 0" TextTrimming="CharacterEllipsis" Opacity="0.6" FontSize="11"/>
                        </StackPanel>

                        <Border Grid.Column="2" Width="20" Height="20" CornerRadius="15" Background="White" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5">
                            <TextBlock FontSize="11" Text="9" Foreground="{StaticResource PrimaryHueDarkBrush}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                    </Grid>
                </ListViewItem>
            </ListView>
        </StackPanel>
        <!--#Left friend list of endregion -- >

        <!--#region middle session area -- >
        <Grid Grid.Column="1" Background="#FFE4E4E4">
            <StackPanel Orientation="Horizontal" Height="100" VerticalAlignment="Top" Background="#FFE4E4E4">
                <StackPanel.Effect>
                    <DropShadowEffect BlurRadius="30" ShadowDepth="1"/>
                </StackPanel.Effect>
                <Border Width="10" Height="10" HorizontalAlignment="Right" Margin="15" Background="Green" CornerRadius="15" VerticalAlignment="Center"/>
                <TextBlock Text="Dotnet9.com" FontSize="28" VerticalAlignment="Center"/>
                <Button Style="{StaticResource MaterialDesignFloatingActionMiniButton}" Margin="15 15 10 15">
                    <materialDesign:PackIcon Kind="Call"/>
                </Button>
                <Button Style="{StaticResource MaterialDesignFloatingActionMiniButton}" Margin="15 15 10 15">
                    <materialDesign:PackIcon Kind="VideoCall"/>
                </Button>
            </StackPanel>
            <StackPanel Margin="0 100" VerticalAlignment="Bottom">
                <local:UserControlMessageReceived HorizontalAlignment="Left"/>
                <local:UserControlMessageSent HorizontalAlignment="Right"/>
            </StackPanel>
            <Border Background="#FFAFE6B2" VerticalAlignment="Bottom">
                <Grid Margin="0 10">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="70"/>
                        <ColumnDefinition Width="70"/>
                        <ColumnDefinition Width="70"/>
                    </Grid.ColumnDefinitions>
                    <TextBox Grid.Column="0" MaxHeight="80" TextWrapping="Wrap" Margin="5" AcceptsReturn="True" VerticalScrollBarVisibility="Auto"/>
                    <Button Grid.Column="3" VerticalAlignment="Bottom" Style="{StaticResource MaterialDesignFloatingActionMiniButton}">
                        <materialDesign:PackIcon Kind="Send"/>
                    </Button>
                    <Button Grid.Column="2" Background="{x:Null}" VerticalAlignment="Bottom" Style="{StaticResource MaterialDesignFloatingActionMiniButton}">
                        <materialDesign:PackIcon Kind="Attachment" Foreground="{StaticResource PrimaryHueDarkBrush}"/>
                    </Button>
                    <Button Background="{x:Null}" Grid.Column="1" VerticalAlignment="Bottom" Style="{StaticResource MaterialDesignFloatingActionMiniButton}">
                        <materialDesign:PackIcon Kind="Smiley" Foreground="{StaticResource PrimaryHueDarkBrush}"/>
                    </Button>
                </Grid>
            </Border>
        </Grid>
        <!--#End region middle session area -- >

        <!--#Contact information of participating session on the right side of region -- >
        <StackPanel Grid.Column="2" Background="White">
            <Button HorizontalAlignment="Right" Margin="10" Style="{StaticResource MaterialDesignFlatButton}" Click="Close_Click">
                <materialDesign:PackIcon Kind="Close"/>
            </Button>

            <Border Width="150" Height="150" CornerRadius="80" BorderThickness="1" BorderBrush="Gray">
                <Border.Background>
                    <ImageBrush ImageSource="https://img.dotnet9.com/logo.png"/>
                </Border.Background>
            </Border>

            <TextBlock Text="Dotnet9.com" HorizontalAlignment="Center" Margin="0 10 0 0" Foreground="Gray" FontSize="18" FontWeight="Bold"/>
            <TextBlock Text="Dotnet Programmer" FontSize="13" Foreground="Gray" HorizontalAlignment="Center" Opacity="0.8"/>
            <TextBlock Text="A website for programmers who are keen on the spirit of Internet sharing!" FontSize="8" Foreground="Gray" HorizontalAlignment="Center" Opacity="0.8"/>

            <StackPanel Margin="20">
                <StackPanel Orientation="Horizontal" Margin="0 3">
                    <materialDesign:PackIcon Kind="Location" Foreground="Gray"/>
                    <TextBlock Text="Chengdu" Margin="10 0" Foreground="Gray"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal" Margin="0 3">
                    <materialDesign:PackIcon Kind="Cellphone" Foreground="Gray"/>
                    <TextBlock Text="186 2806 0000" Margin="10 0" Foreground="Gray"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal" Margin="0 3">
                    <materialDesign:PackIcon Kind="Email" Foreground="Gray"/>
                    <TextBlock Text="632871194@qq.com" Margin="10 0" Foreground="Gray"/>
                </StackPanel>
            </StackPanel>

            <TextBlock Text="video" Margin="20 0" Foreground="Gray"/>
            <StackPanel Orientation="Horizontal" Margin="20 0">
                <Border Width="50" Height="50" CornerRadius="30" Margin="5">
                    <Border.Background>
                        <ImageBrush ImageSource="https://img.dotnet9.com/logo.png"/>
                    </Border.Background>
                </Border>
                <Border Width="50" Height="50" CornerRadius="30" Margin="5">
                    <Border.Background>
                        <ImageBrush ImageSource="https://img.dotnet9.com/logo.png"/>
                    </Border.Background>
                </Border>
                <Border Width="50" Height="50" CornerRadius="30" Margin="5">
                    <Border.Background>
                        <ImageBrush ImageSource="https://img.dotnet9.com/logo.png"/>
                    </Border.Background>
                </Border>
            </StackPanel>
        </StackPanel>
        <!--#Contact information of participating session on the right side of endregion -- >
    </Grid>
</Window>

2.2.3 event handling of form part

Background code

private void Window_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    DragMove();
}

private void Close_Click(object sender, RoutedEventArgs e)
{
    this.Close();
}

2.2.4 add two user controls

It is used to show the received session and the sent session. The real project can be made into a template.

Received session user control:

<UserControl x:Class="Chat.UserControlMessageReceived"
             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:Chat"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
        <Border Background="{StaticResource PrimaryHueDarkBrush}" CornerRadius="15 15 15 0" Margin="10 12">
            <TextBlock Margin="15" TextWrapping="Wrap" 
                       Text="Hello, how can I contact you?" Foreground="White"/>
        </Border>
        <TextBlock Text="Thursday 5 pm:45" HorizontalAlignment="Right" VerticalAlignment="Bottom" FontSize="10" Margin="10 -2"/>
    </Grid>
</UserControl>

Session user control sent:

<UserControl x:Class="Chat.UserControlMessageSent"
             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:Chat"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
        <Border Background="Gray" CornerRadius="15 15 0 15" Margin="10 12">
            <TextBlock Margin="15" TextWrapping="Wrap" Text="WeChat public address: Dotnet9，Website: https://dotnet9.com" Foreground="White"/>
        </Border>
        <TextBlock Text="Thursday 5 pm:55" HorizontalAlignment="Right" VerticalAlignment="Bottom" FontSize="10" Margin="10 -2"/>
    </Grid>
</UserControl>

3. reference

Learning video:

1. C# WPF Design UI - 1/3 - Contact List
2. C# WPF Design UI - 2/3 - Profile
3. C# WPF Design UI - 3/3 - Chat

Final source code: this code is almost the same as the source code, only part of the English in the text is replaced by Chinese, and the local picture is replaced by the webmaster's website Logo outside the chain, which is convenient for demonstration.

Click the right side to download the source code: Chat