标签：
效果分析：
1、鼠标左键单击 分组 的组名，能够弹出一个下拉列表，并且左边的向右箭头转成向下；
2、弹出的下拉列表中包含好友的头像，好友的昵称，还有好友的个性签名或最新动态；
3、当鼠标移到好友这一行，能够将一行的背景色置蓝或置橙；
4、当鼠标移到好友的头像上，能够悬浮显示好友的个人信息。
除了这些基本的效果，还有很多效果蕴含其中。。。。感觉分组列表的效果最难做。
我大致做出了那样的效果，很不美观。没达到一样的效果，就不分析思路了，以免误人子弟。
用的是ScrollViewer
前台：
<ScrollViewer VerticalScrollBarVisibility="Auto" Margin="8,0,10,10" Background="Transparent"> <ScrollViewer.Content> <StackPanel Width="230" Orientation="Vertical" HorizontalAlignment="Left" VerticalAlignment="Top" Name="FriendListControl"/> </ScrollViewer.Content> </ScrollViewer>
后台：
private void Window_Loaded(object sender,RoutedEventArgs e) { Test.GetGroupList().ToList().ForEach(s => { Expander t = new Expander(); t.Header = s; t.HeaderTemplate = this.FindResource("ExpanderHeaderTemplate") as DataTemplate; ListView v = new ListView(); v.ItemsSource = s.Children; v.Width = 280; v.BorderThickness = new Thickness(0); v.ItemTemplate = this.FindResource("FriendList") as DataTemplate; v.SelectionMode = SelectionMode.Single; t.Content = v; FriendListControl.Children.Add(t); //object obj = this.FindResource("TextBlockStateStyle"); }); }
后台代码中出现了几个自定义的资源字典，包括 ExpanderHeaderTemplate 和 FriendList 。
资源字典 （ResourceDictionary）代码如下：
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <DataTemplate x:Key="FriendList"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="20"/> <RowDefinition Height="20"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="40"/> <ColumnDefinition Width="130"/> </Grid.ColumnDefinitions> <Image Grid.Column="0" Grid.RowSpan="2" Source="NewFolder/basicQQ.jpg"/> <!--好友列表的头像图片--> <TextBlock Text="{Binding Path=Name}" Margin="5,1,0,1" Grid.Column="1" Grid.Row="0" TextAlignment="Left"/> <TextBlock Text="{Binding Path=Signature}" Margin="5,1,0,1" Grid.Column="1" Grid.Row="1" TextAlignment="Left"/> </Grid> </DataTemplate> <DataTemplate x:Key="ExpanderHeaderTemplate"> <WrapPanel> <TextBlock Text="{Binding Path=Name}" TextAlignment="Left"></TextBlock> <TextBlock Text="[" TextAlignment="Left"></TextBlock> <TextBlock Text="{Binding Path=OnlineFriendNum}" TextAlignment="Left"></TextBlock> <TextBlock Text="/" TextAlignment="Left"></TextBlock> <TextBlock Text="{Binding Path=TotalFriendNum}" TextAlignment="Left"></TextBlock> <TextBlock Text="]" TextAlignment="Left"></TextBlock> </WrapPanel> </DataTemplate> <Style x:Key="TextBlockStateStyle" TargetType="{x:Type TextBlock}"> <Setter Property="FontFamily" Value="宋体"/> <Setter Property="FontSize" Value="18"/> <Setter Property="Foreground" Value="#FF000000"/> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="BitmapEffect"> <Setter.Value> <OuterGlowBitmapEffect GlowSize="3" GlowColor="#FFFFFF"/> </Setter.Value> </Setter> </Trigger> </Style.Triggers> </Style> </ResourceDictionary>
最后那个 DataTemplate 多余了，TextBlockStateStyle 请自行忽略。
最后附上我在github上的源码地址：https://github.com/Danieldong0802/QQpresentation
虽是半成品，也是花上我这个初学者的好多时间才完成的，很多不足之处，望各位前辈指教！
WPF—QQ界面（五）：QQ好友分组列表的效果实现 及 截稿
标签：
原文地址：http://www.cnblogs.com/danieldong/p/5342853.html
