WPF制作QQ列表（仿qq列表特效）

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

先看效果图：这个是折叠特效。

代码结构：

model是我们的数据模型，定义了在列表显示的人物名称图片简介。

Resource是我们的图片资源和存储图片资源路径、名称的资源文件。

GroupListCreate是我们的主要创建列表的模块。

代码如下：

public StackPanel CreateModuleEntry(List<GroupPerson> hrvGroups)

        {

            if (hrvGroups != null)

            {

                StackPanel spl = new StackPanel();   //创建一个最外围的框

                List<GroupPerson> groups = hrvGroups;

                foreach (GroupPerson g in groups)      //根据分组去遍历

                {

                    int count = ;

                    Expander ex = new Expander();     //每一个分组

                    ex.Header = g.Name;

                    List<Person> modules = new List<Person>();

                    modules = g.Persons;

                    StackPanel sp = new StackPanel();     //每一个分组的框

                    foreach (Person m in modules)

                    {

                        DockPanel dp = new DockPanel();

                        if (count >= )

                        {

                            Thickness dpMargin = new Thickness(, , , );

                            dp.Margin = dpMargin;

                        }

                        dp.MouseLeave += new System.Windows.Input.MouseEventHandler(dp_MouseLeave);

                        dp.MouseEnter += new System.Windows.Input.MouseEventHandler(dp_MouseEnter);

                        dp.MouseLeftButtonDown += new System.Windows.Input.MouseButtonEventHandler(dp_MouseLeftButtonDown);

                        dp.MouseLeftButtonUp += new System.Windows.Input.MouseButtonEventHandler(dp_MouseLeftButtonUp);

                        //人物头像

                        Bitmap bm = new Bitmap(ImagePathResource.ImageSource+m.Ico);

                        MemoryStream ms = new MemoryStream();

                        bm.Save(ms, System.Drawing.Imaging.ImageFormat.Png);

                        BitmapImage bi = new BitmapImage();

                        bi.BeginInit();

                        bi.StreamSource = new MemoryStream(ms.ToArray());

                        bi.EndInit();

                        ms.Dispose();

                        System.Windows.Controls.Image image = new System.Windows.Controls.Image();

                        Thickness imageMargin = new Thickness(, , , );

                        image.Margin = imageMargin;

                        image.Source = bi;

                        image.Width = ;

                        image.Height = ;

                        image.Stretch = Stretch.Fill;

                        //人物名称

                        Label lblName = new Label();

                        Thickness lblNameMargin = new Thickness(, , , );

                        lblName.Margin = lblNameMargin;

                        lblName.Height = ;

                        lblName.Content = m.Name;

                        lblName.FontSize = ;

                        lblName.FontWeight = FontWeights.Bold;

                        //人物说明

                        WrapPanel dpl = new WrapPanel();

                        Thickness t3 = new Thickness(, , , );

                        dpl.Margin = t3;

                        //说明文字的自动换行

                        for (int i = ; i < m.Introduction.Length; i++)

                        {

                            string s = m.Introduction.Substring(i, );

                            Label lblResume = new Label();

                            lblResume.Content = s;

                            dpl.Children.Add(lblResume);

                        }

                        dpl.ItemHeight = ;

                        dp.Children.Add(image);

                        dp.Children.Add(lblName);

                        dp.Children.Add(dpl);

                        DockPanel.SetDock(image, Dock.Left);

                        DockPanel.SetDock(lblName, Dock.Top);

                        sp.Children.Add(dp);

                        count++;

                    }

                    ex.Content = sp;

                    spl.Children.Add(ex);

                }

                return spl;

            }

            return null;

        }

这里我们直接返回一个stackpanel用来在界面展示，这样自动创捷列表基本上就完成了。
里面的四个事件是用来做鼠标浮动其上和按下的效果

void dp_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)

        {

            dp = sender as DockPanel;

            dp.Background = System.Windows.Media.Brushes.LightGray;

        }

        DockPanel dp = null;

        void dp_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)

        {

            dp = sender as DockPanel;

            dp.Background = System.Windows.Media.Brushes.LightGray;

        }

        void dp_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)

        {

            dp = sender as DockPanel;

            dp.Background = System.Windows.Media.Brushes.Gray;

        }

        void dp_MouseLeave(object sender, System.Windows.Input.MouseEventArgs e)

        {

            dp = sender as DockPanel;

            dp.Background = System.Windows.Media.Brushes.Transparent;

        }

剩下的工作就是怎样去显示和显示出比较炫的效果了。

先说说显示，显示主要就在PersonView.xaml文件里面，这是一个UserControl；

这个很简单首先在PersonView.xaml里面用一个Grid，里面再放一个ScrollViewer再加上我们的　　StackPanel就大功告成了！

代码如下：

<UserControl x:Class="WpfApplication2.PersonView"

             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

             mc:Ignorable="d"

             Background="Black"

             d:DesignHeight="" d:DesignWidth=""

              Loaded="UserControl_Loaded">

    <Grid Name="gd">

        <ScrollViewer Name="sv" Width="" Height=""  VerticalScrollBarVisibility="Auto">

            <StackPanel Name="sp">

            </StackPanel>

        </ScrollViewer>

    </Grid>

</UserControl>

PersonView.xaml.cs文件代码：

private void UserControl_Loaded(object sender, RoutedEventArgs e)

        {

            List<GroupPerson> gps = GetListGroup();

            GroupListCreate glc = new GroupListCreate();

            sp = glc.CreateModuleEntry(gps);

            sv.Content = sp;

        }

关于GetListGroup 我就不写了这个就是根据我们定义的数据模型去给初始化一下。

数据模型和Style我就不贴了数据模型看我创建的列表就能看出来， Style代码实在太多。

需要完整代码的朋友请加群

C#/WPF技术交流群： 94234450

点击加入QQ群：