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 = 1;
                    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 >= 2)
                        {
                            Thickness dpMargin = new Thickness(0, 10, 0, 0);
                            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(0, 0, 0, 0);
                        image.Margin = imageMargin;
                        image.Source = bi;
                        image.Width = 50;
                        image.Height = 50;
                        image.Stretch = Stretch.Fill;


                        //人物名稱
                        Label lblName = new Label();
                        Thickness lblNameMargin = new Thickness(15, 0, 0, 0);
                        lblName.Margin = lblNameMargin;
                        lblName.Height = 25;
                        lblName.Content = m.Name;
                        lblName.FontSize = 13;
                        lblName.FontWeight = FontWeights.Bold;


                        //人物說明
                        WrapPanel dpl = new WrapPanel();
                        Thickness t3 = new Thickness(15, 0, 0, 0);
                        dpl.Margin = t3;
                        //說明文字的自動換行
                        for (int i = 0; i < m.Introduction.Length; i++)
                        {
                            string s = m.Introduction.Substring(i, 1);
                            Label lblResume = new Label();
                            lblResume.Content = s;
                            dpl.Children.Add(lblResume);
                        }
                        dpl.ItemHeight = 18;

                        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="300" d:DesignWidth="250"
              Loaded="UserControl_Loaded">
    <Grid Name="gd">
        <ScrollViewer Name="sv" Width="250" Height="300"  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群：

不管你遇到了什么問題，我們都不會讓你獨自去面對！