Table of Contents
  • Getting Started
  • EO.Pdf
  • EO.Web
  • EO.WebBrowser
  • EO.Wpf
    • Overview
    • Installation & Deployement
    • Skin & Theme
    • Common Taskes and Services
    • EO.Wpf Buttons
    • EO.Wpf Calendar & DatePicker
    • EO.Wpf ComboBox
    • EO.Wpf DockView
    • EO.Wpf Gauge
    • EO.Wpf ListBox
    • EO.Wpf Menu
    • EO.Wpf MaskedEdit
    • EO.Wpf ProgressBar
    • EO.Wpf Slider
    • EO.Wpf SpinEdit
    • EO.Wpf SplitView
    • EO.Wpf TabControl
    • EO.Wpf TreeView
    • EO.Wpf Utility Controls
    • EO.Wpf WindowChrome
    • Sample Data Objects
  • Common Topics
  • Reference
Expander

EO.Wpf Expander offers the same functionalities as WPF standard Expander control, but also offers the ability to switch skins/themes programmatically and effects support. the following code switches the Expander to classic skin:

XAML
<!--A Expander that uses the "Classic" skin. Note this does
not affect any other controls -->
<eo:Expander eo:ThemeManager.SkinName="Classic" Header="Options">
    <StackPanel Margin="10,4,0,0">
        <eo:CheckBox HorizontalAlignment="Left">Option 1</eo:CheckBox>
        <eo:CheckBox HorizontalAlignment="Left">Option 2</eo:CheckBox>
        <eo:CheckBox HorizontalAlignment="Left">Option 3</eo:CheckBox>
        <eo:CheckBox HorizontalAlignment="Left">Option 4</eo:CheckBox>
    </StackPanel>
</eo:Expander>

See here for more information on how to use skin and theme features.

In addition to theme support, EO.Wpf Expander also supports ExpandEffect and CollapseEffect. The default ExpandEffect and CollapseEffect plays an accelerated sliding effect.

When the Expander control plays the sliding, it also dynamically changes the size of the Expander control. This makes it possible to stack multiple Expander controls together to create sliding panels. The following code demonstrates this behavior:

XAML
<eo:Expander Header="Basic Options" Margin="0,0,0,2">
    <StackPanel Margin="20,4,0,0">
        <eo:CheckBox HorizontalAlignment="Left">Option 1</eo:CheckBox>
        <eo:CheckBox HorizontalAlignment="Left">Option 2</eo:CheckBox>
        <eo:CheckBox HorizontalAlignment="Left">Option 3</eo:CheckBox>
        <eo:CheckBox HorizontalAlignment="Left">Option 4</eo:CheckBox>
    </StackPanel>
</eo:Expander>
<eo:Expander Header="Advanced Options" Margin="0,0,0,2">
    <StackPanel Margin="20,4,0,0">
        <eo:CheckBox HorizontalAlignment="Left">Option 1</eo:CheckBox>
        <eo:CheckBox HorizontalAlignment="Left">Option 2</eo:CheckBox>
        <eo:CheckBox HorizontalAlignment="Left">Option 3</eo:CheckBox>
        <eo:CheckBox HorizontalAlignment="Left">Option 4</eo:CheckBox>
    </StackPanel>
</eo:Expander>
<eo:Expander Header="System Options">
    <StackPanel Margin="20,4,0,0">
        <eo:CheckBox HorizontalAlignment="Left">Option 1</eo:CheckBox>
        <eo:CheckBox HorizontalAlignment="Left">Option 2</eo:CheckBox>
        <eo:CheckBox HorizontalAlignment="Left">Option 3</eo:CheckBox>
        <eo:CheckBox HorizontalAlignment="Left">Option 4</eo:CheckBox>
    </StackPanel>
</eo:Expander>

Run the above sample and expand "Basic Options", you will see while the contents of the "Basic Options" expanders slide in, it also pushes all contents below ("Advanced Options" and "System Options") accordingly, thus causing those contents to play the same sliding effect.

EO.Wpf Expander also supports expand/collapse effect. Use ExpandEffect and CollapseEffect to specify the expanding/collapsing effect accordingly.