2

I have a field in my UI that can either take a date or a string.

I would like to switch on the type of control displayed depending on the data that is loaded in there or being input by the user.

In other words:

  • DatePicker if the user starts inputting some numbers (or data loaded is a date)
  • TextBox is a string input (or string loaded)

Can't find yet how to switch. Happy if you had some tip. Thank you!

3
  • 3
    This might be off topic but I am curious... is it clear to your user that they can do this thing? It sounds a little bit like a usability nightmare where a user can start inputting a date in their desired format (i.e 29/08/2014) but because this isn't recognised by your date format it is perceived as a string. At the very least I recommend just using a radio button to decide input format
    – Sayse
    Aug 29, 2014 at 6:52
  • Hi, yes this is a very valid question. I am trying to put this together to have the minimum clicks on the interface. Hoping that showing first the date picker to the user will drive him to do both. Will see if this is working with them, if not will just do a radio button as suggested
    – goul
    Aug 29, 2014 at 7:01
  • 1
    By setting the default entry method as a date picker, you are not introducing any extra clicking to the user. For the most part, a user wouldn't mind a couple extra clicks to provide them with a method that is more suitable to them (of course I don't have evidence for this, that is where user testing comes into play)
    – Sayse
    Aug 29, 2014 at 7:04

1 Answer 1

2

You would need to use templates depending on a type. To do this you would need either have 2 properties , one with type of a property and another with the actial object (both notifying INotifyPropertyChanged ).

    public object YourProperty
    {
        get
        {
            return yourProperty;
        }
        set
        {
            yourProperty = value;
            OnPropertyChanged();
            DateTime date;
            if(yourProperty is String && DateTime.TryParse((string) yourProperty, out date))
            {
                YourProperty = date;
            }
        }
    }
    private object yourProperty = string.Empty;
//public Type YourPropertyType { get; set; }

You also can create a converter which will return the type of a property, so you can get rid of additional property (commented out above):

public class TypeOfConverter : MarkupExtension, IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        return (value == null) ? null : value.GetType();
    }

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

    public override object ProvideValue(IServiceProvider serviceProvider)
    {
        return this;
    }
}

And finally bind a ContentControl to your property and select a template using the converter above:

            <ContentControl Content="{Binding YourProperty, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
                <ContentControl.Resources>
                    <Style TargetType="ContentControl">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding Path=YourProperty,Converter={flowMathTest:TypeOfConverter}}" Value="{x:Type system:DateTime}">
                                <Setter Property="ContentTemplate">
                                    <Setter.Value>
                                        <DataTemplate>
                                            <DatePicker SelectedDate="{Binding Content, RelativeSource={RelativeSource AncestorType=ContentControl}, UpdateSourceTrigger=PropertyChanged}"/>
                                        </DataTemplate>
                                    </Setter.Value>
                                </Setter>
                            </DataTrigger>
                            <DataTrigger Binding="{Binding Path=YourProperty,Converter={flowMathTest:TypeOfConverter}}" Value="{x:Type system:String}">
                                <Setter Property="ContentTemplate">
                                    <Setter.Value>
                                        <DataTemplate>
                                            <TextBox Text="{Binding Content, RelativeSource={RelativeSource AncestorType=ContentControl}, UpdateSourceTrigger=PropertyChanged}"/>
                                        </DataTemplate>
                                    </Setter.Value>
                                </Setter>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </ContentControl.Resources>
            </ContentControl>

Thant should do it.

EDIT: I did not read the second part so the switching between controls should happen as user writes.

What you can do in this case is to change bindings to Mode=TwoWay and UpdateSourceTrigger=PropertyChanged and handle detection of type in code.

By default set YourProperty to string.Empty. Then on every change check if the text entered is already date using DateTime.Parse. If it is, set YourProperty to this date.

So I updated the code above to reflect these changes.

1
  • Hi too, Thanks a lot for your answer, really appreciated. Not yet voting as being the correct one as I need to test it and taking me a bit of time. Will revert soon. Cheers
    – goul
    Sep 2, 2014 at 2:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.