Making a similar QQ page with WPF
Development tools and key technologies: Visual Studio 2015, WPF
Author: Huang Yuan into
writing time: May 5, 2019
First set at width: 248 Height: 382 Grid grid layout with a number placed in the installation position of a small pattern, are provided to switch control state drop-down box, as well as a search box, other friends drop-down box. With XAML code to achieve:
<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>
Run effect diagram:
