Controls

WPF provides an entirely different set of libraries for developing applications. However, although these controls exist in a different library, how you interact with them from Visual Basic is generally the same. Each control has a set of properties, events, and methods that you can leverage. The XAML file may assign these values in the declarative format of XML, but you can still reference the same properties on the instances of the objects that the framework creates within your Visual Basic code.

Starting with the topmost section of the grid, Grid.Row 0, drag the following controls from the Toolbox onto the form: a Label, a TextBox, and a Button. These can be aligned into this region in the same order they were added. Ensure that the label is bound to the left side and top of the window, while the button is bound to the right side and top of the window. Meanwhile, the text box should be bound to the top and both sides of the window so that as the window is stretched, the width of the text box increases. The resulting XAML should be similar to this:

<Window x:Class="MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2 00 6/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2 006/xaml"

Title="ProVB_WPF" Height="3 50" Width="525" Name="MainWindow"> <Grid>

<Grid.RowDefinitions>

<RowDefinition Height="45" /> <RowDefinition Height="215*" /> <RowDefinition Height="40" /> </Grid.RowDefinitions>

<Label Margin="0,11,0,0" Name="Label1" HorizontalAlignment="Left" Width="80" Height="23" VerticalAlignment="Top">Image Path:</Label>

<TextBox Margin="81,13,92,0" Name="TextBox1" Height="21" VerticalAlignment="Top" />

<Button HorizontalAlignment="Right" Margin="0,11,9,11" Name="ButtonBrowse" Width="75">Images . . .</Button>

Code snippet from MainWindow.xaml

As shown in the newly added lines (in bold), each control is assigned a name and defines a set of editable properties. Note that these names can be addressed from within the code and that you can handle events from each control based on that control's named instance. For now, however, just adjust the text within the label to indicate that the text box to its immediate right will contain a folder path for images, and adjust the button control. Rename the Button control to ButtonBrowse and use the text Images... to label the button. There is obviously more to do with this button, but for now you can finish creating the initial user interface.

Next, add the following controls in the following order. First, add an Image control. To achieve a design surface similar to the one shown in Figure 17-2, drop the Image control so that it overlaps both the middle and bottom sections of the grid display. Now add three buttons to the bottom portion of the display. At this point the controls can be aligned. You can do this through a combination of editing the XAML directly and positioning things on the screen. For example, expand the Image control to the limits of the two bottom grid rows using the design surface; similarly, align the buttons visually on the design surface.

As shown in the figure, the separations for the two row definitions are described in the design surface, and each of the buttons has a custom label. Note that the Next button is followed by a pair of greater than symbols, but the Prev button is missing a matching set of less than symbols. They could have been added as the &lt symbol but instead one of the changes to be made in the Visual Basic code is the addition of these symbols to the button label.

First, however, review the XAML code and ensure that, for example, the Image control is assigned to Grid .Row l and that the property Grid.Rowspan is 2. Unlike the items that were in Grid.Row 0, the items in other rows of the grid must be explicitly assigned. Similarly, the name and caption of each button in the bottom row of the grid are modified to reflect that control's behavior. These and similar changes are shown in the following XAML:

<Window x:Class="MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2 00 6/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2 006/xaml"

Title="ProVB_WPF" Height="3 50" Width="525" Name="MainWindow"> <Grid>

<Grid.RowDefinitions>

<RowDefinition Height="45" /> <RowDefinition Height="2l5*" /> <RowDefinition Height="40" />

</Grid.RowDefinitions>

<Label Margin="0,ll,0,0" Name="Labell" HorizontalAlignment="Left" Width="80" Height="23" VerticalAlignment="Top">Image Path:</Label>

<TextBox Margin="8l,l3,92,0" Name="TextBoxl" Height="2l" VerticalAlignment="Top" />

<Button HorizontalAlignment="Right" Margin="0,ll,9,ll" Name="ButtonBrowse" Width="75">Images . . .</Button>

<Image Grid.Row="1" Grid.RowSpan="2" Margin="0,0,0,0" Name="Image1" Stretch="Fill" />

<Button Grid.Row="2" HorizontalAlignment="Right" Margin="0,0,15,8"

Name="ButtonNext" Width="75" Height="23" VerticalAlignment="Bottom">Next >> </Button>

<Button Grid.Row="2" HorizontalAlignment="Left" Margin="15,0,0,8"

Name="ButtonPrev" Width="75" Height="23" VerticalAlignment="Bottom"> Prev</Button>

<Button Grid.Row="2" Margin="150,0,150,8" Name="ButtonLoad" Height="23" VerticalAlignment="Bottom">View Images</Button>

Code snippet from MainWindow.xaml

Note in the bold sections the description of the new controls. The Image control is first, and it is positioned in Grid.Row number l, which, because .NET arrays are always zero-based, is the second row. The second attribute on this node indicates that it will span more then a single row in the grid. For now, this control uses the default name, and it has been set so that it will stretch to fill the area that contains it.

Following the Image control are the definitions for the three buttons along the bottom of the display. For now, these buttons will control the loading of images; over the course of this chapter, these buttons will be either removed or redone significantly. The order of these buttons isn't important, so following their order in the file, the first button is like the others positioned in the final row of the grid. This button has been placed on the right-hand side of this area and is bound to the bottom and right corners of the display. Its name has been changed to "ButtonNext" and its label is "Next >>."

The next button is the Prev button, which has been placed and bound to the left-hand side and bottom of the display. Its name has been changed to "ButtonPrev," and its display text has been changed to read "Prev." As noted earlier, the arrow symbols are not in the button name; and, as you can test in your own code, attempting to add them here causes an error.

Finally, there is the ButtonLoad button, which is centered in the display area. It has been bound to both sides of the display to maintain its position in the center. The label for this button is "View Images," which is, of course, the goal of this application. However, in order for that to happen, you need an event handler for this button; in fact, you need several event handlers in order to get the basic behavior of the application in place.

0 0

Post a comment