Transcript
Page 1: 3. XAML & WPF - WPF Controls

Doncho Minkov

Telerik Software Academyacademy.telerik.com

Technical Trainerhttp://www.minkov.it

http://academy.telerik.com/

WPF ControlsBasic WPF Controls

Page 2: 3. XAML & WPF - WPF Controls

Table of Contents1. WPF Controls

2. Text controls

3. Buttons

4. List controls

5. GroupBox and Expander

6. Menus

7. Toolbars

2

Page 3: 3. XAML & WPF - WPF Controls

Table of Contents8. Other controls

Slider and Scroll controls ProgressBar ToolTip

Custom User Controls

3

Page 4: 3. XAML & WPF - WPF Controls

WPF Controls

Page 5: 3. XAML & WPF - WPF Controls

WPF Control WPF controls are typically not directly responsible for their own appearance The are all about behavior They defer to templates to provide

their visuals

5

Page 6: 3. XAML & WPF - WPF Controls

WPF Controls (2) Controls may use commands to represent supported operations

Controls offer properties to provide a means of modifying either behavior

Controls raise events when something important happens

WPF provides a range of built-in controls Most of these correspond to

standard Windows control types 6

Page 7: 3. XAML & WPF - WPF Controls

Text Controls

Page 8: 3. XAML & WPF - WPF Controls

Label The purpose of the Label control is to provide a place to put a caption with an access key

How does the Label know to which control it should redirect its access key? Target property, indicating the

intended target of the access key In the absence of this property, the Label control does nothing useful

8

Page 9: 3. XAML & WPF - WPF Controls

LabelLive Demo

Page 10: 3. XAML & WPF - WPF Controls

TextBox

Page 11: 3. XAML & WPF - WPF Controls

TextBox TextBox is control for editing and displaying text By setting AcceptsReturn to true, it

can edit multiple lines

11

<TextBox Margin="5" VerticalAlignment="Center" Text="Single line textbox" /><TextBox AcceptsReturn="True" Margin="5" Height="50 VerticalScrollBarVisibility="Visible" VerticalAlignment="Center" Text="Multiline textbox" />

<!--The result is-->

Page 12: 3. XAML & WPF - WPF Controls

RichTextBox RichTextBox supports all of the commands defined by the EditingCommands class

Recognize the RTF format Paste formatted text from Internet

Explorer and Word Both TextBox and RichTextBox offer built-in spellchecking SpellCheck.IsEnabled attached

property12

Page 13: 3. XAML & WPF - WPF Controls

RichTextBoxLive Demo

Page 14: 3. XAML & WPF - WPF Controls

Buttons

Page 15: 3. XAML & WPF - WPF Controls

Buttons Buttons are controls that a user can click

An XAML attribute specifies the handler for the Click event

Buttons derive from the common ButtonBase base class

15

<Button Click="ButtonClicked">Click</Button>

void ButtonClicked(object sender, RoutedEventArgs e){ MessageBox.Show("Button was clicked");}

ButtonsWindow.xaml

ButtonsWindow.xaml.cs

Page 16: 3. XAML & WPF - WPF Controls

ToggleButton Holds its state when it is clicked

IsChecked property IsThreeState property

Gives IsChecked three possible values true, false, or null

ToggleButton defines a separate event for each value of IsChecked Checked for true

Unchecked for false

Indeterminate for null16

Page 17: 3. XAML & WPF - WPF Controls

ToggleButtonLive Demo

Page 18: 3. XAML & WPF - WPF Controls

CheckButton and RadioButton

They derive from ButtonBase indirectly via the ToggleButton class

IsChecked property, indicating whether the user has checked the button

CheckBox is nothing more than a ToggleButton with a different appearance

Radio buttons are normally used in groups in which only one button may be selected at a time

18

Page 19: 3. XAML & WPF - WPF Controls

RadioButton - Example Grouping radio buttons by name

19

<StackPanel> <RadioButton GroupName="Fuel" Margin="3">Petrol</RadioButton> <RadioButton GroupName="Fuel" Margin="3">Diesel</RadioButton> <RadioButton GroupName="Induction" Margin="3">Unforced</RadioButton> <RadioButton GroupName="Induction" Margin="3">Mechanical supercharger</RadioButton> <RadioButton GroupName="Induction" Margin="3">Turbocharger</RadioButton></StackPanel>

Page 20: 3. XAML & WPF - WPF Controls

RadioButtonLive Demo

Page 21: 3. XAML & WPF - WPF Controls

List Controls

Page 22: 3. XAML & WPF - WPF Controls

ComboBox Enables users to select one item from a list

ComboBox defines two events DropDownOpened DropDownClosed

ComboBox can contain complex items

22

