Adding Controls to an Application with WPF
(Page 1 of 4 )
In this second part of a four-part series on learning how to use the WPF through an example, we continue constructing our to-do list application. You'll learn how to adjust the sizes of the "add task" and "delete task" buttons, and how to use a template to neaten the layout of the list.
Adding Controls in XAML
Now that the Grid is prepared, it's time to go ahead and add interactive controls to the mix. Remember, we're going to need a list of some sort to contain the tasks (after all, this is a to-do list), along with two buttons, one that will add a new task to the list, and another that will delete an existing task from the list. For the list, we're going to use a ListBox control, and for the buttons, we're going to use two Button controls.
Adding the basic controls to the application's XAML isn't very difficult. They simply need to be placed within the Grid tag:
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
...
<ListBox Name="TaskListBox" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" />
<Button Name="AddButton" Grid.Row="1" Grid.Column="0" Content="Add Task" />
<Button Name="DeleteButton" Grid.Row="1" Grid.Column="1" Content="Delete Task" />
</Grid>
Each control is given a descriptive name and a position within the grid. We must specify both the row and the column, and with the ListBox, we also specify the ColumnSpan since it has to span across both of the grid's columns. Additionally, the two buttons are given some text using the Content attribute.
If you run the application, you should see the controls positioned properly:
However, the two buttons are jammed right up against each other and against the task list. It would be nice if there were some space in between. This can be accomplished using the Margin property that I mentioned earlier. The Margin property can be set using either an attribute or an element, and we can either set a uniform thickness or specify the size of all the margins individually.
Let's first take a look at setting a uniform thickness using an attribute. This only involves adding a Margin attribute to the appropriate control and setting it to a proper thickness (in device-independent pixels, by default):
<Button Name="AddButton" Grid.Row="1" Grid.Column="0" Margin="5" Content="Add Task" />
This would create a margin of five pixels around all of the sides of AddButton. This makes the application look a bit odd, though. Margins only in between the buttons and on top of the buttons will do fine. So, let's set the margin of each side individually. To do this, we need to specify four measurements, separated by commas. The first measurement is the left margin, the second is the top margin, and so forth, in a clockwise motion.
<Button Name="AddButton" Grid.Row="1" Grid.Column="0" Margin="0,3,2,0" Content="Add Task" />
Now AddButton looks right, and we only need to fix DeleteButton. For DeleteButton, let's specify the margin using an element (although you may want to go back and change this in order to maintain consistency). To do this, an element named object.Margin (where “object” is replaced with the name of the actual tag) is used inside of the object's tag. Then, inside of this element, an element named Thickness is created which contains the actual values:
<Button Name="DeleteButton" Grid.Row="1" Grid.Column="1" Content="Delete Task">
<Button.Margin>
<Thickness Left="2" Top="3" />
</Button.Margin>
</Button>
Notice that this method is fairly readable, with the measurements set in appropriately-named attributes (Left and Top here, but Right and Bottom also exist).
Next: Creating the XML data file >>
More Windows Scripting Articles
More By Peyton McCullough
