Attached Properties in WPF

An attached property is a property that is declared by one control and attached to another. It allows the inclusion of additional information with a control for later use by an external source.

An attached property is a special form of dependency property that can effectively be attached to arbitrary objects. This may sound strange at first, but this mechanism has several applications in WPF.They are basically used to control layout.

Every control has its own set of intrinsic properties. Let's take an example of text box which has a specific font, text color, and text content as dictated by properties such as FontFamily, Foreground, and Text.)

Now when you place a control inside a container it gains additional features, depending on the type of container.
For example, if you place a text box inside a grid, you need to be able to choose the grid cell where it’s positioned.) These additional details are set using attached properties.

Attached properties always use a two-part name in this form:
DefiningType.
PropertyName.

This two-part naming syntax allows the XAML parser to distinguish between a normal property and an attached property. 

Read More »

Example ComboBox of Data Binding in WPF

Data bindings is to separate the GUI from the data. In the case of WPF, properties are the ideal interface between GUI and objects. Each time a property is changed, an event will be raised, and the GUI gets notified about it. There is no need to connect it, as this works via reflection, the only code you have to write is the notification that a property has been changed.

The ComboBox element represents a ComboBox control in XAML.  

<ComboBox></ComboBox>  

 

The Width and Height properties represent the width and the height of a ComboBox.  The x:Name property represents the name of the control, which is a unique identifier of a control. The Margin property sets the location of a ComboBox on the parent control. The HorizontalAlignment and VerticalAlignment properties are used to set horizontal and vertical alignments.

Example

Below example contain three controls TextBox, TextBlock and ComboBox.  When the user types any text inside the textbox, the text is automatically displayed in the TextBlock control, because the TextBlock control is data bound to the textbox control.There is minimal effort to data-bind the two controls together, with the textbox control being the data source. Similarly Combobox of size and color are work they automatically change it color and size when user are select comboBox item.

    <Grid>

        <Grid Width="300">

            <Grid.RowDefinitions>

                <RowDefinition Height="25"></RowDefinition>

                <RowDefinition Height="25"></RowDefinition>

                <RowDefinition Height="25"></RowDefinition>

                <RowDefinition Height="200"></RowDefinition>

            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="100"></ColumnDefinition>

                <ColumnDefinition></ColumnDefinition>

            </Grid.ColumnDefinitions>

            <TextBlock Height="20" Text="Text:" TextWrapping="Wrap" Grid.Row="0" Grid.Column="0"/>

            <TextBlock Height="20" Text="Color:" TextWrapping="Wrap" Grid.Row="1" Grid.Column="0"/>

            <TextBlock Height="20" Text="Size:" TextWrapping="Wrap" Grid.Row="2" Grid.Column="0"/>

            <TextBox x:Name="txt" Grid.Column="1" Height="20" Width="194"></TextBox>

            <ComboBox x:Name="CmbColor"

                 VerticalAlignment="Top" Width="194" Height="20" Grid.Row="1" Grid.Column="1">

                <ComboBoxItem Content="Red"></ComboBoxItem>

                <ComboBoxItem Content="Green"></ComboBoxItem>

                <ComboBoxItem Content="Orange"></ComboBoxItem>

                <ComboBoxItem Content="Blue"></ComboBoxItem>

                <ComboBoxItem Content="pink"></ComboBoxItem>

                <ComboBoxItem Content="Gray"></ComboBoxItem>

            </ComboBox>

            <ComboBox x:Name="Cmbsize"

                 VerticalAlignment="Top" Width="194" Height="20" Grid.Row="2" Grid.Column="1">            

                <ComboBoxItem Content="22"></ComboBoxItem>

                <ComboBoxItem Content="24"></ComboBoxItem>

                <ComboBoxItem Content="26"></ComboBoxItem>

                <ComboBoxItem Content="28"></ComboBoxItem>

                <ComboBoxItem Content="30"></ComboBoxItem>

                <ComboBoxItem Content="32"></ComboBoxItem>

                <ComboBoxItem Content="34"></ComboBoxItem>

                <ComboBoxItem Content="36"></ComboBoxItem>

                <ComboBoxItem Content="38"></ComboBoxItem>

                <ComboBoxItem Content="40"></ComboBoxItem>

            </ComboBox>

            <TextBlock  Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2">

                <TextBlock.Text>

                    <Binding ElementName="txt" Path="Text"/>                   

                </TextBlock.Text>

                <TextBlock.Foreground>

                    <Binding ElementName="CmbColor" Path="SelectedItem.Content"/>                   

                </TextBlock.Foreground>

                <TextBlock.FontSize>

                    <Binding ElementName="Cmbsize" Path="SelectedItem.Content"/>

                </TextBlock.FontSize>

            </TextBlock>

        </Grid>

    </Grid>

Read More »

What is WPF?

WPF stands for Windows Presentation Foundation. It is a Microsofts next generation UI framework to create application programming Interface for developing rich UI on Windows API and WINfx. It is part of the .NET framework 3.0 and higher versions.

WPF is compatible with

• Multimedia 
• Data binding
• Animation
• Capabilities to HTML and flash.
• Has all equivalent common user controls like buttons, check boxes   sliders etc.
• Fixed and flow format documents 
• 2D and 3D dimensional  graphics 
• Documents and Multimedia into one single framework.
• Its vector based rendering engine uses hardware acceleration of modern graphic cards.
• This makes the UI faster, scalable and resolution independent.

Read More »

About x:Prefix

In the previous root element example, the prefix x: was used to map the XAML namespace http://schemas.microsoft.com/winfx/2006/xaml, which is the dedicated XAML namespace that supports XAML language constructs. This x: prefix is used for mapping this XAML namespace in the templates for projects. The XAML namespace for the XAML language contain several programming constructs that you will use very frequently in your XAML. The following is a listing of the most common x: prefix programming constructs you will use: 

x:Key: Sets a unique key for each resource in a ResourceDictionary (or similar dictionary concepts in other frameworks)

Example

<Grid>

    <Grid.Resources>

        <Style x:Name="StyleName" x:Key="StyleKey" />

    </Grid.Resources>

    <Button Style="{StaticResource StyleKey}" />

</Grid>

x:Class: Specifies the CLR namespace and class name for the class that provides code-behind for a XAML page. You must have such a class tos support code-behind per the WPF programming model, and therefore you almost always see x: mapped, even if there are no resources.

x:Name: Specifies a run-time object name for the instance that exists in run-time code after an object element is processed. In general, you will frequently use a WPF-defined equivalent property for x:Name. Such properties map specifically to a CLR backing property and are thus more convenient for application programming, where you frequently use run time code to find the named elements from initialized XAML. The most common such property is FrameworkElement.Name. You might still use x:Name when the equivalent WPF framework-level Name property is not supported in a particular type. This occurs in certain animation scenarios.

Example

<Button x:Name="okButton">OK</Button>

x:Static: Enables a reference that returns a static value that is not otherwise a XAML-compatible property. 

Example

<SolidColorBrush Color="{x:Static SystemColors.ControlColor}" />

x:Type: Constructs a Type reference based on a type name. This is used to specify attributes that take Type, such as Style.TargetType, although frequently the property has native string-to-Type conversion in such a way that the x:Type markup extension usage is optional.

Example

<Style TargetType="{x:Type Button}">

    ...

</Style>

Reference 

http://msdn.microsoft.com/en-us/library/ms752059.aspx

http://msdn.microsoft.com/en-us/library/ms753327.aspx

Read More »