TheDeveloperBlog.com
C-Sharp | Java | Python | Swift | GO | WPF | Ruby | Scala | F# | JavaScript | SQL | PHP | Angular | HTML
WPF WrapPanel Example
WrapPanel. Interfaces have varying requirements. Often controls must be positioned in exactly one location. But sometimes controls should wrap, like text, and always be visible. The WrapPanel offers this ability.
Example. This example shows the WrapPanel element. Please create a WPF project and drag a WrapPanel to the Window area. I removed the "Width" attribute and added the "HorizontalAligntment" attribute. I set it to "Stretch".
Next: I dragged four Button elements to the WrapPanel. These become sub-controls. I adjusted the Content, Margin and added some Padding.
Finally: I ran the program. When I resized the window, the WrapPanel "wraps" the Button elements as though they are text.
Tip: This makes the Buttons visible on narrow windows. It makes the user interface more versatile.
Example markup: XAML
<Window x:Class="WpfApplication19.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>
<WrapPanel
HorizontalAlignment="Stretch"
Height="299"
Margin="10"
VerticalAlignment="Top">
<Button Content="Button 1" Width="75" Margin="10" Padding="10"/>
<Button Content="Button 2" Width="75" Margin="10" Padding="10"/>
<Button Content="Button 3" Width="75" Margin="10" Padding="10"/>
<Button Content="Button 4" Width="75" Margin="10" Padding="10"/>
</WrapPanel>
</Grid>
</Window>
StackPanel. For another control that can arrange sub-controls, consider a StackPanel. In WPF it is important to have a way to automatically arrange controls. Doing it another way is difficult.StackPanel
Summary. Many WPF programs use layouts that do not benefit from a WrapPanel. But for a fast, and easy-to-maintain interface, WrapPanel may be helpful. Controls are hidden less often on narrow windows or parts of windows.
© 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