VISUAL PROGRAMMING
LECTURE # 13
KEY CONCEPTS …
WPF
XAML
WHAT IS WPF?
WORKING
WPF, which stands for Windows Presentation Foundation, is Microsoft's latest
approach to a GUI framework, used with the .NET framework.
But what IS a GUI framework? GUI stands for Graphical User Interface, and
you're probably looking at one right now. Windows has a GUI for working with
your computer, and the browser that you're likely reading this document in has
a GUI that allows you to surf the web.
Here are a lot of GUI frameworks out there, but for .NET developers, the most
interesting ones are currently WinForms and WPF. WPF is the newest, but
Microsoft is still maintaining and supporting WinForms. As you will see there
are quite a few differences between the two frameworks, but their purpose is
the same: To make it easy to create applications with a great GUI.
XAML, which stands for eXtensible Application Markup Language, is Microsoft's variant of XML for
describing a GUI.
In previous GUI frameworks, like WinForms, a GUI was created in the same language that you would use
for interacting with the GUI, e.g. C# or [Link] and usually maintained by the designer (e.g. Visual
Studio), but with XAML, Microsoft is going another way. Much like with HTML, you are able to easily
write and edit your GUI.
Your text here
Whether you're creating a Window or a Page, it will consist of a XAML document and a CodeBehind file,
which together creates the Window/Page. The XAML file describes the interface with all its elements,
while the CodeBehind handles all the events and has access to manipulate with the XAML controls.
Creating a control in XAML is as easy as writing it's name, surrounded by angle brackets. For instance, a
Button looks like this:
XAML
CREATE WPF
APPLICATION
[Link]
WORKING
WORKING
LABEL
LABEL
TEXTBOX
BUTTON
CHECKBOX
RADIO BUTTON
PASSWORD BOX
IMAGE CONTROL
WPF PANELS
CANVAS CONTROL
<Canvas>
<Ellipse [Link]="2" Fill="Gainsboro" [Link]="25" [Link]="25" Width="200" Height="200" />
<Rectangle [Link]="3" Fill="LightBlue" [Link]="25" [Link]="25" Width="50" Height="50" />
<Rectangle [Link]="2" Fill="LightCoral" [Link]="50" [Link]="50" Width="50" Height="50" />
<Rectangle [Link]="4" Fill="LightCyan" [Link]="75" [Link]="75" Width="50" Height="50" />
</Canvas>
WRAP PANEL
STACK PANEL
DOCK PANEL
GRID
<Grid>
<[Link]>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</[Link]>
<Button VerticalAlignment="Top" HorizontalAlignment="Center">Button 1</Button>
<Button [Link]="1" VerticalAlignment="Center" HorizontalAlignment="Right">Button 2</Button>
</Grid>
<Grid>
<[Link]>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</[Link]>
<[Link]>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</[Link]>
<Button [Link]="2">Button 1</Button>
<Button [Link]="3">Button 2</Button>
<Button [Link]="1">Button 3</Button>
<Button [Link]="1" [Link]="1" [Link]="2" [Link]="2">Button 4</Button>
<Button [Link]="0" [Link]="2">Button 5</Button>
</Grid>
<Grid>
<[Link]>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="5" />
<ColumnDefinition Width="*" />
</[Link]>
<TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center"
TextWrapping="Wrap">Left side</TextBlock>
<GridSplitter [Link]="1" Width="5" HorizontalAlignment="Stretch" />
<TextBlock [Link]="2" FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center"
TextWrapping="Wrap">Right side</TextBlock>
</Grid>
LISTVIEW CONTROL
SCROLL VIEWER
There are two predefined elements that enable scrolling in WPF applications: ScrollBar and
ScrollViewer. The ScrollViewer control encapsulates horizontal and vertical ScrollBar elements
and a content container (such as a Panel element) in order to display other visible elements in a
scrollable area.
The ScrollViewer control responds to both mouse and keyboard commands
<ScrollViewer HorizontalScrollBarVisibility="Auto">
<StackPanel VerticalAlignment="Top" HorizontalAlignment="Left">
<TextBlock TextWrapping="Wrap" Margin="0,0,0,20">
Scrolling is enabled when it is necessary. Resize the window, making it larger and smaller.
</TextBlock>
<Rectangle Fill="Red" Width="500" Height="500"></Rectangle>
</StackPanel>
</ScrollViewer>
By setting it to Auto, the scrollbars will be invisible until the content actually goes beyond the
available space, which is usually what you want.
FLOW DOCUMENT SCROLL VIEWER
It simply allows the users to scroll to long documents, using regular scrollbars. Since this is our first
meeting with the FlowDocument used in any form, we'll start off with a basic "Hello World!" example,
and besides the use of FlowDocumentScrollViewer, this article will also cover several concepts common
between all of the wrappers.
<Grid>
<FlowDocumentScrollViewer>
<FlowDocument>
<Paragraph FontSize="36">Hello, world!</Paragraph>
<Paragraph FontStyle="Italic" TextAlignment="Left" FontSize="14" Foreground="Gray">
The ultimate programming greeting!
</Paragraph>
</FlowDocument>
</FlowDocumentScrollViewer>
</Grid>
DATA BINDING
DESCRIPTION
Data binding is general technique that binds two data/information sources together and maintains
synchronization of data.
Data binding in WPF is the preferred way to bring data from your code to the UI layer. Sure, you can
set properties on a control manually or you can populate a ListBox by adding items to it from a loop,
but the cleanest and purest WPF way is to add a binding between the source and the destination UI
element.
<StackPanel Margin="15">
<WrapPanel>
<TextBlock Text="Window title: " />
<TextBox Name="txtWindowTitle" Text="{Binding Title, UpdateSourceTrigger=Explicit}" Width="150"
/>
<Button Name="btnUpdateSource" Click="btnUpdateSource_Click" Margin="5,0"
Padding="5,0">*</Button>
</WrapPanel>
<WrapPanel Margin="0,10,0,0">
<TextBlock Text="Window dimensions: " />
<TextBox Text="{Binding Width, UpdateSourceTrigger=LostFocus}" Width="50" />
<TextBlock Text=" x " />
<TextBox Text="{Binding Height, UpdateSourceTrigger=PropertyChanged}" Width="50" />
</WrapPanel>
</StackPanel>
PAGE NAVIGATION
MAIN WINDOW CODE
<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
<Button Content="Page 1" Height="40" MinWidth="100" Click="btnClick1"/>
<Button Content="Page 2" Height="40" MinWidth="100" Margin="10,0,0,0" Click="btnClick2"/>
</StackPanel>
<Frame x:Name="_mainFrame" />
C# CODE
private void btnClick1(object sender, RoutedEventArgs e)
{
_mainFrame.Content = new Page1();
}
private void btnClick2(object sender, RoutedEventArgs e)
{
_mainFrame.Content = new Page2();
}
THANK YOU
