Tool Development 02 - Advanced WPF Controls

Tool DevelopmentChapter 02: Advanced WPF Controls

Nick Prühs

June 5, 2014

5 Minute Review Session

• Why should you make tools as early as possible?

• Name a few important requirements for all tools!

• What is Model-View-Controller?

• What is the basic architecture of a WPF application?

• How are C# events used?

• How do you define the entrance point of a WPF application?

• How are the controls arranged by the WPF layout engine?

• How do you bind data to a WPF control?

2 / 58

Assignment Solution #1

3 / 58

Objectives

• To understand the different layouting mechanismsof WPF

• To learn how to set up robust and consistent error handling

• To get an overview of advanced WPF controls such as menus and progress bars

4 / 58

WPF UI Layout

• Defined by location and size of all controls

• Has to adapt to changes in window size• This is achieved by relative positioning.

• Determining the final layout is done in two steps:

1. Control tells its parent what location and size it requires.

2. Parent tells the control what space it can have.

5 / 58

Canvas Control

Only panel element that has no inherent layout characteristics. The ZIndex property determines the order in which child elements that share the same coordinate space appear.

Rendered View

6 / 58

Canvas Control

Only panel element that has no inherent layout characteristics. The ZIndex property determines the order in which child elements that share the same coordinate space appear.

XAML<Canvas Height="400" Width="400">

</Canvas>

7 / 58

DockPanel Control

The position of child elements of a DockPanel on the screen is determined by the Dock property of the respective child elements and the relative order of those child elements.

Rendered View

8 / 58

DockPanel Control

</Border>

</Border>

</Border>

<TextBlock>This content will "Fill" the remaining space.</TextBlock>

</Border>

</DockPanel>

9 / 58

Grid Control

The position of child elements of a DockPanel on the screen is determined by the Dock property of the respective child elements and the relative order of those child elements.

Rendered View

10 / 58

Grid Control

11 / 58

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

Grid Control

XAML (Cont.)

12 / 58

<TextBlock Grid.Row="0" Grid.Column="0" Margin="5">Quarter 1</TextBlock>

</Grid>

ScrollViewer Control

Enables content to be displayed in a smaller area than its actual size. When the content of the is not entirely visible, the ScrollViewer displays scrollbars.

Rendered View

13 / 58

ScrollViewer Control

14 / 58

Scrolling is enabled when it is necessary. Resize the window, making it larger and

smaller.

</TextBlock>

</StackPanel>

</ScrollViewer>

StackPanel Control

Allows you to stack elements in a specified direction.

Rendered View

15 / 58

StackPanel Control

16 / 58

<TextBlock>Stacked Item #1</TextBlock>

</Border>

</Border>

</Border>

</StackPanel>

WrapPanel Control

Positions child elements in sequential position from left to right, breaking content to the next line at the edge of the containing box.

Rendered View

17 / 58

WrapPanel Control

18 / 58

<Button Width="200">Button 1</Button>

<Button>Button 2</Button>

</WrapPanel>

Error Handling

• Should be done by the Controller.

• Should provide rich and meaningful error messages.• Cause of the error

• What needs to be done to avoid the error

19 / 58

This must never happen. Never, never, never, never, never!

Excursus: C# Exceptions

• Help you deal with any unexpected or exceptional situations that occur when a program is running

• Exceptions are types that all ultimately derive from System.Exception.

• Exception objects contain detailed information about the error, such as the state of the call stack and a text description of the error.

• Generated by the common language runtime (CLR), by the .NET Framework or any third-party libraries, or by application code.

20 / 58

Throwing Exceptions

• Exceptions are created by using the throw keyword.

if (width <= 0)

throw new ArgumentOutOfRangeException("width", "Width must be positive.");

21 / 58

Handling Exceptions

• Handling uses the try, catch, and finally keywords to• try actions that may not succeed• handle failures when you decide that it is reasonable to do so, and• clean up resources afterward

this.map = new Map(width, height);

catch (ArgumentOutOfRangeException e)

MessageBox.Show(e.Message);

22 / 58

Handling Exceptions

• Use a try block around the statements that might throw exceptions.

• Once an exception occurs in the try block, the flow of control jumps to the first associated exception handler that is present anywhere in the call stack.

• If no exception handler for a given exception is present, the program stops executing with an error message.

23 / 58

Handling Exceptions

24 / 58

Unhandled exception reported by Microsoft Visual Studio 2012

Exception Best Practice

• Do not catch an exception unless you can handle it and leave the application in a known state.

• Do not catch non-specific exceptions, such as System.Exception.

• Use a finally block to release resources, for example to close any streams or files that were opened in the try block.

25 / 58

Gotcha!

Never use empty catch blocks!

26 / 58

Common Exceptions

• Thrown by your application or the framework• InvalidOperationException

• ArgumentException

• ArgumentNullException

• ArgumentOutOfRangeException

• Thrown by the CLR• NullReferenceException

• IndexOfOutRangeException

• StackOverflowException

• OutOfMemoryException

