Layout Panels in WPF

Layout panels in WPF……………………………………….                  Previous Topic

I am going to introduce and explain some basics Layout panels  in WPF . A panel is a special-purpose user-interface element whose job is to arrange the elements it contains. The type of panel you choose determines the style of UI Layout within that panel.

Layout panels in WPF

•         Stack Panel
•         Dock Panel 
•         Wrap Panel
•         GridUniform 
•         Grid  Canvas

Stack Panel – The Stack Panel in WPF is a simple and useful layout panel. It stacks its child elements below or beside each other, dependening on its orientation, By default Stack Panel places elements vertically. It is very useful to create any kinds of lists. All WPF Items Controls like Combo Box, List Box or Menu use a Stack Panel as their internal layout panel.

Example with Stack Panel ……………………………………

<Window x:Class="WpfApplicationPanels.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="Stack Panel in WPF" Height="350" Width="525">

<StackPanel Orientation="Vertical">

<!--apply internal css style with TextBlock and Button-->

<StackPanel.Resources>

<Style TargetType="TextBlock">

<Setter Property="Background" Value="White"/>

<Setter Property="Foreground" Value="Red" />

<Setter Property="FontSize" Value="15px"/>

<!--<Setter Property="HorizontalAlignment" Value="Center"></Setter>-->

</Style>

<Style TargetType="Button">

<Setter Property="Background" Value="Green"></Setter>

<Setter Property="FontSize" Value="15"></Setter>

</Style>

</StackPanel.Resources>

<!--Designe part-->

<TextBlock Margin="10" Text="In which technology you are Interested" Padding="10" HorizontalAlignment="Center"  ></TextBlock>

<!-- Inline Css -->

<Button Margin="10" Background="Red" FontFamily="Verdana" FontSize="23" Padding="10">.Net</Button>

<Button Margin="10" Padding="10">Java</Button>

<Button Margin="10" Padding="10">Php</Button>

<Button Margin="10" Padding="10">Android</Button>

</StackPanel>

</Window>

Result:

XAML Vs Code in WPF………………………..

Note: In this concept we will discuss how to create design in WPF without XAML

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Shapes;

namespace WpfApplicationPanels

{

/// <summary>

/// Interaction logic for Window1.xaml

/// </summary>

public partial class Window1 : Window

{

public Window1()

{

InitializeComponent();

//call this method here......

LoadControls();

}

//create instance of Stack Panel............

StackPanel stackpanel = new StackPanel();

//create instance of TextBlock.............

TextBlock tb = new TextBlock();

//create instance for Four different Buttons.............

Button b1 = new Button();

Button b2 = new Button();

Button b3 = new Button();

Button b4 = new Button();

private void LoadControls()

{

this.Content = stackpanel;

// TextBlock................................

tb.Margin = new Thickness(10);

tb.Text = "In which technology you are Interested";

tb.HorizontalAlignment = HorizontalAlignment.Center;

tb.Padding = new Thickness(10, 10, 10, 10);

stackpanel.Children.Add(tb);

//Button 1......................

b1.Margin = new Thickness(10);

b1.Padding = new Thickness(10, 10, 10, 10);

b1.Content = "Java";

stackpanel.Children.Add(b1);

//Button 2......................

b2.Margin = new Thickness(10);

b2.Padding = new Thickness(10,10,10,10);

b2.Content = "C# .NET";

stackpanel.Children.Add(b2);

//Button 3......................

b3.Margin = new Thickness(10);

b3.Padding = new Thickness(10, 10, 10, 10);

b3.Content = "PHP";

stackpanel.Children.Add(b3);

//Button 4......................

b4.Margin = new Thickness(10);

b4.Padding = new Thickness(10, 10, 10, 10);

b4.Content = "Android";

stackpanel.Children.Add(b4);

//Apply this Style with all Button......................

Style sb = new Style(typeof(Button));

sb.Setters.Add(new Setter(Button.BackgroundProperty, Brushes.Yellow));

sb.Setters.Add(new Setter(Button.ForegroundProperty, Brushes.Red));

Resources.Add(typeof(Button), sb);

//Apply this Style with TextBlock......................

Style st = new Style();

st.TargetType = typeof(TextBlock);

st.Setters.Add(new Setter(TextBlock.BackgroundProperty, Brushes.Green));

st.Setters.Add(new Setter(TextBlock.ForegroundProperty, Brushes.Black));

Resources.Add(typeof(TextBlock), st);

}

}

}

Result

    Next Topic Dock and Grid Panel in WPF