<\/Page><\/p>\n
You should see the window shown in Figure 26-1 in the top half of the screen.<\/p>\n
Figure 26-1. The Canvas layout manager allows for absolute positioning of content<\/p>\n
Note that the order you declare content within a Canvas is not used to calculate placement; instead, placement is based on the control\u2019s size and the Canvas.Top, Canvas.Bottom, Canvas.Left, and Canvas. Right properties.<\/p>\n
\u25a0Note if subelements within a Canvas do not define a specific location using attached property syntax (e.g.,
Using the Canvas type might seem like the preferred way to arrange content (because it feels so familiar), but this approach does suffer from some limitations. First, items within a Canvas do not dynamically resize themselves when applying styles or templates (e.g., their font sizes are unaffected). Second, the Canvas will not attempt to keep elements visible when the end user resizes the window to a smaller surface.
Positioning Content Within WrapPanel Panels
Because content within a WrapPanel does not dock to a given side of the panel, the order in which you declare the elements is important (content is rendered from the first element to the last). If you were to load the XAML data found within the SimpleWrapPanel.xaml file, you would find it contains the following markup (enclosed within a Page definition):<\/p>\n
When you load this markup, the content looks out of sorts because it flows from left to right across the window (see Figure 26-2).<\/p>\n
Figure 26-2. Content in a WrapPanel behaves much like a traditional HTML page<\/p>\n
By default, content within a WrapPanel flows from left to right. However, if you change the value of the
<\/p>\nYou can declare a WrapPanel (as well as some other panel types) by specifying ItemWidth and ItemHeight values, which control the default size of each item. If a subelement does provide its own Height and\/or Width value, it will be positioned relative to the size established by the panel. Consider the following markup:<\/p>\n
<\/p>\nThe rendered code looks like Figure 26-3 (notice the size and position of the Button control, which has a specified unique Width value).<\/p>\n
Figure 26-3. A WrapPanel can establish the width and height of a given item<\/p>\n
As you might agree after looking at Figure 26-3, a WrapPanel is not typically the best choice for arranging content directly in a window because its elements can become scrambled as the user resizes the window. In most cases, a WrapPanel will be a subelement to another panel type, allowing a small area of the window to wrap its content when resized (e.g., a ToolBar control).<\/p>\n
Positioning Content Within StackPanel Panels
Figure 26-4. Vertical stacking of content<\/p>\n
If you assign the Orientation property to Horizontal as follows, the rendered output will match that shown in Figure 26-5:<\/p>\n
<\/p>\nFigure 26-5. Horizontal stacking of content<\/p>\n
Again, as is the case with the WrapPanel, you will seldom want to use a StackPanel to arrange content directly within a window. Instead, you should use StackPanel as a subpanel to a master panel.<\/p>\n
Positioning Content Within Grid Panels
\u25a0Note if you do not define any rows or columns, the Grid defaults to a single cell that fills the entire surface of the window. Furthermore, if you do not assign a cell value (column and row) for a subelement within a Grid, it automatically attaches to column 0, row 0.<\/p>\n
You achieve the first two steps (defining the columns and rows) by using the Grid.ColumnDefinitions and Grid.RowDefinitions elements, which contain a collection of ColumnDefinition and RowDefinition elements, respectively. Each cell within a grid is indeed a true .NET object, so you can configure the look and feel and behavior of each cell as you see fit.
Figure 26-6. The Grid panel in action<\/p>\n
Notice that each element (including a light green Rectangle element thrown in for good measure) connects itself to a cell in the grid using the Grid.Row and Grid.Column attached properties. By default, the ordering of cells in a grid begins at the upper left, which you specify using Grid.Column=\"0\" Grid.Row=\"0\". Given that your grid defines a total of four cells, you can identify the bottom-right cell using Grid.Column=\"1\" Grid.Row=\"1\".<\/p>\n
Sizing Grid Columns and Rows
Grids with GridSplitter Types
<\/p>\n<\/p>\nFirst, notice that the column that will support the splitter has a Width property of Auto. Next, notice that the GridSplitter uses attached property syntax to establish which column it is working with. If you were
Figure 26-7. Grid types containing splitters<\/p>\n
Positioning Content Within DockPanel Panels
<\/p>\nFigure 26-8. A simple DockPanel<\/p>\n
\u25a0Note if you add multiple elements to the same side of a DockPanel, they will stack along the specified edge in the order they are declared.<\/p>\n
The benefit of using DockPanel types is that, as the user resizes the window, each element remains connected to the specified side of the panel (through DockPanel.Dock). Also notice that the opening DockPanel tag in this example sets the LastChildFill attribute to true. Given that the Button control is indeed the \u201clast child\u201d in the container, it will therefore be stretched within the remaining space.<\/p>\n
Enabling Scrolling for Panel Types
You can see the result of the previous XAML definition in Figure 26-9 (notice the scrollbar on the right since the window isn\u2019t sized to show all five buttons).<\/p>\n
Figure 26-9. Working with the ScrollViewer type<\/p>\n
As you would expect, each panel provides numerous members that allow you to fine-tune content placement. On a related note, many WPF controls support two properties of interest (Padding and Margin) that allow the control itself to inform the panel how it wants to be treated. Specifically, the Padding property controls how much extra space should surround the interior control, while Margin controls the extra space around the exterior of a control.
Configuring Panels Using the Visual Studio Designers
WinExe<\/OutputType>net6.0-windows<\/TargetFramework>true<\/UseWPF>disable<\/Nullable>enable<\/ImplicitUsings>Notice how your initial Window makes use of a Grid layout by default, as shown here:<\/p>\n
If you are happy using the Grid layout system, notice in Figure 26-10 that you can easily carve out and resize the grid\u2019s cells using the visual layout. To do so, first select the Grid component in your Document Outline window and then click the grid\u2019s border to create new rows and columns.<\/p>\n
Figure 26-10. The Grid control can be visually cut into cells using the IDE\u2019s designer<\/p>\n
Now, let\u2019s say you have defined a grid with some number of cells. You can then drag and drop controls into a given cell of the layout system, and the IDE will automatically set the Grid.Row and Grid.Column properties of the control in question. Here is some possible markup generated by the IDE after dragging a Button into a predefined cell:<\/p>\n
<\/p>\nNow, let\u2019s say you would rather not use a Grid at all. If you right-click any layout node in the Document Outline window, you will find a menu option that allows you to change the current container into another (see Figure 26-11). Be aware that when you do so, you will (most likely) radically change the positioning of the controls because the controls will conform to the rules of the new panel type.<\/p>\n
Figure 26-11. The Document Outline window allows you to convert to new panel types<\/p>\n
Another handy trick is the ability to select a set of controls on the visual designer and group them into a new, nested layout manager. Assume you have a Grid that contains a set of random objects. Now, select a set of items on the designer by holding down the Ctrl key and clicking each item with the left mouse button. If you then right-click the selection, you can group the selected items into a new subpanel (see Figure 26-12).<\/p>\n
Figure 26-12. Grouping items into a new subpanel<\/p>\n
After you have done so, examine the Document Outline window once again to verify the nested layout system. As you build full-featured WPF windows, you will most likely always need to make use of a nested layout system, rather than simply picking a single panel for all of the UI display (in fact, the remaining WPF examples in the text will typically do so). On a final note, the nodes in the Document Outline window are all drag and droppable. For example, if you wanted to move a control currently in the DockPanel into the parent panel, you could do so as suggested in Figure 26-13.<\/p>\n
Figure 26-13. Relocating items via the Document Outline window<\/p>\n
As you work through the remaining WPF chapters, I\u2019ll point out additional layout shortcuts where possible. However, it\u2019s definitely worth your time to experiment and test various features yourself. To keep you moving in the right direction, the next example in the chapter will illustrate how to build a nested layout manager for a custom text processing application (with spell-checking!).<\/p>\n
Building a Window\u2019s Frame Using Nested Panels
WinExe<\/OutputType>net6.0-windows<\/TargetFramework>true<\/UseWPF>disable<\/Nullable>enable<\/ImplicitUsings>Your goal is to construct a layout where the main window has a topmost menu system, a toolbar under the menu system, and a status bar mounted on the bottom of the window. The status bar will contain a pane to hold text prompts that are displayed when the user selects a menu item (or toolbar button), while the menu system and toolbar will offer UI triggers to close the application and display spelling suggestions in an Expander widget. Figure 26-14 shows the initial layout you are shooting for; it also shows the spell-checking capabilities within WPF.<\/p>\n
Figure 26-14. Using nested panels to establish a window\u2019s UI<\/p>\n
To begin building this UI, update the initial XAML definition for your Window type so it uses a DockPanel
Building the Menu System
Notice that you dock the menu system to the top of the DockPanel. Also, you use the Separator element to insert a thin horizontal line in the menu system, directly before the Exit option. Also notice that the Header values for each MenuItem contain an embedded underscore token (e.g., _Exit). You use this token to establish which letter will be underlined when the end user presses the Alt key (for keyboard shortcuts). This is a change from the & character used in Windows Forms since XAML is based on XML, and the & character has meaning in XML.
and MouseExit event handlers for each subitem will eventually update your status bar; however, for now, you will simply provide shells. Finally, the ToolsSpellingHints_Click() handler for the Tools Spelling Hints menu item will also remain a shell for the time being. Here are the current updates to your code- behind file (including the updated using statements):<\/p>\n
using System.IO; using System.Windows;
namespace MyWordPad;<\/p>\n
public partial class MainWindow : Window
protected void FileExit_Click(object sender, RoutedEventArgs args)
protected void ToolsSpellingHints_Click(object sender, RoutedEventArgs args)
Building Menus Visually
Building the Toolbar
Your ToolBar control consists of two Button controls, which just so happen to handle the same events and are handled by the same methods in your code file. Using this technique, you can double up your handlers to serve both menu items and toolbar buttons. Although this toolbar uses the typical push buttons, you should appreciate that the ToolBar type \u201cis-a\u201d ContentControl; therefore, you are free to embed any types into its surface (e.g., drop-down lists, images, and graphics). The only other point of interest here is that the Check button supports a custom mouse cursor through the Cursor property.<\/p>\n
\u25a0Note you can optionally wrap the ToolBar element within a ToolBarTray element, which controls layout, docking, and drag-and-drop operations for a set of ToolBar objects.<\/p>\n
Building the Status Bar
Finalizing the UI Design
Spelling Hints\u2014-- This will be the area to type within -->Implementing the MouseEnter\/MouseLeave Event Handlers
public partial class MainWindow : System.Windows.Window
statBarText.Text = \"Ready\";
At this point, you can run your application. You should see your status bar change its text based on which menu item\/toolbar button you hover your mouse over.<\/p>\n
Implementing the Spell-Checking Logic
protected void ToolsSpellingHints_Click(object sender, RoutedEventArgs args)
\/\/ Try to get a spelling error at the current caret location. SpellingError error = txtData.GetSpellingError(txtData.CaretIndex); if (error != null)
\/\/ Show suggestions and expand the expander. lblSpellingHints.Content = spellingHints; expanderSpelling.IsExpanded = true;
The preceding code is quite simple. You simply figure out the current location of the caret in the text box by using the CaretIndex property to extract a SpellingError object. If there is an error at said location (meaning the value is not null), you loop over the list of suggestions using the aptly named Suggestions property. After you have all the suggestions for the misspelled word, you connect the data to the Label in the Expander.
Understanding WPF Commands
In contrast, WPF commands are event-like entities that are independent from a specific control and, in many cases, can be successfully applied to numerous (and seemingly unrelated) control types. By way of a few examples, WPF supports copy, paste, and cut commands, which you can apply to a wide variety of UI elements (e.g., menu items, toolbar buttons, and custom buttons), as well as keyboard shortcuts (e.g., Ctrl+C and Ctrl+V).
The Intrinsic Command Objects
public interface ICommand
\/\/ Defines the method that determines whether the command
\/\/ Defines the method to be called when the command is invoked.
WPF provides various command classes, which expose close to 100 command objects, out of the box. These classes define numerous properties that expose specific command objects, each of which implements ICommand. Table 26-3 documents some of the standard command objects available.<\/p>\n
Table 26-3. The Intrinsic WPF Control Command Objects<\/p>\n
WPF Class Command Objects Meaning in Life
Connecting Commands to the Command Property
<-- New menu item with commands! -->Notice that each of the subitems on the Edit menu has a value assigned to the Command property. Doing this means that the menu items automatically receive the correct name and shortcut key (e.g., Ctrl+C for a cut operation) in the menu item UI; it also means that the application is now copy, cut, and paste aware with no procedural code!
Connecting Commands to Arbitrary Actions
public MainWindow()
This new method will programmatically create a new CommandBinding object, which you can use whenever you need to bind a command object to a given event handler in your application. Here, you configure your CommandBinding object to operate with the ApplicationCommands.Help command, which is automatically F1 aware:<\/p>\n
private void SetF1CommandBinding()
Most CommandBinding objects will want to handle the CanExecute event (which allows you to specify whether the command occurs based on the operation of your program) and the Executed event (which is where you can author the content that should occur once the command occurs). Add the following event handlers to your Window-derived type (note the format of each method, as required by the associated delegates):<\/p>\n
private void CanHelpExecute(object sender, CanExecuteRoutedEventArgs e)
private void HelpExecuted(object sender, ExecutedRoutedEventArgs e)
In the preceding snippet, you implemented CanHelpExecute() so it always allows F1 help to launch; you do this by simply returning true. However, if you have certain situations where the help system should not display, you can account for this and return false when necessary. Your \u201chelp system\u201d displayed within HelpExecuted() is little more than a message box. At this point, you can run your application. When you press the F1 key on your keyboard, you will see your message box appear.<\/p>\n
Working with the Open and Save Commands
<\/p>\nMouseEnte\" =\"MouseEnterExitA\"ea\"
Again, remember that all command objects implement the ICommand interface, which defines two events (CanExecute and Executed). Now you need to enable the entire window so it can check whether it is currently okay to fire these commands; if so, you can define an event handler to execute the custom code.
<\/p>\n\u2014-- This will inform the Window which handlers to call, when testing for the Open and Save commands. -->\u2014-- This panel establishes the content for the window -->Now right-click each of the Executed and CanExecute attributes in your XAML editor and pick the Navigate to Event Handler menu option. As you might recall from Chapter 25, this will automatically generate stub code for the event itself. At this point, you should have four empty handlers in the C# code file for the window.
private void OpenCmdCanExecute(object sender, CanExecuteRoutedEventArgs e)
private void SaveCmdCanExecute(object sender, CanExecuteRoutedEventArgs e)
The corresponding Executed handlers perform the actual work of displaying the open and save dialog boxes; they also send the data in your TextBox to a file. Begin by making sure that you import the System.IO and Microsoft.Win32 namespaces into your code file. The following completed code is straightforward:<\/p>\n
private void OpenCmdExecuted(object sender, ExecutedRoutedEventArgs e)
\/\/ Did they click on the OK button? if (true == openDlg.ShowDialog())
\/\/ Show string in TextBox. txtData.Text = dataFromFile;
private void SaveCmdExecuted(object sender, ExecutedRoutedEventArgs e)
\/\/ Did they click on the OK button? if (true == saveDlg.ShowDialog())
\u25a0Note Chapter 29 will take a much deeper look into the WPF command system. in it, you will create custom commands based on the ICommand interface as well as create RelayCommands.<\/p>\n
That wraps up this example and your initial look at working with WPF controls. Here, you learned how to work with basic commands, menu systems, status bars, toolbars, nested panels, and a few basic UI controls, such as TextBox and Expander. The next example will work with some more exotic controls while examining several important WPF services at the same time.<\/p>\n
Understanding Routed Events
MainWindow.xaml file by adding the following Button control, which has some complex content, inside the (Window and Grid elements omitted for brevity):<\/p>\nFancy Button!<\/Label>Notice in the Button\u2019s opening definition that you have handled the Click event by specifying the name of a method to be called when the event is raised. The Click event works with the RoutedEventHandler delegate, which expects an event handler that takes an object as the first parameter and a System.Windows. RoutedEventArgs as the second. Implement this handler as so:<\/p>\n
public void btnClickMe_Clicked(object sender, RoutedEventArgs e)
If you run your application, you will see this message box display, regardless of which part of the button\u2019s content you click (the green Ellipse, the yellow Ellipse, the Label, or the Button\u2019s surface). This is a good thing. Imagine how tedious WPF event handling would be if you were forced to handle a Click event for every one of these subelements. Not only would the creation of separate event handlers for each aspect of the Button be labor intensive, you would end up with some mighty nasty code to maintain down the road.
The Role of Routed Bubbling Events
By way of illustration, assume you need to handle the clicking of the outerEllipse control in a unique manner. First, handle the MouseDown event for this subelement (graphically rendered types such as the Ellipse do not support a Click event; however, they can monitor mouse button activity via MouseDown, MouseUp, etc.).<\/p>\n
Fancy Button!<\/Label>Then implement an appropriate event handler, which for illustrative purposes will simply change the
public void outerEllipse_MouseDown(object sender, MouseButtonEventArgs e)
With this, you can now take different courses of action depending on where the end user has clicked (which boils down to the outer ellipse and everywhere else within the button\u2019s scope).<\/p>\n
\u25a0Note Routed bubbling events always move from the point of origin to the next defining scope. Thus, in this example, if you click the innerEllipse object, the event will be bubbled to the Canvas, not to the outerEllipse because they are both Ellipse types within the scope of Canvas.<\/p>\n
Continuing or Halting Bubbling
public void outerEllipse_MouseDown(object sender, MouseButtonEventArgs e)
In this case, you would find that the title of the window is changed, but you will not see the MessageBox displayed by the Click event handler of the Button. In a nutshell, routed bubbling events make it possible to allow a complex group of content to act either as a single logical element (e.g., a Button) or as discrete items (e.g., an Ellipse within the Button).<\/p>\n
The Role of Routed Tunneling Events
<\/p>\nNext, retrofit the current C# class definition by updating each event handler (for all objects) to append data about the current event into a string member variable named mouseActivity, using the incoming event args object. This will allow you to observe the flow of events firing in the background.<\/p>\n
public partial class MainWindow : Window
private void outerEllipse_PreviewMouseDown(object sender, MouseButtonEventArgs e)
Notice that you are not halting the bubbling of an event for any event handler. If you run this application, you will see a unique message box display based on where you click the button. Figure 26-15 shows the result of clicking the outer Ellipse object.<\/p>\n
Figure 26-15. Tunneling first, bubbling second<\/p>\n
So, why do WPF events typically tend to come in pairs (one tunneling and one bubbling)? The answer is that by previewing events, you have the power to perform any special logic (data validation, disable bubbling action, etc.) before the bubbling counterpart fires. By way of an example, assume you have a TextBox that should contain only numerical data. You could handle the PreviewKeyDown event, and if you see the user has entered non-numerical data, you could cancel the bubbling event by setting the Handled property to true.
A Deeper Look at WPF APIs and Controls
Working with the TabControl
You will notice that you are given two tab items automatically. To add additional tabs, you simply need to right-click the TabControl node in the Document Outline window and select the Add TabItem menu option (you can also right-click the TabControl on the designer to activate the same menu option) or just start typing in the XAML editor. Add one additional tab using either approach.
Figure 26-16. The initial layout of the tab system<\/p>\n
Be aware that when you select a tab for editing, that tab becomes the active tab, and you can design that tab by dragging controls from the Toolbox window. Now that you have the core TabControl defined, you can work out the details tab by tab and learn more features of the WPF API along the way.<\/p>\n
Building the Ink API Tab
\u25a0Note For most of the rest of this chapter (and the next WPF chapters as well), i will be editing the XaMl directly instead of using the various designer windows. While the dragging and dropping of controls works, more often than not the layout isn\u2019t what you want (visual studio adds margins and padding based on where you drop the control), and you spend a significant amount of time cleaning up the XaMl anyway.<\/p>\n
Begin by changing the Grid tag under the Ink API TabItem to a StackPanel and add a closing tag (make sure to remove \"\/\" from the opening tag). Your markup should look like this:Designing the ToolbarAdd three RadioButton controls inside a WrapPanel, inside a Border control, to the ToolBar as follows:<\/p>\n
When a RadioButton control is not placed inside of a parent panel control, it will take on a UI identical to a Button control! That\u2019s why I wrapped the RadioButton controls in the WrapPanel.
The RadioButton Control
simply assign them all to the same group name. This is helpful because the related items do not need to be physically collected in the same area but can be anywhere in the window.
Add the Save, Load, and Delete ButtonsAdd the InkCanvas Control
Preview the Window
Figure 26-17. The completed layout for the Ink API tab<\/p>\n
Handling Events for the Ink API Tab
public partial class MainWindow : Window
\/\/ Insert code required on object creation below this point.
private void ColorChanged(object sender,SelectionChangedEventArgs e)
You will implement these handlers in a later step, so leave them empty for the time being.<\/p>\n
Add Controls to the Toolbox
Figure 26-18. Adding new components to the Visual Studio Toolbox<\/p>\n
\u25a0Note The ink controls are not compatible with the visual studio XaMl designer in version 16.8.3 (the current version at the time of this writing) or visual studio 16.9 Preview 2. The controls can still be used, just not through the designer.<\/p>\n
The InkCanvas Control
Figure 26-19. The InkCanvas in action<\/p>\n
The InkCanvas does more than draw mouse (or stylus) strokes; it also supports a number of unique editing modes, controlled by the EditingMode property. You can assign this property any value from the related InkCanvasEditingMode enumeration. For this example, you are interested in Ink mode, which is the default option you just witnessed; Select mode, which allows the user to select a region with the mouse to move or resize; and EraseByStoke, which will delete the previous mouse stroke.<\/p>\n
\u25a0Note a stroke is the rendering that takes place during a single mouse down\/mouse up operation. The InkCanvas stores all strokes in a StrokeCollection object, which you can access using the Strokes property.<\/p>\n
Update your RadioButtonClicked() handler with the following logic, which places the InkCanvas in the correct mode, based on the selected RadioButton:<\/p>\n
private void RadioButtonClicked(object sender,RoutedEventArgs e)
Also, set the mode to Ink by default in the window\u2019s constructor. And while you are at it, set a default selection for the ComboBox (more details on this control in the next section), as follows:<\/p>\n
public MainWindow()
\/\/ Be in Ink mode by default. this.MyInkCanvas.EditingMode = InkCanvasEditingMode.Ink; this.inkRadio.IsChecked = true; this.comboColors.SelectedIndex = 0;
Now run your program again by pressing F5. Enter Ink mode and draw some data. Next, enter Erase mode and remove the previous mouse stroke you entered (you\u2019ll notice the mouse icon automatically looks like an eraser). Finally, enter Select mode and select some strokes by using the mouse as a lasso.
Figure 26-20. The InkCanvas in action, with edit modes!<\/p>\n
The ComboBox Control
private void ColorChanged(object sender, SelectionChangedEventArgs e)
\/\/ Change the color used to render the strokes.
Now recall that the ComboBox has a collection of ComboBoxItems. If you view the generated XAML, you\u2019ll see the following definition:<\/p>\n
When you call SelectedItem, you grab the selected ComboBoxItem, which is stored as a general Object. After you cast the Object as a ComboBoxItem, you pluck out the value of the Content, which will be the string Red, Green, or Blue. This string is then converted to a Color object using the handy ColorConverter utility class. Now run your program again. You should be able to change between colors as you render your image.
Notice that each StackPanel assigns a value to its Tag property, which is a simple, fast, and convenient way to discover which stack of items has been selected by the user (there are better ways to do this, but this will do for now). With this adjustment, you need to change the implementation of your ColorChanged() method, like this:<\/p>\n
private void ColorChanged(object sender, SelectionChangedEventArgs e)
Now run your program again and take note of your unique ComboBox (see Figure 26-21).<\/p>\n
Figure 26-21. A custom ComboBox, thanks to the WPF content model<\/p>\n
Saving, Loading, and Clearing InkCanvas Data
<\/p>\nNext, import the System.IO and System.Windows.Ink namespaces to your code file. Implement the handlers, like this:
private void LoadData(object sender, RoutedEventArgs e)
private void Clear(object sender, RoutedEventArgs e)
You should now be able to save your data to a file, load it from the file, and clear the InkCanvas of all data. That wraps up the first tab of the TabControl, as well as your examination of the WPF digital Ink API. To be sure, there is more to say about this technology; however, you should be in a good position to dig into the topic further if that interests you. Next, you will learn how to use WPF data binding.<\/p>\n
Introducing the WPF Data-Binding Model
Building the Data Binding Tab
<\/p>\nNotice that the ScrollBar object (named mySB here) has been configured with a range between 1 and
Establishing Data Bindings
<\/p>\nNote the value assigned to the Label\u2019s Content property. The {Binding} statement denotes a data- binding operation. The ElementName value represents the source of the data-binding operation (the ScrollBar object), while the Path indicates the property being bound to, in this case the Value of the scrollbar.
The DataContext Property
In the current example, the output would be identical if you were to modify the markup in this way.
<\/p>\nYou could use Visual Studio to generate data bindings for multiple controls, but instead try entering the modified markup manually using the XAML editor, like so:<\/p>\n
<\/p>\nHere, you set the DataContext property on the StackPanel directly. Therefore, as you move the thumb, you see not only the current value on the Label but also the font size of the Button grow and shrink accordingly, based on the same value (Figure 26-22 shows one possible output).<\/p>\n
Figure 26-22. Binding the ScrollBar value to a Label and a Button<\/p>\n
Formatting the Bound Data
If you don\u2019t have any text in the format specification, then you need to lead with an empty set of braces, which is the escape sequence for XAML. This lets the processor know that the next characters are literals and not a binding statement, for example. Here is the updated XAML:<\/p>\n
<\/p>\n\u25a0Note if you are binding a Text property of a control, you can add a StringFormat name-value pair right in the binding statement. it only needs to be separate for Content properties.<\/p>\n
Data Conversion Using IValueConverter
using System.Windows.Data; namespace WpfControlsAndAPIs;<\/p>\n
public class MyDoubleConverter : IValueConverter
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
The Convert() method is called when the value is transferred from the source (the ScrollBar) to the destination (the Text property of the TextBox). You will receive many incoming arguments, but you only need to manipulate the incoming object for this conversion, which is the value of the current double. You can use this type to cast the type into an integer and return the new number.