27 / 58

Error Handling

• Encapsulate showing error messages in a dedicated Controller method.• Allows you to change the error handling at a single point

in your code later.

private void ShowErrorMessage(string title, string message)

MessageBox.Show(

message, title, MessageBoxButton.OK, MessageBoxImage.Error, MessageBoxResult.Cancel);

28 / 58

MessageBox in WPF

• Prefabricated modal dialog box that displays a text message to a user

• Show a message box by calling the static Show method of the MessageBox class

29 / 58

MessageBox Usage

• Parameters• Text

• Title bar caption

• Button(s)

• Icon

• Return Value• Result

30 / 58

MessageBox Parameter Types

• Buttons• OK

• OKCancel

• YesNo

• YesNoCancel

• Icon• Error

• Question

• Warning

• Information

31 / 58

Commands in WPF

• Provide input handling at a more semantic level than device input

• Separate the semantics and the object that invokes a command from the logic that executes the command• Allows for multiple and disparate sources to invoke the

same command logic

• Allows the command logic to be customized for different targets

• Indicate whether an action is available

32 / 58

WPF Command Example

• Cut selected objects or text• By clicking a button

• By choosing an item in a menu

• By using a key combination, such as CTRL+X

• Only makes sense when something is selected• Disable buttons and menu items so that the user knows

whether it is possible to perform an action

33 / 58

WPF Command Breakdown

• Command: Action to be executed

• Command source: Object which invokes the command

• Command target: Object that the command is being executed on

• Command binding: Object which maps the command logic to the command

34 / 58

WPF Command Example

• Command: Paste

• Command source: MenuItem

• Command target: Textbox

• Command binding: Supplied by Textbox control

35 / 58

Custom Commands

• Created by implementing the ICommand interface:• Method Execute: Performs the actions that are

associated with the command.

• Method CanExecute: Determines whether the command can execute on the current command target.

• Event CanExecuteChanged: Raised if the command manager that centralizes the commanding operations detects a change in the command source.

• WPF implementation of ICommand is the RoutedCommand class

36 / 58

Common WPF Commands

• MediaCommands• Play, Pause, NextTrack, IncreaseVolume

• ApplicationCommands• New, Open, Copy, Undo

• NavigationCommands• NextPage, Refresh, Search, Zoom

• ComponentCommands• MoveDown, ScrollPageDown

• EditionCommands• Delete, EnterLineBreak, ToggleItalic

37 / 58

Command Sources

• Implementations of ICommandSource• e.g. MenuItem, Button

38 / 58

Command Sources

• Input Bindings• many predefined commands include a set of default input bindings

• keyboard binding "CTRL+C“

• Tablet PC pen gestures

• speech information

<Window.InputBindings>

<KeyBinding Key=“N"

Modifiers="Control"

Command="ApplicationCommands.New" />

</Window.InputBindings>

39 / 58

Handling Commands

• Execute and CanExecute methods do not contain the application logic for the command

• Pass through the element tree until they encounter an object with a CommandBinding

• CommandBinding contains the handlers for these events• attached to a specific object, such as the root Window of

the application or a control

• defines the scope of the binding

40 / 58

Handling Commands Example

41 / 58

<Window.CommandBindings>

<CommandBinding Command="ApplicationCommands.New"

Executed="CommandExecutedNew"

CanExecute="CommandCanExecuteNew"/>

</Window.CommandBindings>

private void CommandExecutedNew(object sender, ExecutedRoutedEventArgs e)

this.controller.ExecuteNew();

private void CommandCanExecuteNew(object sender, CanExecuteRoutedEventArgs e)

e.CanExecute = this.controller.CanExecuteNew();

Menu Control

Organizes elements associated with commands and event handlers in a hierarchical order.

Rendered View

42 / 58

Menu Control

43 / 58

</MenuItem>

</Menu>

</DockPanel>

Toolbar Control

Container for a group of commands or controls.

Rendered View

44 / 58

Toolbar Control

45 / 58

</Button>

</Button>

</ToolBar>

</ToolBarTray>

StatusBar Control

Displays items and information in a horizontal bar in an application window.

Rendered View

46 / 58

StatusBar Control

47 / 58

<TextBlock>Opening File...</TextBlock>

</StatusBarItem>

</StatusBar>

ProgressBar Control

Indicates the progress of an operation.

Rendered View

48 / 58

ProgressBar Control

49 / 58

</StatusBarItem>

Opening File...

</TextBlock>

</StatusBarItem>

</TextBlock>

</StatusBarItem>

</StatusBar>

ToolTip Control

Creates a pop-up window that displays information for an element in the interface.

Rendered View

50 / 58

ToolTip Control

51 / 58

<Button.ToolTip>

<TextBlock>Creates a new map.</TextBlock>

</Button.ToolTip>

</Button>

Assignment #2

1. Menu

1. Modify your MainWindow to use a Menu with two MenuItems instead of Buttons.

2. Dock the menu to the Top of your MainWindow.3. Use the WPF commands ApplicationCommands.Help

