Create a QQ list using WPF (similar to QQ list special effects)

First look: This is the fold effect.

 

Code structure:

Model is our data model that defines the profile of the person name shown in the list.

Resource is our image resource and the resource file that stores the path and name of the image resource.

Grouplistcreate is our main module for creating a list.

The Code is as follows:

Public stackpanel createmoduleentry (list <groupperson> hrvgroups) {If (hrvgroups! = NULL) {stackpanel SPL = new stackpanel (); // create a list <groupperson> groups = hrvgroups; foreach (groupperson g in groups) // traverse by Group {int COUNT = 1; expander EX = new expander (); // each group ex. header = G. name; List <person> modules = new list <person> (); Modules = G. persons; stackpanel sp = new stackpanel (); // The 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; // character name 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; // character description wrappanel DPL = new wrappanel (); thickness T3 = New thickness (15, 0, 0, 0); DPL. margin = T3; // indicates the automatic line feed of text (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 ;}

View code

Here we directly return a stackpanel for display on the interface, so that the automatic creation list is basically complete.
The four events are used to hover the mouse over and press the mouse.

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;        }

 

The rest of the work is how to display and display the dazzling effect.

Let's talk about the display. The display is mainly in the personview. XAML file. This is a usercontrol;

This is simple. First, use a grid in personview. XAML, and put a scrollviewer in it and add our stackpanel!

The Code is as follows:

<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>

 

Code of the personview. XAML. CS file:

private void UserControl_Loaded(object sender, RoutedEventArgs e)        {            List<GroupPerson> gps = GetListGroup();            GroupListCreate glc = new GroupListCreate();            sp = glc.CreateModuleEntry(gps);            sv.Content = sp;        }

I will not write about getlistgroup. This is to initialize it based on our defined data model.

 

The data model and style are not pasted with the data model. The list I created can be seen, and there are too many style codes.

Add a group of friends who need complete code

 

C #/WPF technology exchange group: 94234450

No matter what problems you encounter, we will not let you face it alone!

Create a QQ list using WPF (similar to QQ list special effects)