用WPF制作一个类似QQ的页面
开发工具与关键技术：Visual Studio 2015、WPF
作者：黄元进
撰写时间：2019年5月5日
首先设置一下宽：248 高：382 用Grid网格布局设置一些放置小图案的位置，设置了可以切换状态的下拉框控件，还有搜索框，其他好友下拉框。用XAML代码实现：
<Window x:Class="Wpf1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="QQ2019" Height="382" Width="248"
Background="DimGray" WindowStyle="None"MinHeight="382" MinWidth="248">
<Window.Resources>
<SolidColorBrush x:Key="ForeColor">YellowGreen</SolidColorBrush>
<SolidColorBrush x:Key="BackColor">DimGray</SolidColorBrush>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="8*"/>
<RowDefinition Height="1.2*"/>
</Grid.RowDefinitions>
<Canvas Grid.Row="0" Grid.ColumnSpan="2"Height="18">
<TextBlock Canvas.Left="0"Canvas.Top="0" Foreground="{StaticResource ForeColor}"FontWeight="ExtraBold">QQ 2019</TextBlock>
<StackPanel Canvas.Right="0"Canvas.Top="0" Orientation="Horizontal">
<Button>-</Button>
<Button Background="AliceBlue">[]</Button>
<Button Background="Red">X</Button>
</StackPanel>
</Canvas>
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image Grid.Row="0"Grid.Column="0" Grid.RowSpan="2" Source="Imges\1.jpg"/>
<StackPanel Grid.Row="0"Grid.Column="1" Orientation="Horizontal">
<Label VerticalAlignment="Center"Foreground="{StaticResource ForeColor}">状态</Label>
<!--下拉框状态-->
<ComboBox VerticalAlignment="Center"IsEditable="True" BorderBrush="{StaticResource BackColor}"
Foreground="{StaticResource ForeColor}"Background="{StaticResource BackColor}">
<ComboBoxItem>[我在线上]</ComboBoxItem>
<ComboBoxItem>[忙碌]</ComboBoxItem>
<ComboBoxItem>[离开]</ComboBoxItem>
</ComboBox>
</StackPanel>
<StackPanel Grid.Row="1"Grid.Column="1" Orientation="Horizontal">
<Button Background="Transparent">
<Image Source="Imges\1.jpg"Height="20"/>
</Button>
<Button Background="Transparent">
<Image Source="Imges\1.jpg"Height="20"/>
</Button>
<Button Background="Transparent">
<Image Source="Imges\1.jpg"Height="20"/>
</Button>
<Button Background="Transparent">
<Image Source="Imges\1.jpg"Height="20"/>
</Button>
</StackPanel>
</Grid>
<TextBox Grid.Row="2"Grid.ColumnSpan="2" Foreground="Gray">搜索</TextBox>
<Grid Grid.Row="3">
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0"Orientation="Vertical">
<Button Background="Transparent">
<Image Source="Imges\1.jpg"Height="20"/>
</Button>
<Button Background="Transparent">
<Image Source="Imges\1.jpg"Height="20"/>
</Button>
<Button Background="Transparent">
<Image Source="Imges\1.jpg"Height="20"/>
</Button>
<Button Background="Transparent">
<Image Source="Imges\1.jpg"Height="20"/>
</Button>
</StackPanel>
<ListBox Grid.Column="1"ScrollViewer.VerticalScrollBarVisibility="Visible">
<ListBoxItem>
<Expander Header="偶滴好友">
</Expander>
</ListBoxItem>
<Expander Header="朋友们">
</Expander>
<ListBoxItem/>
</ListBox>
</Grid>
</Grid>
</Window>
运行效果图：
