WPF Tutorial

Monday, November 11, 2013

WPF WrapPanel Example

WPF > Controls > Layout > WrapPanel

WrapPanel arranges child elements in sequential position from left to right and breaking content to the next line.

Example:
XAML

<Window x:Class="WpfApplication1.MainWindow"

            <Button Width="132">Button 1</Button>
            <Button>Button 2</Button>
            <Button>Button 3</Button>
            <Button>Button 4</Button>
            <TextBox Height="23" TextWrapping="Wrap" Text="TextBox" Width="120"/>
            <TabControl Height="52" Width="134">
                <TabItem Header="TabItem">
                    <Grid Background="#FFE5E5E5"/>
                </TabItem>
                <TabItem Header="TabItem">
                    <Grid Background="#FFE5E5E5"/>
                </TabItem>
            </TabControl>
        </WrapPanel>
</Window>

DockPanel Example WPF

WPF > Controls > Layout > DockPanel

With DockPanel you can arrange child elements either horizontally or vertically, relative to each other.
Note: LastChildFill property: the last child element of a DockPanel always fills the remaining space!

Example:

XAML:

<Window x:Class="WpfApplication1.MainWindow"

<DockPanel LastChildFill="True" >

        <Border Height="25" BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Top">
            <TextBlock Foreground="Black">Top</TextBlock>
        </Border>
        <Border Height="25" BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Bottom">
            <TextBlock Foreground="Black">Bottom</TextBlock>
        </Border>
        <Border Width="60" BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Left">
            <TextBlock Foreground="Black">Left</TextBlock>
        </Border>
        <Border BorderBrush="Black" BorderThickness="1">
            <TextBlock Foreground="Black">Content (remaining space)</TextBlock>
        </Border>
    </DockPanel>

</Window>

Canvas WPF Example

WPF > Controls > Layout > Canvas

Canvas is an area within you can set position of child elements by using coordinates that are relative to the Canvas area.
Canvas is the only panel element that has no inherent layout characteristics.
Note: Vertical alignment and horizontal alignment have no effect inside a Canvas.

Example:

<Window x:Class="WpfApplication1.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">

    <Canvas Height="400" Width="400">
        <Canvas Height="153" Width="154" Top="0" Left="0" Background="Red">
            <Ellipse Fill="#FFF4F4F5" Height="56" Stroke="Black" Width="154"/>
            <Rectangle Width="40" Height="50" RenderTransformOrigin="1.9,1.12" Canvas.Left="71" Canvas.Top="26" >
                <Rectangle.Fill>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="Black" Offset="0"/>
                        <GradientStop Color="#FF7C1C1C" Offset="1"/>
                    </LinearGradientBrush>
                </Rectangle.Fill>
            </Rectangle>
        </Canvas>
    </Canvas>
</Window>

WPF Grid Example

WPF > Controls > Layout > Grid

Grid is a flexible grid area which contains columns and rows

Example:

<Window x:Class="WpfApplication1.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 VerticalAlignment="Top" HorizontalAlignment="Left" Width="400" Height="100">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>

        <TextBlock FontSize="20" FontWeight="Bold" Grid.ColumnSpan="3" Grid.Row="0" HorizontalAlignment="Center">Sales</TextBlock>
        <TextBlock FontSize="12" FontWeight="Bold" Grid.Row="1" Grid.Column="0">January</TextBlock>
        <TextBlock FontSize="12" FontWeight="Bold" Grid.Row="1" Grid.Column="1">February</TextBlock>
        <TextBlock FontSize="12" FontWeight="Bold" Grid.Row="1" Grid.Column="2">March</TextBlock>
        <TextBlock Grid.Row="2" Grid.Column="0">20000</TextBlock>
        <TextBlock Grid.Row="2" Grid.Column="1">30000</TextBlock>
        <TextBlock Grid.Row="2" Grid.Column="2">50000</TextBlock>
        <TextBlock FontSize="16" FontWeight="Bold" Grid.ColumnSpan="3" Grid.Row="3">Total : 100000</TextBlock>
    </Grid>
</Window>

StackPanel WPF

WPF > Controls > Layout > StackPanel

StackPanel arranges its elements into a single line that can be oriented horizontally or vertically.

Example:

XAML

<Window x:Class="WpfApplication1.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">
    <StackPanel>
        <Button Content="Button" Margin="0,0,385,0"/>
        <ComboBox Margin="0,0,211,0"/>
        <Label Content="Label"/>
        <TextBox Height="65" TextWrapping="Wrap" Text="TextBox"/>
    </StackPanel>
</Window>

Layout Controls WPF

WPF > Controls > Layout

Layout Controls WPF contains elements that support application layout in Windows Presentation Foundation (WPF).

Monday, November 4, 2013

Control Templates WPF

WPF > Controls > Templates

Windows Presentation Foundation Control Templates allows developers to completely change the look and feel of the controls.

Almost every control in WPF uses a control template to define how it displays and its contents. You can override the control template on built-in control to make it appear as you want.

ControlTemplate

Search This Blog

Monday, November 11, 2013

Monday, November 4, 2013