码迷,mamicode.com
首页 > Windows程序 > 详细

WPF—QQ界面(五):QQ好友分组列表的效果实现 及 截稿

时间:2016-03-31 21:51:07      阅读:430      评论:0      收藏:0      [点我收藏+]

标签:

效果分析:

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!