WPF Date Range Double Slider Control (Introduction)

For a project I’m working on, I needed a way to select a date range.  One of my first thoughts was to use a double slider only to find that one didn’t exist with the OOTB controls so I decided to roll my own.   In order to solidify things in my mind as well as help anyone out there looking for resources on various aspects of development in WPF, I thought I’d write about my experience creating this control.

I’ll be adding blog entries in the next week or two to describe how I accomplished implemenation of some of the features I wanted in my control:

  • Create a two-thumbed slider control to choose a DateTime range. (Part 1)
  • Don’t let the the lower slider or upper slider pass each other.  I was creating this to use with a graph and if the sliders passed each other even for a millisecond, the graph would throw an exception. (Part 2)
  • Dependency Properties  (Part 3)

I did lose some of the functionality of the regular slider in my first version of this control, such as clicking to the right or left of the thumb to change the value and displaying the slider in a vertical format, but overall, I’m happy with this control as it is so far (and so was my client.)

Because I wanted to continue work on this control and make it easy to download and use the code, the source for the control and a sample project are available at CodePlex.

Image Source Converter

Each time I have the need for an image converter for a WPF application, I end up searching the web looking for a sample, so this time, I’m putting a sample somewhere I can find it again easily.  Below is a basic IValueConverter implementation to convert a file name into a BitmapImage located in an images folder.

Code for Sample Project

public class IconImageConverter : IValueConverter
{
    public object Convert(object value, 
                       Type targetType, 
                       object parameter, 
                       System.Globalization.CultureInfo culture)
   {
      // if value isn't null, we can safely do the conversion. 
      if (value != null)
      {
          string imageName = value.ToString();
          Uri uri = new Uri(String.Format("/Images/{0}", imageName), 
                                UriKind.Relative);
          return new BitmapImage(uri);
      }
      return null;
   }
    public object ConvertBack(object value, 
                         Type targetType, 
                         object parameter, 
                         System.Globalization.CultureInfo culture)
    {
       throw new NotImplementedException();
    }
}

Hide Ribbon Bar from Anonymous Users

A quick and simple way to hide the ribbon bar from anonymous users is to add the snippet of code to your Master Page or Page Layout.  When I first discovered this, my response was…”oh….DUH!!”

<asp:LoginView ID="LoginView1" runat="server">
    <AnonymousTemplate>
        <style type="text/css">
            #s4-ribbonrow { display: none; }
        </style>
    </AnonymousTemplate>
</asp:LoginView>

The idea is simple.  Use the ASP.NET LoginView control to add a conditional CSS block that hides the entire blue ribbon row.