WPF Learning Path (12) control (Headeredcontent control)

GroupBox

A common control used to organize multiple controls, because it is a content space that can contain only one item directly, and requires the use of intermediate spaces of a panel type.

Header and content can be any element

<GroupBox> <GroupBox.Header> <wrappanel margin="5"> <image source=". \image\icon.png"></Image> <textblock text="Database List:"Fontsize=" -"/> </WrapPanel> </GroupBox.Header> <GroupBox.Content> <stackpanel textblock.fo Ntsize=" -"margin="5"> <textblock text="DB001"/> <textblock text="DB002"/> <textblock text="DB003"/> <textblock text="DB004"/> <textblock text="DB005"/> </StackPanel> </GroupBox.Content></GroupBox>

More content

Http://www.dotnetperls.com/groupbox-wpf

Https://msdn.microsoft.com/en-us/library/system.windows.controls.groupbox (v=vs.110). aspx

Expander

Similar to GroupBox, contains a button to expand or collapse content

<stackpanel margin="5"> <Expander> <Expander.Header> <wrappanel margin="2"> <image source=". \image\icon.png"height=" -"></Image> <textblock text="Database List:"></TextBlock> </WrapPanel> </Expander.Header> <Expander.Content> <stackpanel textblock.fontsize=" the"> <textblock text="DB001"/> <textblock text="DB002"/> <textblock text="DB003"/> <textblock text="DB004"/> </StackPanel> </Expander.Content> </Expander> <expander expanddirection =" Left"> <Expander.Header> <wrappanel margin="2"> <image source=". \image\icon.png"height=" -"></Image> <textblock text="Database List:"></TextBlock> </WrapPanel> </Expander.Header> <Expander.Content> <stackpanel textblock.fontsize=" the"> <textblock text="DB001"/> <textblock text="DB002"/> </StackPanel> </Expander.Content> </Expander> <expander expanddirection =" Right"> <Expander.Header> <wrappanel margin="2"> <image source=". \image\icon.png"height=" -"></Image> <textblock text="Database List:"></TextBlock> </WrapPanel> </Expander.Header> <Expander.Content> <stackpanel textblock.fontsize=" the"> <textblock text="DB001"/> <textblock text="DB002"/> </StackPanel> </Expander.Content> </Expander> <expander expanddirection =" up"> <Expander.Header> <wrappanel margin="2"> <image source=". \image\icon.png"height=" -"></Image> <textblock text="Database List:"></TextBlock> </WrapPanel> </Expander.Header> <Expander.Content> <stackpanel textblock.fontsize=" the"> <textblock text="DB001"/> <textblock text="DB002"/> </StackPanel> </Expander.Content> </Expander></StackPanel>

View Code

Simplifying code

Create a Expanderdemo class

 Public Partial class expanderdemo:expander{    public  Expanderdemo ()    {        InitializeComponent ();    }}

<expander x:class="Alex_wpfcontrol.expanderdemo"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="Http://schemas.microsoft.com/winfx/2006/xaml"> <Expander.Header> <wrappanel margin="2"> <image source=". \image\icon.png"height=" -"></Image> <textblock text="Database List:"></TextBlock> </WrapPanel> </Expander.Header> <Expander.Content> &LT;STACKP Anel textblock.fontsize=" the"> <textblock text="DB001"/> <textblock text="DB002"/> </StackPanel> </Expander.Content></Expander>

Window.xaml

<StackPanel>    <local:expanderdemo/>    <local:expanderdemo expanddirection="  left" />    <local:expanderdemo expanddirection="right" />    <local:expanderdemo expanddirection="up" /></stackpanel>

More content

http://blog.csdn.net/tcjiaan/article/details/6970200

Https://msdn.microsoft.com/en-us/library/system.windows.controls.expander (v=vs.110). aspx

To be continue ...

WPF Learning Path (12) control (Headeredcontent control)