Page 23: 3. XAML & WPF - WPF Controls

ComboBoxLive Demo

Page 24: 3. XAML & WPF - WPF Controls

ListView The ListView control derives from ListBox

It uses the Extended SelectionMode by default

View property

Enable customize the view in a richer way

The View property is of type ViewBase, an abstract class

24

Page 25: 3. XAML & WPF - WPF Controls

GridView GridView class

Has a Columns content property GridViewColumn objects, as well as

other properties to control the behavior of the column headers

Columns can be reordered by dragging and dropping them in the built application

Columns can be resized Columns can automatically resize to "just fit" 25

Page 26: 3. XAML & WPF - WPF Controls

ListView and GridViewLive Demo

Page 27: 3. XAML & WPF - WPF Controls

TreeView

Page 28: 3. XAML & WPF - WPF Controls

TreeView Presents a hierarchical view

Data with nodes that can be expanded and collapsed

Important events: Expanded Collapsed Selected Unselected

28

Page 29: 3. XAML & WPF - WPF Controls

TreeViewLive Demo

29

Page 30: 3. XAML & WPF - WPF Controls

GroupBox and Expander

Page 31: 3. XAML & WPF - WPF Controls

GroupBox and Expander

Both provide a container for arbitrary content and a place for a header on top Expander can be expanded and

collapsed

GroupBox always shows its content

Both controls derive from HeaderedContentControl We can place whatever content we

like directly inside the control

31

Page 32: 3. XAML & WPF - WPF Controls

GroupBox and ExpanderLive Demo

Page 33: 3. XAML & WPF - WPF Controls

Menus

Page 34: 3. XAML & WPF - WPF Controls

Menu Menu simply stacks its items horizontally

34

<Menu Height="23" VerticalAlignment="Top" > <MenuItem Header="_File"> <MenuItem Header="_New..."/> <MenuItem Header="_Open..."/> <Separator/> <MenuItem Header="Sen_d To"> <MenuItem Header="Mail Recipient"/> <MenuItem Header="My Documents"/> </MenuItem> </MenuItem> <!--(the example continues)-->

Page 35: 3. XAML & WPF - WPF Controls

Menu (2)

35

<MenuItem Header="_Edit"> … </MenuItem> <MenuItem Header="_View"> … </MenuItem></Menu> <!-- The result is -->

Page 36: 3. XAML & WPF - WPF Controls

MenuItem MenuItem is a headered items control

The Header is actually the main object

MenuItem contains many properties for customizing Icon IsCheckable InputGestureText

Can handle events or assign a command to MenuItem’s Command property

36

Page 37: 3. XAML & WPF - WPF Controls

MenusLive Demo

Page 38: 3. XAML & WPF - WPF Controls

ContextMenu Works just like Menu

It’s a simple container designed to hold MenuItems and Separators

Must attach it to a control via ContextMenu property

When a user right-clicks on the control the context menu is displayed

38

<ListBox> <ListBox.ContextMenu> <ContextMenu> … </ContextMenu> </ListBox.ContextMenu> …</ListBox>

Page 39: 3. XAML & WPF - WPF Controls

Toolbars

Page 40: 3. XAML & WPF - WPF Controls

Toolbars Toolbars provide faster access for frequently used operations

WPF supports toolbars through the ToolBarTray and ToolBar controls

StatusBar behaves just like Menu It’s typically used along the bottom

of a Window

40

Page 41: 3. XAML & WPF - WPF Controls

ToolbarsLive Demo

Page 42: 3. XAML & WPF - WPF Controls

Other Controls

Page 43: 3. XAML & WPF - WPF Controls

Slider and Scroll Controls

Allow a value to be selected from a range They show a track, indicating the

range and a draggable "thumb" The ScrollBar control is commonly used in conjunction with some scrolling viewable area

Control the size of a scroll bar’s thumb with the ViewportSize property

43

Page 44: 3. XAML & WPF - WPF Controls

Slider and Scroll Controls (2)

Slider control is used to adjust values

Slider and ScrollBar have an Orientation property

They both derive from a common base class, RangeBase Provides Minimum and Maximum, SmallChange and LargeChange properties

44

Page 45: 3. XAML & WPF - WPF Controls

ProgressBar Helps user realize that progress is indeed being made

ProgressBar has a default Minimum of 0 and a default Maximum of 100

IsIndeterminate property True - ProgressBar shows a generic

animation Orientation property

Horizontal by default

45

Page 46: 3. XAML & WPF - WPF Controls

ToolTip Allows a floating label to be displayed above some part of the user interface

To associate a ToolTip with its target element set it as the ToolTip property of its target

46

