Derik Whittaker

Syndication

News


How to Show a deleted List Item with a Strike Through in XAML

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.

image

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

image

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

    image

    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,


Posted 01-08-2012 7:12 AM by Derik Whittaker
Filed under: ,

[Advertisement]

Comments

James Manning wrote re: How to Show a deleted List Item with a Strike Through in XAML
on 01-08-2012 10:27 AM

Very nice!

Kind of a silly question (I think) but if/when the user clicks 'Save', the row(s) with the strikethrough disappear from the grid?  And if they click 'Cancel' the strikethrough goes away as things 'reset' back to the existing state?

Also, is there (or will there be) a 'part 2' showing the 'pending inserts' the way this shows 'pending deletes'? :)

Couple tiny things viewing this post (at least in Chrome)

- the screen shows cut off on the right side (at least with my width) - see http://i.imgur.com/52RzG.png

- the 'Deleted' property code snippet seems to include a <br> tag for some reason? - see http://i.imgur.com/q1O1x.png

Thanks for a great post, and don't go so long between posts!  No excuses about the holidays, either! :)

Community Blogs wrote Windows Dev News for January 09, 2011 - #0023
on 01-12-2012 2:58 PM

Windows Dev News for January 09, 2011 - #0023 [SC1199] In This Issue: Jose Fajardo , Rudi Grobler , XAMLGeek

About The CodeBetter.Com Blog Network
CodeBetter.Com FAQ

Our Mission

Advertisers should contact Brendan

Subscribe
Google Reader or Homepage

del.icio.us CodeBetter.com Latest Items
Add to My Yahoo!
Subscribe with Bloglines
Subscribe in NewsGator Online
Subscribe with myFeedster
Add to My AOL
Furl CodeBetter.com Latest Items
Subscribe in Rojo

Member Projects
DimeCasts.Net - Derik Whittaker

Friends of Devlicio.us
Red-Gate Tools For SQL and .NET

NDepend

SlickEdit
 
SmartInspect .NET Logging
NGEDIT: ViEmu and Codekana
LiteAccounting.Com
DevExpress
Fixx
NHibernate Profiler
Unfuddle
Balsamiq Mockups
Scrumy
JetBrains - ReSharper
Umbraco
NServiceBus
RavenDb
Web Sequence Diagrams
Ducksboard<-- NEW Friend!

 



Site Copyright © 2007 CodeBetter.Com
Content Copyright Individual Bloggers

 

Community Server (Commercial Edition)