Sep 232012
 
 September 23, 2012  Posted by at 9:01 am Telerik, WinRT Tagged with: ,  Add comments

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 😛 , see? I’m still learning new stuff :D)

Editing field

Editing field


windows store app step by step

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”]
<StackPanel Grid.Column="1" >
<Button x:Name="Add" Height="75" HorizontalAlignment="Stretch" VerticalAlignment="Top" Background="#95A810" Margin="20,0,20,0" BorderBrush="{x:Null}" Click="Add_Click">Add / Edit</Button>
<Button x:Name="Delete" Height="75" HorizontalAlignment="Stretch" VerticalAlignment="Top" Background="#95A810" Margin="20,0,20,0" BorderBrush="{x:Null}">Delete</Button>
</StackPanel>
[/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”]
<Border x:Name="EditAdd" Visibility="Collapsed" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="2" Background="#004FC6" Padding="20">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<TextBlock Text="Title" Style="{StaticResource TitleTextStyle}"/>
<TextBox Margin="0,10,0,0" Grid.Row="1" Text="{Binding SelectedItem.Title, ElementName=itemListView}"/>
<TextBlock Margin="0,10,0,0" Text="Category" Grid.Row="2" Style="{StaticResource TitleTextStyle}"/>
<ComboBox Margin="0,10,0,0" Grid.Row="3" Grid.ColumnSpan="2" x:Name="categoriesListBox" SelectedItem="{Binding Path=SelectedItem.CategoryName, ElementName=itemListView}"/>
<TextBlock Text="Comment" Grid.Row="4" Style="{StaticResource TitleTextStyle}"/>
<TextBox Margin="0,10,0,0" Grid.Row="5" Text="{Binding SelectedItem.Comment, ElementName=itemListView}" Height="100" TextWrapping="Wrap"/>
<Grid Grid.Row="6" Margin="0,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button Content="Add" HorizontalAlignment="Stretch" Background="#95A810"/>
<Button Grid.Column="1" Content="Update" HorizontalAlignment="Stretch" Background="#95A810"/>
<Button Grid.Column="2" Content="Cancel" HorizontalAlignment="Stretch" Background="#95A810"/>
</Grid>
</Grid>
</Border>
[/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.

  2 Responses to “WinRT app guide: Step 9: Adding the editing field”

  1. […] Windows 8 app to the store that will help speed your apps being accepted and published…”WinRT app guide: Step 9: Adding the editing field (Iris Classon)“Now lets add our editing field! In our drawing we had a popup dialog, but […]

  2. […] WinRT app guide: Step 9: Adding the editing field (Iris Classon) […]

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)

What is 14 + 11 ?
Please leave these two fields as-is:
IMPORTANT! To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)