TheDeveloperBlog.com
C-Sharp | Java | Python | Swift | GO | WPF | Ruby | Scala | F# | JavaScript | SQL | PHP | Angular | HTML
WPF Expander Control
Use the WPF Expander control to show or hide controls. See the effect of ExpandDirection.Expander, WPF. An Expander control has an arrow button. When the arrow is clicked, the elements within the Expander are shown or hidden. The arrow "expands" the control so its sub-controls are visible.
Example. Please drag an Expander control to your WPF Window. Next, we can add elements inside the Expander—these will be hidden or shown by the Expander arrow. Here I added a TextBlock element to the Expander.
Note: I modified the "Header" attribute of the Expander element. The Expander here shows a description when it is clicked.
IsExpanded: I modified the IsExpanded attribute to be false. This means when the program is started, the description is not visible.
TextBlock: On the TextBlock, I modified the "Text" property and the "Margin" property—these are not important.
Example markup: XAML
<Window x:Class="WpfApplication17.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Expander Header="Description"
HorizontalAlignment="Left"
Margin="10,10,0,0"
VerticalAlignment="Top"
IsExpanded="False"
Height="299"
Width="497">
<TextBlock TextWrapping="Wrap"
Text="This is some text content."
Margin="5"/>
</Expander>
</Grid>
</Window>
ExpandDirection. One important option on the Expander is the ExpandDirection. This can be set to Down, Left, Right or Up. As you might expect, the arrow changes to point in the specified direction. Then, the content expands in that area.
Here: In the screenshot, I used an ExpandDirection of Right. The TextBlock appears to the right after the arrow is clicked.
Expanded, Collapsed. Two events are key to the Expander control. The Expanded event is triggered when the arrow button is pressed. And the Collapsed event is run when the controls are hidden again. In Expanded, we get the Expander from the sender object.
Then: We assign the Window Title to the value of the Header attribute on the Expander element.
Collapsed: In this event handler, we set the Window Title to "Collapsed." I never said this program was useful.
Example markup 2: XAML
<Expander Header="Description"
HorizontalAlignment="Left"
Margin="10,10,0,0"
VerticalAlignment="Top"
IsExpanded="False"
ExpandDirection="Right"
Expanded="Expander_Expanded"
Collapsed="Expander_Collapsed"
Height="299"
Width="497">
Example code 2: C#
using System.Windows;
using System.Windows.Controls;
namespace WpfApplication17
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Expander_Expanded(object sender, RoutedEventArgs e)
{
// ... Set Window Title to Expander Header value.
var expander = sender as Expander;
this.Title = expander.Header.ToString();
}
private void Expander_Collapsed(object sender, RoutedEventArgs e)
{
// ... Change Window Title.
this.Title = "Collapsed";
}
}
}
Summary. An Expander helps reduce the visual complexity of some interfaces. If a section of controls is complex, it can be hidden when not needed. We use the Expander to encapsulate these sub-controls, and show them only when required.
© TheDeveloperBlog.com
The Dev Codes
Related Links:
- WPF Controls
- WPF Rectangle: Fill and Stroke
- WPF TabControl Example: TabItem
- WPF HorizontalAlignment and VerticalAlignment
- WPF Grid Use: Margin and Background
- WPF GridSplitter Example
- WPF StackPanel: Arrange Controls
- WPF DataGrid Examples
- WPF DatePicker Example: SelectedDate
- WPF Border Example
- WPF CheckBox Example
- WPF ComboBox Example (ItemsSource)
- WPF Ellipse: Stroke, Fill and MouseEnter
- WPF DockPanel Example
- WPF Expander Control
- WPF DoubleAnimation
- WPF ProgressBar: Value and Maximum
- WPF Button Control Example
- Top 35 WPF Interview Questions (2021)
- WPF Viewbox Example
- WPF WebBrowser Control
- WPF PasswordBox Control: PasswordChanged
- WPF IsEnabled Property (Button Example)
- WPF RadioButton Example (Checked)
- WPF Image Example: PNG, JPG Files
- WPF ToolBar Example: Uses ToolBarTray
- WPF ToolTip Example
- WPF TextBlock Example
- WPF TextBox Example
- WPF TreeView Example: TreeViewItem
- WPF Menu, MenuItem and Separator
- WPF Label Example
- WPF Name Property: Get Controls
- WPF KeyDown Event Handler
- WPF RenderTransform Example: TransformGroup
- WPF ListView Control: Add Items to GridView
- WPF ScrollViewer Control
- WPF GroupBox Example
- WPF WindowsFormsHost Example
- WPF WrapPanel Example
- WPF Slider Example (ValueChanged)
- WPF Calendar Example: SelectedDate
- WPF Canvas Example: SetLeft, SetTop