WPF learning path (12) control (HeaderedContent control), wpfheaderedcontent

WPF learning path (12) control (HeaderedContent control), wpfheaderedcontent

 

 GroupBox

It is a common control used to organize multiple controls. Because it is a content space, it can only contain one item directly. you need to use an intermediate space like a panel.

Header and Content can be any element

<GroupBox>    <GroupBox.Header>        <WrapPanel Margin="5">            <Image Source=".\Image\icon.png"></Image>            <TextBlock Text="Database List: " FontSize="20" />        </WrapPanel>    </GroupBox.Header>    <GroupBox.Content>        <StackPanel TextBlock.FontSize="20" Margin="5">            <TextBlock Text="DB001" />            <TextBlock Text="DB002" />            <TextBlock Text="DB003" />            <TextBlock Text="DB004" />            <TextBlock Text="DB005" />        </StackPanel>    </GroupBox.Content></GroupBox>

 

More

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, a button can be included to expand or collapse the content.

<StackPanel Margin = "5"> <Expander. header> <WrapPanel Margin = "2"> <Image Source = ". \ Image \ icon.png "Height =" 20 "> </Image> <TextBlock Text =" Database List: "> </TextBlock> </WrapPanel> </Expander. header> <Expander. content> <StackPanel TextBlock. fontSize = "15"> <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 =" 20 "> </Image> <TextBlock Text =" Database List: "> </TextBlock> </WrapPanel> </Expander. header> <Expander. content> <StackPanel TextBlock. fontSize = "15"> <TextBlock Text = "DB001"/> <TextBlock Text = "DB002"/> </StackPanel> </Expander. content> </Expander> <Expander ExpandDirection = "Right"> <Expander. header> <WrapPanel Margin = "2"> <Image Source = ". \ Image \ icon.png "Height =" 20 "> </Image> <TextBlock Text =" Database List: "> </TextBlock> </WrapPanel> </Expander. header> <Expander. content> <StackPanel TextBlock. fontSize = "15"> <TextBlock Text = "DB001"/> <TextBlock Text = "DB002"/> </StackPanel> </Expander. content> </Expander> <Expander ExpandDirection = "Up"> <Expander. header> <WrapPanel Margin = "2"> <Image Source = ". \ Image \ icon.png "Height =" 20 "> </Image> <TextBlock Text =" Database List: "> </TextBlock> </WrapPanel> </Expander. header> <Expander. content> <StackPanel TextBlock. fontSize = "15"> <TextBlock Text = "DB001"/> <TextBlock Text = "DB002"/> </StackPanel> </Expander. content> </Expander> </StackPanel>View Code

 

Simplified code

Create an 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="20" ></Image>            <TextBlock Text="Database List: "></TextBlock>        </WrapPanel>    </Expander.Header>    <Expander.Content>        <StackPanel TextBlock.FontSize="15">            <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

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