WPF Data Templates Part 5 – Editing data in a Data Template and Switching a template on a Single item programmatically

Please follow and share!

The beauty of WPF is that it contains the ability to provide the user enhanced usability along with enhanced user experience. Too often today, you see applications that sport “admin” functions, which are functions for things like maintaining values that should be displayed in a list box, or data that is used to associate two entities [for instance, a bank account can have more than one contact person associated]. In the typical application, you see an “admin” or “maintenance” section where these entries and associations are made.

Think a moment now on the user experience, user A accesses the application, moves on to a data entry form, gets two-thirds of the way through the form and realizes that a value is missing from a drop down list. This user must now stop everything they are doing on this form, then move to a separate part of the application, make their entry, initiate some type of refresh, then continue on with their work. What is up with that? The experience of user A is less to be desired. Why make the user go to a completely different section of the application and split up their train of thought from the process at hand? Ultimately, a user should not have to move away from their current work to accomplish something like this, they should be able to edit/add items to a list on the fly, and from within the form that they are currently working. This is where Data Templates come in to play.

WPF Data Templates provide the ability for you to define a template that can be used to add/edit a list item. In this example, we’re going to pull in the image favorites data, and provide the ability to edit the properties of an Image directly from within the list box with the help of a data template. This example is going to use SQL Express database and LINQ to SQL to pull and update the data associated with the Image Favorite.

In order for any changes to the images to be tracked, I created an ObservableCollection class that simply returns all data from the ImageFavorite table. This is used to populate the ItemSource of the List Box. This class is defined as follows:

public class ObservableFavorites : ObservableCollection<DataGoo.ImageFavorite> 
{ 
    public ObservableFavorites(DataGoo.GooDataContext ctx) 
    { 
        foreach (ImageFavorite fav in ctx.ImageFavorites) 
        { 
            this.Add(fav); 
        } 
    } 
}

In the code-behind of the window, I instantiated an instance of the data context (DataGoo is simply the project containing my database and LINQ to SQL dbml). Code to initiate the population of the list box is as follows [where lbFavorites is the list box]:

private static DataGoo.GooDataContext _dc = new DataGoo.GooDataContext(); 
private ObservableFavorites _favorites; 
   
public Window1() 
{ 
    InitializeComponent(); 
    PopulateList(); 
} 
   
private void PopulateList() 
{ 
    _favorites = new ObservableFavorites(_dc); 
    this.lbFavorites.ItemsSource = _favorites; 
}

I have defined two data templates for use with the list box that displays the Image Favorite data. The first template “DetailedTemplate” is the default view of the data, it contains a button that is used to switch the item from a display to an edit view. The XAML for this is defined in Window.Resources.

<DataTemplate x:Key="DetailedTemplate"> 
        <Border BorderBrush="Blue" Margin="3" Padding="3" BorderThickness="2" CornerRadius="5" Background="Beige"> 
            <StackPanel Orientation="Horizontal"> 
                <Image Margin="10" Width="250" Height="200" Stretch="Fill" Source="{Binding Path=ImageHref}"> 
                    <Image.BitmapEffect> 
                        <DropShadowBitmapEffect /> 
                    </Image.BitmapEffect> 
                </Image> 
                <StackPanel Orientation="Vertical" VerticalAlignment="Center"> 
                     
                    <TextBlock FontSize="25" Foreground="Goldenrod" Text="{Binding Path=ImageName}" /> 
                     
                    <StackPanel Orientation="Horizontal"> 
                        <Label Content="{Binding Converter={StaticResource RatingConverter}}" Width="300" /> 
                        <Button Height="50" Width="50" Click="btnEdit_Click"  
                                CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBoxItem}}}"> 
                            <Image Source="images/processIcon.png" /> 
                        </Button> 
                        <Label Content="" /> 
                    </StackPanel> 
                </StackPanel> 
            </StackPanel> 
        </Border> 
    </DataTemplate>

The command parameter is set to the ListBoxItem that contains the button being pressed, this is accomplished through the binding statement: {Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBoxItem}}} … this binding statement essentially walks up the current XAML tree from the button up to the first element that is of type ListBoxItem, thus returning the List Box Item whose edit button was clicked. The click event of the button is then handled by the following method:

private void btnEdit_Click(object sender, RoutedEventArgs e) 
{ 
    Button btn = (Button)sender; 
    //command contains the list item 
    ListBoxItem itm = (ListBoxItem)btn.CommandParameter; 
    itm.ContentTemplate = this.FindResource("EditTemplate") as DataTemplate; 
}

In order to switch the Data Template on only a single item in the list box, we need to assign the new template to the ContentTemplate property of the list item, which is the data template defined in resources as “EditTemplate”. The EditTemplate provides the user the ability to update the image name and image rating, is defined in XAML in Window.Resources as:

<DataTemplate x:Key="EditTemplate"> 
    <Border BorderBrush="Blue" Margin="3" Padding="3" BorderThickness="2" CornerRadius="5" Background="Beige"> 
        <StackPanel Orientation="Horizontal"> 
            <Image Margin="10" Width="250" Height="200" Stretch="Fill" Source="{Binding Path=ImageHref}"> 
                <Image.BitmapEffect> 
                    <DropShadowBitmapEffect /> 
                </Image.BitmapEffect> 
            </Image> 
            <StackPanel Orientation="Vertical" VerticalAlignment="Center"> 
                <TextBox Width="300" FontSize="25" Foreground="Goldenrod" Text="{Binding Path=ImageName}" /> 
                <TextBox Width="50" FontSize="25" Foreground="Blue" Text="{Binding Path=ImageRating}" HorizontalAlignment="Left" /> 
                <Button Content="Save" Click="btnSave_Click" Width="40" HorizontalAlignment="Left" 
                        CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBoxItem}}}"/> 
            </StackPanel> 
        </StackPanel> 
    </Border> 
</DataTemplate>

A Save button is included in the Edit Data Template to trigger the saving of the data and then switching the template of the list item from the Edit template back to the Detailed template. It uses the same binding for the Command Parameter to latch on to the list box item element that contains the button being clicked. The click event handler for the save button is as follows:

private void btnSave_Click(object sender, RoutedEventArgs e) 
{ 
    //commit the changes to the database 
    _dc.SubmitChanges();    
   
    //switch item template 
    Button btn = (Button)sender; 
    //command contains the list item 
    ListBoxItem itm = (ListBoxItem)btn.CommandParameter; 
    itm.ContentTemplate = this.FindResource("DetailedTemplate") as DataTemplate; 
    
}