Post on 04-Jun-2018
transcript
8/14/2019 Wp f Controls
1/59
WPF - Controls
Prashanth Vijayaraghavan
8/14/2019 Wp f Controls
2/59
Introduction
Top parts of UI are built out of smallercomponents , Controls.
The two core concepts for the entire controlmodel.
- Content model.- Templates.
8/14/2019 Wp f Controls
3/59
Control principles
Element composition.
Rich content.
Simple programming model.
8/14/2019 Wp f Controls
4/59
Content Model(Cont..)
8/14/2019 Wp f Controls
5/59
Content Model(Cont..)
Uses CLR type system.
Button chrome element displays background. Text block used to display text content.
Content presenter is the workhorse if the contentmodel.
8/14/2019 Wp f Controls
6/59
Content presenter
8/14/2019 Wp f Controls
7/59
Content presenter(Cont..)
8/14/2019 Wp f Controls
8/59
Content property naming pattern
8/14/2019 Wp f Controls
9/59
Items
8/14/2019 Wp f Controls
10/59
Children and child
Content controls eg: Button
Layout controls eg: StackPanel
Render controls, eg: Ellipse
8/14/2019 Wp f Controls
11/59
Templates
A template can be overridden to completelychange its visual appearance.
Types:
- Data Template.
- Control Template.
8/14/2019 Wp f Controls
12/59
Templates(Cont.)
My Button
8/14/2019 Wp f Controls
13/59
Templates(Cont..)
8/14/2019 Wp f Controls
14/59
Templates(Cont..)
8/14/2019 Wp f Controls
15/59
Template Binding
8/14/2019 Wp f Controls
16/59
Control Library Buttons
Lists
Menus and toolbars Containers
Ranges
Editors Document Viewers
Frame
Building Blocks
ToolTip
Thumb
Border
Popup
Scroll Viewer Viewbox
8/14/2019 Wp f Controls
17/59
Buttons IsChecked and IsThreeState for CheckBox and
RadioButton.
If IsThreeState is true, the
user can toggle from checked
to unchecked to Indeterminate
8/14/2019 Wp f Controls
18/59
Buttons (Cont..)
8/14/2019 Wp f Controls
19/59
List Four standard list controls- ListBox, ComboBox,
ListView, TreeView.
List controls can be filled from one of the twosources.
1. Items Property
2. ItemsSource Property.
8/14/2019 Wp f Controls
20/59
ListBox and ComboBox We can change the look of the control using
templates.
Combo Box is list box with dropdown.
The two basic list types: ListBox and
ComboBox
8/14/2019 Wp f Controls
21/59
ListBox - ItemsPanel ItemsPanel property can be used to change the
layout of list Box.
Example is default view if control panel inwindows XP.
Templates can also be used to change the layoutwithout using the ItemsPanel property.
8/14/2019 Wp f Controls
22/59
Windows Xp control panel
8/14/2019 Wp f Controls
23/59
List box with a grid item layout
8/14/2019 Wp f Controls
24/59
List View
List view derives from listBox
It has ability to separate view properties fromcontrol properties.
View property must be changed to grid view adset properties on that object.
8/14/2019 Wp f Controls
25/59
List View-View property
8/14/2019 Wp f Controls
26/59
Tree view
8/14/2019 Wp f Controls
27/59
New Lists using Templates
8/14/2019 Wp f Controls
28/59
Menus and Toolbars
Its logically similar to TreeView. Both derivefrom base type: HeaderedItemsControl.
All features of content model apply to menusand toolbars.
Toolbars consume lots of space and occupies
more space, but allow easy user access.
8/14/2019 Wp f Controls
29/59
Menus
An alternative presentation for a menu
8/14/2019 Wp f Controls
30/59
Menus (Cont..)
8/14/2019 Wp f Controls
31/59
ToolBars
8/14/2019 Wp f Controls
32/59
ToolBars(Cont..)
8/14/2019 Wp f Controls
33/59
ToolBars(Cont..)
ToolBar.OverflowMode property allow us to setoverflow properties if the size of window is
small.
8/14/2019 Wp f Controls
34/59
Containers
8/14/2019 Wp f Controls
35/59
Ranges
Types of range control
Slider.
Scroll Bar.
Progress Bar
- Minimum and maximum values are specifiedusing Maximum and Minimum property.
- We specify or determine the current value usingValue property
8/14/2019 Wp f Controls
36/59
Ranges(Cont..)
8/14/2019 Wp f Controls
37/59
Editors
PasswordBox
TextBox
RichTextBox
InkCanvas.
8/14/2019 Wp f Controls
38/59
TextBox Streaming model and collection model.
Block elements occupy rectangular space. Eg.
Paragraph.
Inline Elements can span lines. Eg: Span, Runand Bold.
Text pointer and Text Range objects are used inthe case of streaming model.
8/14/2019 Wp f Controls
39/59
Text model
8/14/2019 Wp f Controls
40/59
Rich TextBox
Hello
8/14/2019 Wp f Controls
41/59
Rich TextBox(Cont..)
TextOffset example, showing how the start
and end tokens of an element
occupy space in the text object model
Simplified markup for text, with the corresponding offsets of each item
8/14/2019 Wp f Controls
42/59
Document Viewers
FlowDocumentScrollViewer
FlowDocumentPageViewer
8/14/2019 Wp f Controls
43/59
Building Blocks
ToolTip:
8/14/2019 Wp f Controls
44/59
ToolTip(Cont.)
8/14/2019 Wp f Controls
45/59
ToolTip(Cont.)
8/14/2019 Wp f Controls
46/59
Border
8/14/2019 Wp f Controls
47/59
Popup
8/14/2019 Wp f Controls
48/59
Story Board
8/14/2019 Wp f Controls
49/59
Digital Ink
8/14/2019 Wp f Controls
50/59
Digital Ink(Cont..)
8/14/2019 Wp f Controls
51/59
DrawingAttributesclass (Ink)Name Description
ColorGets or sets the color of aStroke.
FitToCurve
Gets or sets a value thatindicates whether Beziersmoothing is used to renderthe Stroke.
HeightGets or sets the height of thestylus used to draw the Stroke.
IgnorePressure
Gets or sets a value thatindicates whether thethickness of a rendered Strokechanges according the amountof pressure applied.
IsHighlighterGets or sets a value thatindicates whether the Strokelooks like a highlighter.
StylusTipGets or sets the shape of thestylus used to draw the Stroke.
StylusTipTransformGets or sets the Matrix thatspecifies the transformation to
perform on the stylus' tip.
8/14/2019 Wp f Controls
52/59
Editing with InkCanvas
Name Description
EraseByPointhIndicates that the pen erases partof a stroke when the pen intersectsthe stroke.
EraseByStrokeIndicates that the pen erases anentire stroke when the pen
intersects the stroke.
GestureOnlyIndicates that the InkCanvasresponds to gestures, and does notreceive ink.
InkIndicates that ink appears on theInkCanvas when the pen sendsdata to it.
InkAndGestureIndicates that the InkCanvasresponds to gestures, and receivesink.
NoneIndicates that no action is takenwhen the pen sends data to theInkCanvas.
Select
Indicates that the pen selects
strokes and elements on theInkCanvas.
8/14/2019 Wp f Controls
53/59
Code snippets using the Attributes
// erase
private void Erase(object sender, RoutedEventArgs e)
{// set the EditingMode to EraseByPoint
myInkCanvas.EditingMode = InkCanvasEditingMode.EraseByPoint;
}
private void setInkBlue(object sender, RoutedEventArgs e)
{
// set the DefaultDrawingAttributes for a blue
pen. myInkCanvas.DefaultDrawingAttributes.Color = Colors.Blue;
myInkCanvas.DefaultDrawingAttributes.Height = 2;
myInkCanvas.DefaultDrawingAttributes.Width = 2;}
8/14/2019 Wp f Controls
54/59
Ink Selection// selection
private void Select(object sender, RoutedEventArgs e)
{
// set the EditingMode to SelectmyInkCanvas.EditingMode = InkCanvasEditingMode.Select;
}
8/14/2019 Wp f Controls
55/59
Reflection using visual Brush and
opacity mask
Seewww.xamlog.comfor source code
http://www.xamlog.com/http://www.xamlog.com/8/14/2019 Wp f Controls
56/59
Bitmap Effects
Bevel
Blur
Drop Shadow
Embossed
Outer Glow
8/14/2019 Wp f Controls
57/59
Spell checking with text box
control
TextBox
If the user types in a mispelled word,
RichTextBox
the mispelled word is underlined with a wavy red line.
8/14/2019 Wp f Controls
58/59
The NY times reader app
8/14/2019 Wp f Controls
59/59
Thank you
Questions?
References:www.xamlog.com.
Essential windows presentation.
http://www.xamlog.com/http://www.xamlog.com/