WinRT app guide: Step 9: Adding the editing field

To read the other steps in the step by step guide for creating a Metr0/ WInRT application go here

Now lets add our editing field! In our drawing we had a popup dialog, but I’ve been thinking about it, and since we have quite a few fields to edit/fill in it wouldnt be appropriate and it would not follow the guidelines. We will instead replace the chart temporarly for the editing. (hm, this is probably what I should have used for my Windows Store App :P , see? I’m still learning new stuff :D)

Editing field

when not editing

Add one more button and wrap them in a stackpanel, set the stackpanel to column one and remove the column attributes on the buttons. The buttons should be named Add/Edit and Delete, and set the Text/Content to the same.

[sourcecode language=“XML”]

Add / Edit
Delete

[/sourcecode]

Lets create the editing field. We will bind the editing fields etc. to the selected item in the listview, this is quite neat, as we don’t have to add more code in the code behind. (Comment: we are using code behind so everybody can follow, but we will refactor to MVVM later on).
Add this:

[sourcecode language=“XML”]

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

[/sourcecode]

In the codebehind file we need to set the itemssource for the listbox, we will temporarly base that on the Activities, but when we hook up a storage we will use the repositories appropriatly.

[sourcecode language=“csharp”]
void SetCategories()
{
categoriesListBox.ItemsSource = new StudyActivityRepository(CreateActivities()).GetAll().GroupBy(x => x.CategoryName).Select(g => g.First().CategoryName);
}
[/sourcecode]

To handle the show and hide we will simply add a click event and handle the visibility of the flipview and the editing field like so:
[sourcecode language=“csharp”]
private void Add_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
EditAdd.Visibility = Visibility.Visible;
ChartView.Visibility = Visibility.Collapsed;
}
[/sourcecode]

Do the same on the Cancel button but the other way around in regards to visibility.

WinRT app guide: Step 9: Adding the editing field

Comments