Wpf Layout Wrappanel Canvas Complete Guide

Example 1: Using WrapPanel

Objective: Create a simple WPF application that uses a WrapPanel to display a list of buttons that wrap to a new row when they reach the end of the available space.

Step-by-Step Guide:

1. Create a new WPF Application:

   • Open Visual Studio.
   • Create a new project → WPF App (.NET Core) (.NET Framework).
   • Name your project (e.g., WrapPanelExample).
   • Click "Create".

2. Open MainWindow.xaml:

   • In the Solution Explorer, double-click on MainWindow.xaml to open the XAML view of the main window.

3. Add a WrapPanel:

   • Replace the content of MainWindow.xaml with the following XAML code:

<Window x:Class="WrapPanelExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WrapPanel Example" Height="350" Width="525">
    <Grid>
        <WrapPanel Orientation="Horizontal" 
                   Margin="10" 
                   HorizontalAlignment="Left" 
                   VerticalAlignment="Top" 
                   Height="240" 
                   Width="480">
            <Button Content="Button 1" Width="100" Height="50" Margin="5"/>
            <Button Content="Button 2" Width="100" Height="50" Margin="5"/>
            <Button Content="Button 3" Width="100" Height="50" Margin="5"/>
            <Button Content="Button 4" Width="100" Height="50" Margin="5"/>
            <Button Content="Button 5" Width="100" Height="50" Margin="5"/>
            <Button Content="Button 6" Width="100" Height="50" Margin="5"/>
            <Button Content="Button 7" Width="100" Height="50" Margin="5"/>
        </WrapPanel>
    </Grid>
</Window>

4. Explanation:

   • The WrapPanel is a layout panel that positions child elements in sequential order from left to right, and then wraps to the next line if the elements exceed the panel's width.
   • In this example:
     • Orientation="Horizontal": Arranges the buttons in a horizontal line.
     • Margin="10": Adds a 10-pixel margin around the WrapPanel.
     • HorizontalAlignment="Left" and VerticalAlignment="Top": Positions the WrapPanel within the grid.
     • Height="240" and Width="480": Defines the fixed size of the WrapPanel.
   • Each Button has a fixed size and a margin, and they wrap to a new line as necessary.

5. Run the Application:

   • Press F5 or click on "Start" to run the application.
   • You should see a window with buttons arranged in a WrapPanel.

Example 2: Using Canvas

Objective: Create a simple WPF application that uses a Canvas to position elements absolutely within the panel.

Step-by-Step Guide:

1. Create a new WPF Application:

   • Open Visual Studio.
   • Create a new project → WPF App (.NET Core) (.NET Framework).
   • Name your project (e.g., CanvasExample).
   • Click "Create".

2. Open MainWindow.xaml:

   • In the Solution Explorer, double-click on MainWindow.xaml to open the XAML view of the main window.

3. Add a Canvas:

   • Replace the content of MainWindow.xaml with the following XAML code:

<Window x:Class="CanvasExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Canvas Example" Height="350" Width="525">
    <Grid>
        <Canvas Background="LightGray" 
                Margin="10" 
                HorizontalAlignment="Left" 
                VerticalAlignment="Top" 
                Height="240" 
                Width="480">
            <Ellipse Canvas.Left="10" 
                     Canvas.Top="10" 
                     Width="100" 
                     Height="50" 
                     Fill="Lime" 
                     Stroke="Black"/>
            <Rectangle Canvas.Left="120" 
                       Canvas.Top="20" 
                       Width="100" 
                       Height="60" 
                       Fill="Blue" 
                       Stroke="Black"/>
            <TextBlock Canvas.Left="230" 
                       Canvas.Top="60" 
                       Text="Hello WPF!" 
                       FontSize="20" 
                       FontWeight="Bold" 
                       Foreground="DarkRed"/>
        </Canvas>
    </Grid>
</Window>

4. Explanation:

   • The Canvas is a layout panel that allows you to position child elements absolutely.
   • In this example:
     • Background="LightGray": Sets a light gray background color for the canvas.
     • Margin="10": Adds a 10-pixel margin around the Canvas.
     • HorizontalAlignment="Left" and VerticalAlignment="Top": Positions the Canvas within the grid.
     • Height="240" and Width="480": Defines the fixed size of the Canvas.
   • The Ellipse is positioned at Canvas.Left="10" and Canvas.Top="10".
   • The Rectangle is positioned at Canvas.Left="120" and Canvas.Top="20".
   • The TextBlock is positioned at Canvas.Left="230" and Canvas.Top="60".

5. Run the Application:

   • Press F5 or click on "Start" to run the application.
   • You should see a window with an ellipse, a rectangle, and some text positioned absolutely within a Canvas.