Introduction
WPF is used to develop RICH interactive desktop application. SilverLight is used to develop RICH interactive web application. WPF and SilverLight concepts are 98% same.
Generally WPF is required
- While developing RICH graphics.
- While working with colors and brushes.
- While working with transformations.
- While working with animations.
To work with WPF .net introduced "WPF application" project template. When WPF application project is opened, then a window(looks like form) will be opened. Every window will be having 3 modes. Design mode, XAML mode, Code mode. WPF window must be a class and which must be a class and which must be inherited from a predefined class called as window. To work with WPF, a new programming style called as XAML(extensible application markup language) is introduced.
Differences between HTML, XML, and XAML
HTML | XML | XAML |
---|---|---|
Used to design a webpage | Used to describe the data | Used for designing webpages and describing the data |
Markup language | Descriptive language | Both |
Not case sensitive | Case sensitive | Case sensitive |
Error-free markup language | Structure based language | Structure based language |
Special type of interpreter | Parser based | Compiler based |
Predefined tags | Collection of userdefined tags | Both |
Standard syntax of a XAML document:
<window> --> Root tag <grid> --> Container tag <button name="b1" content="click here" click="b1_click"></button> --> Control tag </grid> </window>
- WPF documentation must contain only one root tag.
- WPF application root tag must be window.
- Every opened tag must be closed.
- Every tag is a predefined class.
With the help of XAML
Open WPF application project, open XAML mode
Write the below code inside of the grid tags and execute
<grid> <Textblock Text="abcd" Name="t1" Fontsize="30" Fontfamily="calibri"/> <Button content="click here" name="b1" margin="25,30,40,50" click="b1-click" /> </grid>
Code for button1_click
private void button1_click(object sender, RoutedEventArgs e) { t1.text="Welcome to WPF"; }
With the help of design and drag & drop options
Open WPF application projectPlace a textblock and a button control from the toolbox
protected void button1_Click(object sender, EventArgs e) { textblock1.text="welcome to WPF"; }
Working With layout manager:
Layout managers are also called as containers, helps to organise the controls in a proper way.
At the heart of the layout engine in WPF are panels. Visual elements are placed within panels, and they then interact with the
panel to control their size and position. WPF supports basically 5 types of layout managers:
GRID: The Grid is a tabular control, consisting of columns and rows. Elements can be positioned
into specific cells within the Grid, and can then be aligned and sized accordingly. Elements can also span multiple columns
and rows in much the same way that table cells can in HTML tables. Grid allows relative positioning not absolute positioning.
CANVAS: A canvas can be used to explicitly position an element using absolute coordinates
and sizes. This control is generally not good for resizable user interfaces. Canvas allows absolute positioning.
STACK PANEL: As its name suggests, a StackPanel simply stacks controls up either vertically
or horizontally. Truncation occurs if there is insufficient space in the StackPanel for all of the elements.
DOCK PANEL: A DockPanel can be used to dock elements to its edges, in much the same way
that the Dock property is used in Windows Forms. DockPanels are excellent hosts for the “chrome” elements in the UI, such
as Toolbars, Menus and StatusBars. Elements with a DockPanel can also be sized to fill all remaining space within the control.
WRAP PANEL: A wrap panel can be used when changing the size of the window. When window size is changing
the controls are automatically resized as per the window size.
Example on GRID with one row and two columns along with gridsplitter:
Open WPF application project
Type below code inside of grid tags and execute the project
<Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Image Source="d:\pic1.jpg" Stretch="Fill"/> <GridSplitter Width="3" Background="Yellow"/> <Image Source="d:\pic2.jpg" Stretch="Fill" Grid.Row="0" Grid.Column="1"/> </Grid>
Example on wrap panel along with the concept of nested layout managers:
Open WPF application project.Change the open grid tag as follows and execute the project
private void grid1_loaded(object sender, RoutedEventArgs e) { WrapPanel w = new WrapPanel(); string[] x = System.IO.Directory.GetFiles("d:\\imges", "*.jpg"); for (int i = 0; i < x.Length; i++) { Image y = new Image(); y.Source = new BitmapImage(new Uri(x[i])); y.Width = 100; y.Height = 100; w.Children.Add(y); } grid1.Children.Add(w); }
Working with Brushes: WPF supports 3 types of brushes.
1. SolidColorBrush: Solidcolor brush fills only one color in the controls.
2. Gradient Brush: Gradient brush can fill multiple colors in the controls. Gradient brushes are of two types:
LinearGradient Brush
RadialGradient Brush
3. Image Brush: It can fill images in the controls. For example images within the names.
Example on canvas with brushes:
Open WPF application projectReplace grid tag with canvas tag and type as follows inside of canvas tags and execute the project
<Canvas> <Ellipse Width="200" Height="200" Stroke="Black" StrokeThickness="5"> <Ellipse.Fill> <SolidColorBrush Color="Green" /> </Ellipse.Fill> </Ellipse> <Ellipse Width="200" Height="200" Stroke="red" StrokeThickness="5" Canvas.Left="205"> <Ellipse.Fill> <LinearGradientBrush> <GradientStop Offset=".3" Color="Green"/> <GradientStop Offset=".4" Color="White"/> <GradientStop Offset=".7" Color="Orange"/> </LinearGradientBrush> </Ellipse.Fill> </Ellipse> <Ellipse Width="80" Height="80" Canvas.Left="420" Canvas.Top="90" Stroke="Gold" StrokeThickness="3"> <Ellipse.Fill> <RadialGradientBrush> <GradientStop Offset=".3" Color="DarkBlue"/> <GradientStop Offset=".4" Color="HotPink"/> <GradientStop Offset=".5" Color="Brown"/> </RadialGradientBrush> </Ellipse.Fill> </Ellipse> </Canvas>Example on image brush:
Open WPF application project
Replace grid with canvas
Write as follows inside of the canvas and execute
<Canvas> <TextBlock Text="WPF" FontSize="200" FontFamily="Calibri" > <TextBlock.Foreground> <ImageBrush ImageSource="d:\pic.jpg"></ImageBrush> </TextBlock.Foreground> </TextBlock> </Canvas>
Working with WPF animation:
Animation is a concept of changing the position or changing the angle of an object continuously. In windows forms application projects to execute some logic continuously we require timer control. WPF is not having any control like timer. <StoryBoard> is a predefined tag, which works like a timer control. <StoryBoard> tag must be a part of <BeginStoryBoard> tag. WPF supports property based animations. To work with animations WPF introduced DoubleAnimation, ColorAnimation, etc.. conceptsStandard syntax of a WPF animation program:
<Window> <Canvas> <controlTag> <controlTag.Triggers> <EventTrigger> <BeginStoryboard> <Storyboard> <DoubleAnimation></DoubleAnimation> </Storyboard> </BeginStoryboard> </EventTrigger> </controlTag.Triggers> </controlTag> </Canvas> </Window>
Comments/Suggestions are invited. Happy coding......!
Comments Post a Comment