<TextBox Width="147" Height="25"> <TextBox.ToolTip> <ToolTip Content="Type something here" /> </TextBox.ToolTip> <!--The result is--></TextBox>

Page 47: 3. XAML & WPF - WPF Controls

Creating Custom User

Controls

Page 48: 3. XAML & WPF - WPF Controls

How To Make Custom User Control?

From the Solution Explorer click Add –> User Control

After that it is like you are making a Window

After you finish the creation of the UserControl build the project

Then you have your UserControl in the Toolbox menu

Page 49: 3. XAML & WPF - WPF Controls

Adding Properties to Custom User Control

To add a Property in the UserControl you need a DependencyProperty, e.g.

49

public static readonly DependencyProperty SourceProperty;

static ImageButton(){ SourceProperty = DependencyProperty.Register( "Source", typeof(ImageSource), typeof(ImageButton)));}

public ImageSource Source{ get { return (ImageSource)GetValue(SourceProperty); } set { SetValue(SourceProperty, value); }}

Page 50: 3. XAML & WPF - WPF Controls

Adding Properties to Custom User Control

(2) To make the "Source" property work we have to use binding in the Xaml code For the binding we need to set the x:Name of the UserControl

Now in our Window we can set an image in our custom ImageButton control

50

<Image Source="{Binding ElementName= ImageButtonUserControl, Path=ImageSource}"/>

<my:ImageButton ImageSource="Panda.png"/>

Page 51: 3. XAML & WPF - WPF Controls

Custom User Controls

Live Demo

Page 52: 3. XAML & WPF - WPF Controls

форум програмиране, форум уеб дизайнкурсове и уроци по програмиране, уеб дизайн – безплатно

програмиране за деца – безплатни курсове и уроцибезплатен SEO курс - оптимизация за търсачки

уроци по уеб дизайн, HTML, CSS, JavaScript, Photoshop

уроци по програмиране и уеб дизайн за ученициASP.NET MVC курс – HTML, SQL, C#, .NET, ASP.NET MVC

безплатен курс "Разработка на софтуер в cloud среда"

BG Coder - онлайн състезателна система - online judge

курсове и уроци по програмиране, книги – безплатно от Наков

безплатен курс "Качествен програмен код"

алго академия – състезателно програмиране, състезания

ASP.NET курс - уеб програмиране, бази данни, C#, .NET, ASP.NETкурсове и уроци по програмиране – Телерик академия

курс мобилни приложения с iPhone, Android, WP7, PhoneGap

free C# book, безплатна книга C#, книга Java, книга C#Дончо Минков - сайт за програмиранеНиколай Костов - блог за програмиранеC# курс, програмиране, безплатно

?

? ? ??

?? ?

?

?

?

??

?

?

? ?

Questions?

?http://academy.telerik.com

WPF Controls

Page 53: 3. XAML & WPF - WPF Controls

Exercises

1. Write a program that show the simple window with one TextBox. Add text to the TextBox. If you select some text in the TextBox – display the current selection information.

2. Write a program with a Button and a Label. The label should show the number of clicks on the button.

3. Write a program that visualize which one of the items collection are checked.

4. Write a program that shows a ComboBox with various elements added to its Items. For example – add text, ellipse and picture.

53

Page 54: 3. XAML & WPF - WPF Controls

Exercises (2)

5. Write a program that shows ListView with columns that contain controls such as checkboxes and text boxes. The name of the columns are ID, Enabled, Value.

6. Write a text editing user control that is like simple WordPad. It should have at least a TextWrap property, Scrollbar, Buttons for Save and Load, ComboBoxes for choosing FontFamily and FontSize.

54

Page 55: 3. XAML & WPF - WPF Controls

Exercises (3)7. Implement a specialized editor of text

document libraries. A library is a number of text documents, organized as a tree in folders. In a folder there can be documents and other folders (as in Windows). Every document is some text with formatting. The editor must be able to create libraries, to open/save libraries, to read/write libraries from/to XML files. When a library is open the editor can edit the documents inside (changing the text and the formatting) and can create/delete/rename folders and documents. Use a TreeView for the folder tree and RichTextBox for the active document.

55

Page 56: 3. XAML & WPF - WPF Controls

Exercises (4)The editor should have a main menu, 2 context menus (for the folder tree and for the active document area), 3 tool bars (to open/save a library, to facilitate working with the folder tree and one for the active document), a status bar and appropriate shortcuts for the most frequently used

56

Page 57: 3. XAML & WPF - WPF Controls

Free Trainings @ Telerik Academy

Desktop Applications with C# and WPF academy.telerik.com/

Telerik Software Academy academy.telerik.com

Telerik Academy @ Facebook facebook.com/TelerikAcademy

Telerik Software Academy Forums forums.academy.telerik.com


Recommended