When building applications it is very common to have a set of screens which are basically list/edit screens.  And when having these list/edit screens it is also common to allow users to delete a row.  In this post I am going to show how you can add a neat little UI wrinkle to your deleting action which will be visually appealing but will also allow users to undo their changes with ease.

If you take a look at the screen shot below you will notice that I have a data grid with 2 line items.  You should also notice that at the far right of each row is a ‘Red X’ which can be used to delete that selected row.  Commonly when you have this type of delete action the row will be removed from the UI in real time.  Having the row removed in real time is ok but it does give the user an easy way to undo their actions prior to committing their changes.  What I would like to do is change this.

In the screen shot below you can see how we have accomplished the ability to mark a row as being deleted yet still give the user the ability to undo a given deletion.  What we have done is 2 things.

1. In place of actually removing the row from the grid we implemented the strike through to show the user that row will be removed when the save their changes.
2. We removed the delete icon and replaced it with the add icon

Since we know what we want to accomplish how do we actually do it.

1. Setting up your model to have Deleted bool property
   In order for this whole thing to work you will need to have some sort of bool property on your underlying model which stored the Deleted state of a given row.
   
   

   	private bool _deleted;
           public bool Deleted
           {
               get
               {
                   return _deleted;
               }
               set
               {
                   _deleted = value;
   
                   OnPropertyChanged(() => Deleted);
               }
           }
   

2. Setting up your XAML to have the strike through
   In my XAML we are using the stock DataGrid for Silverlight and we are templating each column in the grid.  For the columns which we want to implement the strike though we need to add some xaml which will only be visible WHEN Deleted flag of the given row is true.  Here is snapshot of our XAML
   
   
   
   Things to pay attention to in the above XAML are
   1) We have both a TextBlock and a Rectangle element in our cell, however the Rectangle’s visibility is being set based on the Deleted flag.  To set this visibility we are using a BooleanToVisiblity converter (will put that code at the end of this post)
   2) In the above case the margin on the Rectangle is Margin=”4,0,0,0” and this is because it is far left column in our grid and we don’t want the line to butt up against the edge.  In the middle columns we don’t want a margin in order to appear to be a complete line.  However in our far right column we want to setup the margin as Margin=”0,0,4,0” in order to not butt up against the right hand edge.
   
   
3. Setting up your XAML to swap action buttons based on the deleted state
   To enable the swapping of our buttons based on the Deleted flag we basically will do the same as above w/ the strike through lines but in place of the visibility being swapped on a Rectangle we will do it on a Button element.

BoolenToVisibilityConverter Code

	public class BooleanToVisibilityConverter : IValueConverter
	{
        public Visibility TrueValue { get; set; }
        public Visibility FalseValue { get; set; }

        public BooleanToVisibilityConverter()
        {
            TrueValue = Visibility.Visible;
            FalseValue = Visibility.Collapsed;
        }

		public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
		{
            if (value == null)
            {
                return Visibility.Collapsed;
            }

			return ((bool) value) ? TrueValue : FalseValue;
		}

		public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
		{
			throw new NotImplementedException();
		}
	}

As you can see you can implement a slick UI which shows the user an item has been deleted with very little effort.

Till next time,