Home Products Downloads Purchase Support Forum About Blog

VIBlend WPF DateTimeEditor and Data binding

by viblend 5. June 2010 08:58

This blog post illustrates how you can use the VIBlend WPF DateTimeEditor control in data binding scenarios.

The following is a complete sample, ready to run once you have copied it to your project.

At first, create a new WPF application and add a reference to the VIBlendWPFEditors.dll. Then add a new DateTimeEditor and ListBox controls in your application’s window. After that, bind the DateTimeEditor’s Value as well as the ListBox’s SelectedValue to a property named DateTimeValue.

<Window x:Class="WpfApplication1.MainWindow"
        Title="MainWindow" Height="200" Width="300">
    <Grid x:Name="LayoutRoot" Height="200" Width="300">
            <RowDefinition Height="30"></RowDefinition>
        <viblend:DateTimeEditor Grid.Row="1" Value="{Binding DateTimeValue, Mode=TwoWay}" VerticalAlignment="Top" HorizontalAlignment="Left" Width="100" Height="20"></viblend:DateTimeEditor>
         <ListBox Grid.Column="1" Grid.Row="1" SelectedValue="{Binding DateTimeValue, Mode=TwoWay}" Height="110" HorizontalAlignment="Left"  Name="listBox1" VerticalAlignment="Top" Width="130"/>
        <Label Content="DateTime Items" Grid.Column="1" Height="28" HorizontalAlignment="Left" Name="label1" VerticalAlignment="Top" />
        <Label Content="DateTime Editor" Height="28" HorizontalAlignment="Left" Name="label2" VerticalAlignment="Top" />

The next step is to create a class which defines the DateTimeValue property.    

        public class DataBindingData : INotifyPropertyChanged
            private DateTime dateTime = new DateTime(2010, 06, 06);
            public DataBindingData()

            public DateTime DateTimeValue
                    return this.dateTime;
                    this.dateTime = value;

            public event PropertyChangedEventHandler PropertyChanged;
            protected virtual void OnPropertyChanged(string name)
                if (this.PropertyChanged != null)
                    this.PropertyChanged(this, new PropertyChangedEventArgs(name));

The final step is to fill the ListBox with DateTime items and to set the DataContext property of the LayoutRoot object. This is implemented in the MainWindow’s constructor, after the InitializeComponent call.           

            this.LayoutRoot.DataContext = new DataBindingData();
            List<DateTime> dateTimeList = new List<DateTime>();
            dateTimeList.Add(new DateTime(2010, 06, 06));
            dateTimeList.Add(new DateTime(2010, 06, 07));
            dateTimeList.Add(new DateTime(2010, 06, 08));
            dateTimeList.Add(new DateTime(2010, 06, 09));
            dateTimeList.Add(new DateTime(2010, 06, 10));
            this.listBox1.ItemsSource = dateTimeList;

The image below represents our sample’s main window. When you select a value from the ListBox, the DateTimeEditor’s Value will be changed and vice versa.

About the author

Some text that describes me

Tag cloud

Recent comments

Comment RSS
Copyright © 2011 VIBlend  
Terms of Use | Privacy Policy
WinForms Controls Purchase Online About Us
DataGrid Navigation Pane Technical Support Blog
ScrollBar TreeView
ListBox ProgressBar Downloads Register
ComboBox Buttons
TabControl Editors Documentation Client Login

VIBlend Blog is powered by BlogEngine.NET