您的位置:首页 > 其它

使用WPF制作一个类似QQ的界面

2011-03-31 16:48 387 查看


界面比较简陋,但是应该山寨了QQ界面的80%。如果有时间,我会继续完善这个demo。

<Window x:Class="Qlike.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="QLike 2010" 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="*"/> <!--Title  0-->
<RowDefinition Height="2*" />               <!--Photo  1-->
<RowDefinition Height="*"/>               <!--Search 2-->
<RowDefinition Height="8*"/>               <!--Main   3-->
<RowDefinition Height="1.2*"/>               <!--Wiget  4-->
</Grid.RowDefinitions>
<Canvas Grid.Row="0" Grid.ColumnSpan="2" Height="18">
<TextBlock Canvas.Left="0" Canvas.Top="0" Foreground="{StaticResource ForeColor}" FontWeight="ExtraBold">QLike 2010</TextBlock>
<StackPanel Canvas.Right="0" Canvas.Top="0"  Orientation="Horizontal">
<Button> - </Button>
<Button Background="AliceBlue"> [] </Button>
<Button Click="Button_Click" 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="Img/usertile16.bmp"/>
<StackPanel Grid.Row="0" Grid.Column="1" Orientation="Horizontal">
<Label VerticalAlignment="Center" Foreground="{StaticResource ForeColor}">Baesky</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="Img\Facebook_creatures.ico" Height="20"/>
</Button>
<Button Background="Transparent">
<Image Source="Img\Feed_creatures.ico" Height="20"/>
</Button>
<Button Background="Transparent">
<Image Source="Img\Flickr_creatures.ico" Height="20"/>
</Button>
<Button Background="Transparent">
<Image Source="Img\Twitter_creatures.ico" 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="Img\Tree_01.ico" Height="20"/>
</Button>
<Button Background="Transparent">
<Image Source="Img\Tree_02.ico" Height="20"/>
</Button>
<Button Background="Transparent">
<Image Source="Img\Tree_03.ico" Height="20"/>
</Button>
<Button Background="Transparent">
<Image Source="Img\Tree_04.ico" Height="20"/>
</Button>
</StackPanel>
<ListBox Grid.Column="1" ScrollViewer.VerticalScrollBarVisibility="Visible">
<ListBoxItem>
<Expander Header="偶滴好友">
<StackPanel Orientation="Horizontal">
<Image Source="Img\Mask 01_32x32.png" />
<TextBlock VerticalAlignment="Center">Ferdinand</TextBlock>
</StackPanel>
</Expander>
</ListBoxItem>
<ListBoxItem>
<Expander Header="朋友们">
<StackPanel>
<StackPanel Orientation="Horizontal">
<Image Source="Img\Mask 03_32x32.png" />
<TextBlock VerticalAlignment="Center">Marcus</TextBlock>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Image Source="Img\Mask 02_32x32.png" />
<TextBlock VerticalAlignment="Center">Fergus</TextBlock>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Image Source="Img\Mask 04_32x32.png" />
<TextBlock VerticalAlignment="Center">Jay</TextBlock>
</StackPanel>
</StackPanel>
</Expander>
</ListBoxItem>
</ListBox>
</Grid>
<StatusBar Grid.Row="4" Background="Transparent" >
<Button Background="Transparent" Padding="0,0,0,0" Margin="0,0,0,0">
<Image Source="Img\InterneExplorer.png"/>
</Button>
<Button Background="Transparent" Padding="0,0,0,0" Margin="-6,0,0,0">
<Image Source="Img\Internet.png"/>
</Button>
<Button Background="Transparent" Padding="0,0,0,0" Margin="-6,0,0,0">
<Image Source="Img\Neighborhood.png"/>
</Button>
<Button Background="Transparent" Padding="0,0,0,0" Margin="-6,0,0,0" BorderBrush="{StaticResource BackColor}">
<Image Source="Img\Mac.png"/>
</Button>
</StatusBar>
</Grid>
</Window>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: