#1,040 – An Example of Dependency Property Inheritance

One of the attributes of dependency properties in WPF is that they support inheritance of property values within a tree of user interface elements.  Controls (dependency objects) within the tree that make use of a particular dependency property can set a property value locally or retrieve a value from an element higher up in the tree.  The local value takes precedence over the inherited value and then in turn applies to all elements “further down”.

(There are a number of other places from which a dependency property can get its value).

Below is an example.  FontSize is set to 20 for the top-level Window.  This value is use for lower-level elements unless they set their own value.  The GroupBox sets FontSize to 14, which then applies to it and elements under it.  Within the GroupBox, the second Label sets its own value for FontSize.

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        xmlns:local="clr-namespace:WpfApplication1"
        Title="Dependency Properties" 
        Width="280" Height="252"
        FontSize="20">

    <StackPanel Name="spOuter" 
                Margin="5">
        <Label Name="lbl1" Content="Label 1"/>
        <Label Name="lbl2" Content="Label 2"/>
        <GroupBox Name="gb1" Header="Stuff" FontSize="14">
            <StackPanel Name="spInner" Orientation="Horizontal">
                <Label Name="lbl3" Content="Label 3"/>
                <Label Name="lbl4" Content="Label 4" FontSize="10"/>
            </StackPanel>
        </GroupBox>
        <Button Name="btn1" Content="I'm a Button"
                            Padding="10,5" HorizontalAlignment="Center"
                            Click="btn1_Click"/>
    </StackPanel>
</Window>

1040-001
See this post for another example of dependency property inheritance.

#1,039 – Intercepting Bad Date Strings Entered into a DatePicker

When a user manually enters a date into a DatePicker, the DatePicker control automatically checks to see whether what they entered is a valid date.  If the date is valid, it’s converted to the proper display format and the DatePicker’s SelectedDate property is set.

If the date is not valid, the DatePicker by automatically reverts to the last valid string contained in this field, or to an empty string.

You can react to the user entering an invalid date by handling the DateValidationError event.

For example, if we have a bindable string property ErrorMessage, we can do the following:

        <Label Content="Pick a date:" Margin="5"/>
        <DatePicker Margin="5,0,5,5"
                    DateValidationError="DatePicker_DateValidationError"
                    SelectedDateChanged="DatePicker_SelectedDateChanged"/>
        <TextBlock Margin="5" Text="{Binding ErrorMessage}"
                   Foreground="Red"
                   TextWrapping="Wrap"/>

Code-behind:

        private void DatePicker_DateValidationError(object sender, DatePickerDateValidationErrorEventArgs e)
        {
            ErrorMessage = e.Exception.Message;
        }

        private void DatePicker_SelectedDateChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
        {
            ErrorMessage = "";
        }

1039-001
1039-002

#1,038 – Another Way to Prevent Certain Dates from Being Selected

You can limit the dates available for selection in a Calendar or DatePicker control in a few different ways.

If you want to prohibit some combination of dates, but have to do some calculation to figure out which dates should be prohibited, you can add a handler for the SelectedDateChanged event.

        <Label Content="Pick a day to go skydiving:"
               Margin="5"/>
        <DatePicker Margin="5,0,5,5"
                    SelectedDateChanged="DatePicker_SelectedDateChanged" />

In the handler, if the selected date is not one that you allow, you can undo the fact that it was selected.

        private void DatePicker_SelectedDateChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
        {
            if (e.AddedItems.Count > 0)
            {
                DateTime dayToDive = (DateTime)e.AddedItems[0];
                if ((dayToDive.DayOfWeek == DayOfWeek.Friday) &&
                    (dayToDive.Day == 13))
                {
                    MessageBox.Show("Dude, that's really an unlucky day to go skydiving.");
                    ((DatePicker)sender).SelectedDate = null;
                }
            }
        }

If we pick a Friday the 13th, the application warns us and then unselects the date.
1038-001

 

1038-002

#1,037 – Entering Text Manually into a DatePicker

When using a DatePicker control, you can either use the dropdown calendar to select a date or you can manually enter a date in the text area.

1037-001

 

When the DatePicker converts the string that you enter into a date, it uses the DateTime.Parse method, which in turn uses the valid date/time formats for your current culture to convert from a string to a date.

For example, if you set the SelectedDateFormat to Long (so that the long form of the date is displayed) and then enter “1/10/13” when in the U.S., the date is interpreted as January 10, 2013.  This is because the normal short date format is month/day/year.  (Note that SelectedDateFormat only dictates how the date is displayed–you can still enter it using the short format).

1037-002

 

However, if you enter “1/10/13” and your regional settings are set to French/France, the date will be interpreted as October 1, 2013.  This is because the short date format in France is day/month/year.

1037-003

#1,036 – Date Formats in the DatePicker Control

You can set the format of the date displayed in the text area of a DatePicker by setting the SelectedDateFormat property to either Short or Long.  These formats correspond to the “short date” and “long date” formats associated with the current culture.  You can see these format strings in the Region dialog.  For example, for English/U.S. they are:

  • Short – “M/d/yyyy” 
  • Long – “dddd, MMMM d, yyyy” 

Where

  • M = Month, 1-12
  • d = Day of month, 1-31
  • yyyy = 4-digit year
  • dddd = Day of week, full name
  • MMMM = Month, full name

1036-001

So, for English/U.S., if we select March 18, 2014 as the date, we see the date displayed as one of the following strings:

  • Short – “3/18/2014”
  • Long – “Tuesday, March 18, 2014”

1036-002

 

 

 

#1,035 – DatePicker Basics

The DatePicker is a control that operates like the Calendar control, allowing the user to select a date, but does so in a dropdown calendar that appears when the user clicks on a calendar icon in the control.  Unlike the Calendar control, the DatePicker allows selecting only a single date.

    <StackPanel>
        <Label Content="Calendar:"/>
        <Calendar />

        <Label Content="DatePicker:" Margin="0,10,0,0"/>
        <DatePicker Margin="5,0"/>
    </StackPanel>

The DatePicker looks a bit like a TextBox, with an area to enter some text and a calendar icon to the right.

1035-001

If you click on the calendar icon in the DatePicker, a calendar appears as a popup, allowing selection of a date.

1035-002

Once you select a date, the date is then displayed in the text area.

1035-003

You can also type a date manually into the text area of the DatePicker.

1035-004

#1,034 – Limiting the Range of Selectable Dates in a Calendar

The Calendar control allows selecting one or more dates.  By default, the user is allowed to select dates within the range DateTime.MinValue (1/1/0001) to DateTime.MaxValue (12/31/9999).

If you want to restrict the user to dates within a more reasonable range, you can set the DisplayDateStart and DisplayDateEnd properties.  The Calendar will then be limited to dates within that range.

        <Label Content="Pick your favorite day from the 1980s:"/>
        <Calendar DisplayDateStart="1/1/1980"
                  DisplayDateEnd="12/31/1989"/>

1034-001
1034-002

These properties also work in the DatePicker control, to limit the dates that can be selected.