Introduction To Stack Panel WPF In VB.NET
In the stack panel we can add one or more controls one after another like text box, labels, buttons etc. Stack panel orientation can be horizontally but by default it becomes vertically.
Introduction
Here we Talking about the stack panel. Stack panel shows one element after another. Stack panel orientation can be horizontally but by default it becomes vertically. In the stack panel we can add one or more controls one after another like text box, labels, buttons etc. Stack panel is important control in WPF. Its a child tag of window tag and contain one or more controls and working with them. Stack panel allows user or developer to stack elements in an assigned direction. Any element that you create or draw within stack panel will be added automatically as the child element in the stacking order of the elements in the panel. By default elements in stack panel are stacked vertically but you can stack them horizontally. When we drag and drop a panel and if it contains one or more elements then by default it will look like this. Namespace for this control is system.windows.controls which is exist in presentationframework.dll.
Code of a stack panel in xaml
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="342" Width="408">
<Grid>
<StackPanel Height="280" HorizontalAlignment="Left" Margin="10,12,0,0" Name="StackPanel1"VerticalAlignment="Top" Width="361">
<Button Height="53" Name="button1" Width="127" FontFamily="Submit" FontStretch="Normal"Content="click me once" />
<TextBox Height="23" Name="TextBox1" Width="175" />
<Label Content="hi im first label" Height="28" Name="Label1" Width="126" />
<Label Content="hi im second label" Height="28" Name="Label2" Width="126" />
<TextBox Height="23" Name="TextBox2" Width="225" />
<TextBox Height="23" Name="TextBox3" Width="262" />
<Button Content="click me too" Height="65" Name="Button3" Width="119" />
<TextBox Height="23" Name="TextBox4" Width="313" />
</StackPanel>
</Grid>
After adding the elements in stack panel above code will look like this in run time. By default it will be vertically.
Horizontal panel- by default stack panel orientation will be vertically but we can stack it horizontally. It will look like this when we change the orientation property horizontal.
Orientation property- this property looks in two modes. This property sets or gets a value that defines the dimension of a stack panel by which child elements are stacked.
Vertical- to shows the stack panel vertically and by default it becomes vertically or layout should be vertically.
Horizontal- to shows the stack panel horizontally or layout should be horizontally.
Code for horizontal stack panel
<Grid>
<StackPanel Height="280" HorizontalAlignment="Left" Margin="10,12,0,0" Name="StackPanel1"VerticalAlignment="Top" Width="847" Orientation="Horizontal">
<Button Height="53" Name="button1" Width="127" FontFamily="Submit" FontStretch="Normal"Content="click me once" />
<TextBox Height="23" Name="TextBox1" Width="108" />
<Label Content="hi im first label" Height="28" Name="Label1" Width="94" />
<Label Content="hi im second label" Height="28" Name="Label2" Width="108" />
<TextBox Height="23" Name="TextBox2" Width="116" />
<TextBox Height="23" Name="TextBox3" Width="102" />
<Button Content="click me too" Height="65" Name="Button3" Width="119" />
<TextBox Height="23" Name="TextBox4" Width="70" />
</StackPanel>
</Grid>
Background colour- We can change stack panel background also coloured with different colours. We can coloured other control also. After that stack panel at design time will look like this.
Background Property of a stack panel- This property sets or gets a brush that is used to fill the area between the borders of a panel. There is code by this we can filled background. This example sets the background of a grid to a radialgradientbrush.
Code in xaml
<Grid>
<Grid.Background>
<RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
<RadialGradientBrush.GradientStops>
<GradientStop Color="Yellow" Offset="0" />
<GradientStop Color="Red" Offset="0.25" />
<GradientStop Color="Blue" Offset="0.75" />
<GradientStop Color="Green" Offset="1" />
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</Grid.Background>
</Grid>
Output will be look like this.
RadialGradientbrush property- it paints an area with a radial gradient. A point explain the starting of the gradient and a circle explain the end point of the gradient.
Code in xaml
<RadialGradientBrush>
GradientStops
</RadialGradientBrush>