Continue with WPF -- expander Control (1)

 

Welcome to the. NET technology exchange group: 189931386 Expander is a control that can be expanded and collapsed. It contains two parts: header and content. The header is set through the header attribute, and the content is set through the conent attribute, as shown in the following simple example:

 
<Expander expanddirection = "down" width = "96"> <expander. header> <textblock text = "title" fontweight = "bold"/> </expander. header> <expander. content> <textblock textwrapping = "Wrap" text = "here is the content. "/> </Expander. content> </expander>
 

The header and content of the expander control can be any object, as long as it can be properly displayed.The following figure shows the operation of the control.

The most practical part of this control is the navigation bar.

<Stackpanel margin = "20, 20" width = "100" Height = "460" horizontalalignment = "Left" verticalignment = "TOP"> <expander verticalignment = "stretch" expanddirection = "down" horizontalcontentalignment = "Left" snapstodevicepixels = "true"> <expander. header> <textblock text = "user management" fontsize = "14" fontweight = "bold"/> </expander. header> <expander. content> <grid. rowdefinitions> <rowdefinition Height = "Auto"/> <rowdefinition Height = "Auto"/> </grid. rowdefinitions> <radiobutton grid. row = "0"> member management </radiobutton> <radiobutton grid. row = "1"> role management </radiobutton> </GRID> </expander. content> </expander> <expander verticalalignment = "stretch" expanddirection = "down" horizontalcontentalignment = "Left" snapstodevicepixels = "true"> <expander. header> <textblock text = "Document Management" fontsize = "14" fontweight = "bold"/> </expander. header> <expander. content> <grid. rowdefinitions> <rowdefinition Height = "Auto"/> </grid. rowdefinitions> <radiobutton grid. row = "0"> Department Information </radiobutton> <radiobutton grid. row = "1"> employee profile </radiobutton> <radiobutton grid. row = "2"> job information </radiobutton> </GRID> </expander. content> </expander> <expander verticalalignment = "stretch" expanddirection = "down" horizontalcontentalignment = "Left" snapstodevicepixels = "true"> <expander. header> <textblock text = "purchasing management" fontsize = "14" fontweight = "bold"/> </expander. header> <expander. content> <grid. rowdefinitions> <rowdefinition Height = "Auto"/> <rowdefinition Height = "Auto"/> <rowdefinition height = "Auto"/> </grid. rowdefinitions> <radiobutton grid. row = "0"> purchase plan </radiobutton> <radiobutton grid. row = "1"> requirement analysis </radiobutton> <radiobutton grid. row = "2"> purchase order </radiobutton> <radiobutton grid. row = "3"> warehouse receiving acceptance </radiobutton> <radiobutton grid. row = "4"> warehouse receiving and return </radiobutton> </GRID> </expander. content> </expander> <expander verticalalignment = "stretch" expanddirection = "down" horizontalcontentalignment = "Left" snapstodevicepixels = "true"> <expander. header> <textblock text = "" fontsize = "14" fontweight = "bold"/> </expander. header> <expander. content> <grid. rowdefinitions> <rowdefinition Height = "Auto"/> </grid. rowdefinitions> <radiobutton grid. row = "0"> Basic Information </radiobutton> <radiobutton grid. row = "1"> transaction units </radiobutton> <radiobutton grid. row = "2"> upstream suppliers </radiobutton> </GRID> </expander. content> </expander> </stackpanel>

In addition, the expanddirection attribute can be used to control the direction of expansion.

 
<Expander verticalalignment = "stretch" expanddirection = "right" horizontalcontentalignment = "Left" snapstodevicepixels = "true"> ...... </expander>