微信公衆号：Dotnet9，網站：Dotnet9，問題或建議：請網站留言，
如果對您有所幫助：歡迎贊賞。
C# WPF簡況（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="[email protected]" 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.參考
- 學習視訊：C# WPF Design UI - 2/3 - Profile
- 視訊配套源碼：Chat
除非注明，文章均由 Dotnet9 整理釋出，歡迎轉載。
轉載請注明本文位址：https://dotnet9.com/6945.html
歡迎掃描下方二維碼關注 Dotnet9 的微信公衆号，本站會及時推送最新技術文章
時間如流水，隻能流去不流回。
![Unity遊戲開發背景知識[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)