Data Converstion and Task Addition with WPF - Adding Tasks
(Page 3 of 4 )
We now need to create a way to add tasks to the list. The easiest way to do this is to create an "Add Task" dialog that's shown when the user clicks the "Add Task" button. The dialog will prompt the user for the required information (title, priority and description), and when the "Okay" button is clicked, the new task will be added to the list.
The dialog will require a new window. Add a new Window (WPF) to the project called AddTaskDialog.xaml. Visual Studio will then create the basic XAML for the window. The default height of the new window is too big for our needs, so we'll need to decrease it a bit. The title should also be changed to something more appropriate:
<Window x:Class="WpfToDo.AddTaskDialog"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Add Task" Height="250" Width="300">
Next, the dialog needs some controls. For the title, a TextBox control will do; for the priority, a ComboBox control will do; and for the description, a TextBox control with wrapping will do. These input controls will need labels. Two buttons will also be necessary, an "Okay" button and a "Cancel" button.
It's best that the controls be organized into a grid of five rows and three columns in order to achieve a look like this (the grid lines are shown by setting the ShowGridLines attribute of Grid to True):
I'll go ahead and place all the required XAML below. Most of it should be familiar to you, and so I'll only explain a few parts in bold:
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="100" />
<RowDefinition Height="25" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="75" />
<ColumnDefinition Width="75" />
<ColumnDefinition Width="125" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Content="Title:" />
<TextBox Name="TaskTitle" Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2" />
<Label Grid.Row="1" Grid.Column="0" Content="Priority:" Margin="0,3,0,0" />
<ComboBox Name="TaskPriority" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" SelectedIndex="0" Margin="0,3,0,0">
<ComboBoxItem Foreground="Green">Low</ComboBoxItem>
<ComboBoxItem Foreground="Orange">Medium</ComboBoxItem>
<ComboBoxItem Foreground="Red">High</ComboBoxItem>
</ComboBox>
<Label Grid.Row="2" Grid.Column="0" Content="Description:" Margin="0,3,0,0" />
<TextBox Name="TaskDescription" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3" TextWrapping="Wrap" Margin="0,3,0,0" />
<Button Name="OkayButton" Grid.Row="4" Grid.Column="0" Content="Okay" Margin="0,3,2,0" />
<Button Name="CancelButton" Grid.Row="4" Grid.Column="1" IsCancel="True" Content="Cancel" Margin="2,3,0,0" />
</Grid>
The ComboBox control is pretty simple to understand, but it's nonetheless new and merits being pointed out. Notice how the priorities are colored as they are in the task list itself.
In order to wrap text in the description TextBox, the TextWrapping attribute is set to Wrap.
The IsCancel attribute of the cancel button is set to True. This way, if the user presses escape, the button will automatically be "clicked."
Next, the dialog needs to respond to the okay button being clicked. If the button is clicked, then the window's DialogResult property must be set to true. This will close the dialog and return true (as described below). Either double click the button in the designer or add an event handler through XAML:
<Button Name="OkayButton" Grid.Row="4" Grid.Column="0" Content="Okay" Margin="0,3,2,0" Click="OkayButton_Click" />
The event handler operates exactly as described above:
private void OkayButton_Click(object sender, RoutedEventArgs e)
{
DialogResult = true;
}
Next: Adding Tasks, Continued >>
More Windows Scripting Articles
More By Peyton McCullough
