WPF Dev implements accordion effects

Description

Recently, when using wpf+devexpress to do a project, you need to do an accordion-like effect, the effect of the interface is as follows. Because there is no ready-made control, you need to customize the template, so write a demo and share, the project can be used according to the actual situation. If you achieve the same effect in different ways, welcome to communicate together and progress together.

Demand

Ideas

WPF development project, it is important to remember a principle, that is, data drivers, in WPF, the data is always the main position, carefully analyze the above data, can draw the following structure

Group1

ParmName1 ParmValue1

ParmName2 ParmValue2

Group2

ParmName1 ParmValue1

ParmName2 ParmValue2

Parmnamen Parmvaluen

The outer group data is a set of data, and the info data for the inner layer is a set of data, and the data type of each group is the same. In WPF, the first reaction is supposed to be itemscontrol, so the outer layer should be a listbox-like control, the inner layer of the gridcontrol-like control, but also the effect of the accordion, it is necessary to rewrite the ListBoxItem style. Next, we will use itemscontrol+template to achieve the effect we want.

Source

<window x:class="Testlistbox.mainwindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="Http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"XMLNS:MC="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:local="Clr-namespace:testlistbox"Xmlns:dxg="Http://schemas.devexpress.com/winfx/2008/xaml/grid"Xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"XMLNS:DXN="Http://schemas.devexpress.com/winfx/2008/xaml/navbar"mc:ignorable="D"Title="MainWindow"height=" -"Width=" -"> <Window.Resources> <datatemplate x:key="navbaritemcontenttemplate"> <dxg:gridcontrol x:name="Gridattribute"maxheight=" -"Itemssource="{Binding}"> <dxg:GridControl.Columns> <dxg:gridcolumn fieldname="Parmname"></dxg:GridColumn> <dxg:gridcolumn fieldname="Parmvalue"></dxg:GridColumn> </dxg:GridControl.Columns> <dxg:GridControl.View> <dxg:tableview x:name="viewsimulate"Autowidth="True"Showindicator="False"Showgrouppanel="False"allowediting="True"allowcolumnfiltering="False"Iscolumnmenuenabled="False"verticalscrollbarvisibility="Auto"showcolumnheaders="false"/> </dxg:GridControl.View> </dxg:GridControl> </DataTemplate> <style x:key="Listboxeditsyle"Targettype="{x:type Dxe:listboxedititem}"> <setter property="Template"> <Setter.Value> <ControlTemplate> <dxn:navbarc Ontrol name="NavBar"> <dxn:NavBarControl.Groups> <dxn:navbargroup Header ="{Binding GroupName}"> <!--<dxn:navbaritem content="{Binding Parms}"Template="{StaticResource Navbaritemcontenttemplate}"/>--> <contentcontrol content="{Binding Parms}"Contenttemplate="{StaticResource Navbaritemcontenttemplate}"/> </dxn:NavBarGroup> </dxn:NavBarControl.Groups> </dxn:NavBarControl> </ControlTemplate> </setter. value> </Setter> </Style> </Window.Resources> <Grid> <d Xe:listboxedit x:name="lbattr"margin="-10,0,0,0"scrollviewer.verticalscrollbarvisibility="Auto"Width=" -"height="Auto"scrollviewer.horizontalscrollbarvisibility="Disabled"Showborder="False"Itemcontainerstyle="{StaticResource Listboxeditsyle}"allowcollectionview="True"> </dxe:ListBoxEdit> </Grid></Window>

Background source

 
entity class definitions for data sources
 Public classObjatt { Public stringGroupName {Get;Set; }  PublicList<parm> Parms {Get;Set; } }     Public classParm { Public stringParmname {Get;Set; }  Public stringParmvalue {Get;Set; } }

  Public Partial classMainwindow:window { PublicMainWindow () {InitializeComponent (); Lbattr.itemssource=Inititemsource (); }        PrivateList<objatt>Inititemsource () {List<ObjAtt> Objatts =NewList<objatt>(); Objatts.add (NewObjatt () {GroupName="Big Class 1", Parms=NewList<parm>()                {                   NewParm () {parmname ="Parameter name 1", Parmvalue ="parameter value 1"},                   NewParm () {parmname ="Parameter Name 2", Parmvalue ="parameter Value 2"},                },            }); Objatts.add (NewObjatt () {GroupName="Big Class 2", Parms=NewList<parm>()                {                   NewParm () {parmname ="Parameter name 1", Parmvalue ="parameter value 1"},                   NewParm () {parmname ="Parameter Name 2", Parmvalue ="parameter Value 2"},                },            }); Objatts.add (NewObjatt () {GroupName="Big Class 3", Parms=NewList<parm>()                {                   NewParm () {parmname ="Parameter name 1", Parmvalue ="parameter value 1"},                   NewParm () {parmname ="Parameter Name 2", Parmvalue ="parameter Value 2"},                },            }); Objatts.add (NewObjatt () {GroupName="Big Class 4", Parms=NewList<parm>()                {                   NewParm () {parmname ="Parameter name 1", Parmvalue ="parameter value 1"},                   NewParm () {parmname ="Parameter Name 2", Parmvalue ="parameter Value 2"},                },            }); returnObjatts; }    }

Description

In order to achieve the effect of the demo, the data source in the background I wrote dead at the beginning. In real-world project development, you can write a method for getting data in ViewModel, and then use the binding in WPF to easily bind a data source to a control.

WPF Dev implements accordion effects