C# WPF簡況（2/3）

微信公衆號：Dotnet9，網站：Dotnet9，問題或建議：請網站留言，
若是對您有所幫助：歡迎讚揚。

C# WPF簡況（2/3）

閱讀導航

1. 本文背景
2. 代碼實現
3. 本文參考

1.本文背景

承接上文（C# WPF聯繫人列表（1/3））,添加好友簡況。

本文效果以下：

2.代碼實現

使用 .Net CORE 3.1 建立名爲 「Chat」 的WPF項目，添加 MaterialDesignThemes(3.0.1)、MaterialDesignColors(1.2.2)兩個Nuget庫，文中部分圖片可在文末視頻配套源碼中下載。

2.1 引入MD控件樣式文件

使用MD控件的常規操做，須要在App.xaml中引入4個樣式文件

<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 界面佈局

純粹的佈局代碼：

<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"
        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>

        <Grid Grid.Column="1" Background="#FFE4E4E4"/>

        <StackPanel Grid.Column="0" Background="{StaticResource PrimaryHueDarkBrush}">
            <StackPanel Orientation="Horizontal" Background="White">
                <Image Width="210" Height="80" Source="Assets/logo.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="搜索" 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="一個熱衷於互聯網分享精神的程序員的網站!" 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>

        <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" HorizontalAlignment="Center" Margin="0 10 0 0" Foreground="Gray" FontSize="18" FontWeight="Bold"/>
            <TextBlock Text="Dotnet程序員" FontSize="13" Foreground="Gray" HorizontalAlignment="Center" Opacity="0.8"/>
            <TextBlock Text="時間如流水，只能流去不流回。" 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="成都" 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="視頻" 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>
    </Grid>
</Window>

2.2.3 窗體部分事件處理

後臺代碼

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

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

本文略短，原文視頻11分鐘，看視頻學習吧。

3.參考

1. 學習視頻：C# WPF Design UI - 2/3 - Profile
2. 視頻配套源碼：Chat

除非註明，文章均由 Dotnet9 整理髮布，歡迎轉載。

轉載請註明本文地址：https://dotnet9.com/6945.html

歡迎掃描下方二維碼關注 Dotnet9 的微信公衆號，本站會及時推送最新技術文章