WPF Controls,Layout panel and Graphics primitives

Sponsored by

Become a Sponsor

Similar ArticlesMost ReadTop RatedLatest

Introduction

In this article I am explaining controls,Layout Panels,Graphics primitives.Here i am explaining some controls,layout panels and Graphics primitives.

Controls

A Button with Border

The Button tag represents a Button control in XAML.

On the button there is a property called Content that is set as the default content property for the button. This is how the XAML parser knows what to do with the text Hello WPF!

BroderBrush property that draws the outer border color.

<Border BorderBrush="Black" BorderThickness="5" Margin="10" Padding="5">
<Button>Hello WPF!</Button>
</Border>

The Output is :

Figure 1

An Ellepse

The Following example shows how to create an ellipse and sets its proporties by using XAML.

The Output is :

Figure 2

A Button with Ellipse

    <Button>
            <Ellipse Width="200" Height="150">
                <Ellipse.Fill>
                    <LinearGradientBrush>
                        <GradientStop Offset="0" Color="Teal"/>
                        <GradientStop Offset="1" Color="Aqua" />
                    </LinearGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
        </Button>

The Final Output is :

Figure 3

UI Layout :

Layout is the sizing, spacing, and placement of content within a window or page. Effective layout is crucial in helping users find what they are looking for quickly, as well as making the appearance visually appealing. Effective layout can make the difference between designs that users immediately understand and those that leave users feeling puzzled and overwhelmed.

A Stack Panel Layout :

A stack panel allows you to stack elements in an assigned direction. Based on the properties that you define within a stack panel, content can flow both vertically (by default) and horizontally.

The XAML is :

<StackPanel>
            <TextBlock>Stack Panel</TextBlock>
            <ListBox>
                <ListBoxItem>stack 1</ListBoxItem>
                <ListBoxItem>stack 2</ListBoxItem>
            </ListBox>
            <RichTextBox/>
        </StackPanel>

The Output is :

Figure 4

A Grid Layout

I have to declare our rows and columns. In this grid we have Three of each. I have used a grid specific height notation for the rows.

        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="3*"/>
            </Grid.RowDefinitions>
             <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>

The Output is :

Figure 5

Data Binding

Windows Presentation Foundation (WPF) data binding provides a simple and consistent way for applications to present and interact with data. Elements can be bound to data from a variety of data sources in the form of common language runtime (CLR) objects and XML.ContentControls such as Button and ItemsControls such as ListBox and ListView have built-in functionality to enable flexible styling of single data items or collections of data items. Sort, filter, and group views can be generated on top of the data.

The data binding functionality in WPF has several advantages over traditional models, including a broad range of properties that inherently support data binding, flexible UI representation of data, and clean separation of business logic from UI.

The this example I would like to show is a very common scenario. You have some object representing a Person,Customer,Employee , etc. and you want to display their information in the UI for editing purposes. Here is the XAML :

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="75"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

<Label>First Name:</Label>
<TextBox Grid.Column="1" Text="{Binding Path=FirstName}"/>

<Label Grid.Row="2">Street:</Label>
<TextBox Grid.Row="2" Grid.Column="1" Text="{Binding Address.Street}"/>

         <Label Grid.Row="4">State:</Label>
        <TextBox Grid.Row="4" Grid.Column="1" Text="{Binding Address.State}"/>
    </Grid>

The Output is :

Figure 6

Graphics primitives

A Templated button

Trigger Property in WPF defines properties that correspond to end-user actions, such as the IsMouseOver property that is set to true when the user hovers the cursor over a UIElement or the corresponding IsMouseOver property of a ContentElement. Representing end-user actions in property values, along with the Trigger element, allows WPF styles to change property values based on those end-user actions, all from within markup.

            <Button Height="35" Width="125" Background="Blue">Normal</Button>
            <Button Height="35" Width="125" Background="Blue">Mouse Over</Button>
        </StackPanel>

The Output is :

Figure 7