and ApplicationCommands.Close for the menu items and bind these commands to Execute and CanExecutemethods in your MainWindow.xaml.cs.

4. In your MainWindow.xaml.cs, delegate the calls toExecute and CanExecute to your controllerApp.xaml.cs.

52 / 58

Assignment #2

2. Map Model

1. In App.xaml, define an event handler for the Startup event of your application.

2. In App.xaml.cs, create a method that handles the Startup event, setting up a dictionary that maps strings to MapTileTypes:

1. Grass – Movement Cost 1

2. Desert – Movement Cost 3

3. Water – Movement Cost 5

53 / 58

Assignment #2

3. New Map

1. Create a new window called NewMapWindow.1. Add TextBoxes that allow the user to specify the width and

height of the map to create.2. Add an empty StackPanel that can be filled by code with radio

buttons for all map tile types.3. Add a “Create New Map” button.4. Dynamically fill the StackPanel with one RadioButton for each

map tile type defined in your controller.

2. Add a new MenuItem “New” to your MainWindow that shows the NewMapWindow.

3. Handle the Clicked event of the “Create New Map” button of the NewMapWindow, closing the window.

54 / 58

Assignment #2

4. Parsing and Error Handling

1. In App.xaml.cs, create a new map with the specified dimensions and tiles when the user clicks “Create New Map” in the NewMapWindow.

2. Show appropriate error messages when the user specifies negative or invalid (e.g. contains letters) map dimensions.

3. Ensure that the user always specifies a map tile type.

55 / 58

Assignment #2

5. Toolbar

1. Download the Visual Studio Image Library from http://www.microsoft.com/en-us/download/details.aspx?id=35825.

2. Add a ToolBar to your MainWindow with two buttonsfor the New and Help commands, using the images ofyour choice.

3. Add tooltips to both buttons.

56 / 58

References

• MSDN. WPF Controls by Category. http://msdn.microsoft.com/en-us/library/ms754204%28v=vs.110%29.aspx, June 2014.

• MSDN. Exceptions and Exception Handling. http://msdn.microsoft.com/en-us/library/ms173160.aspx, June 2014.

• MSDN. WPF Commanding Overview. http://msdn.microsoft.com/en-us/library/ms752308%28v=vs.110%29.aspx, June 2014.

57 / 58

Thank you for your attention!

Contact

dev@npruehs.de

http://www.npruehs.de

Twitter

@npruehs

Github

https://github.com/npruehs

58 / 58

Tool Development 02 - Advanced WPF Controls

Technology

Ivan Towlson Mindscape Session Code: WUX305 Agenda Data visualisation and Silverlight/WPF Visualising objects Visualising data sets Toolkits and controls

NAE Update Tool Help - Johnson Controls

FlexGrid for WPF and Silverlight - GrapeCityhelp.grapecity.com/componentone/PDF/WPF/WPF.FlexGrid.pdf · 2019-07-30 · FlexGrid for WPF and Silverlight Overview FlexGrid for WPF and

Introduction to GoXam - Diagram Controls for Microsoft WPF · GoXam provides controls for implementing diagrams in your WPF and Silverlight applications. GoWPF is the name for the

ComponentOne Gauges for WPF · you'll start in Visual Studio and create a new project, add Gauges for WPF controls to your ... select Test Solution to view how your application will

NetAdvantage for WPF 12.1 October 2012dl.infragistics.com/community/wpf/ReleaseNotes/WPF... · 2012. 11. 2. · NetAdvantage® for WPF 12.1 – Service Release Notes – October 2012

1. XAML & WPF - Introduction to XAML and WPF

microsoft wpf training, microsoft wpf online training | microsoft wpf training courses

ComponentOne SpellChecker for WPF - HTML5 / jQuery, ASP.NET, WPF

WPF Windows Based Controls

WPF Container & Controls in Gupta TD 6samples.tdcommunity.net/.../TD6x/TD_6_-_WPF_Container_Controls... · WHITEPAPER WPF Container & Controls in TD 6| O P E N T E X T G U P T A T

2. XAML & WPF - WPF Layout-Containers

4. XAML & WPF - WPF Templating-and-Styling

Content controls: Contain nested elements: Label, Button ...renzo/cs585/WPF-ControlsData.pdf · Content Model WPF controls 3 Panel class has a Children collection (property) to hold

NORRISEAL CONTROLS - Alberta Oil Tool · norriseal controls manufactured in canada by alberta oil tool level controllers series 1001a and 1001xl

ComponentOne PdfViewer for WPF - HTML5 / jQuery, ASP.NET, WPF

WPF chapter 15 Dr. John Abraham Professor UTPA. WPF –an introduction WPF provides a single platform capable of handling graphics, audio and video. WPF

WPF Controls

WPF for developers - optimizing your WPF application

Word for WPF - GrapeCityprerelease.componentone.com/help/WPF/WPF.Word.pdf · Quick Start: Word for WPF The quick start guide familiarizes you with Word for WPF . In this section,