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.
XAML
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:viblend="clr-namespace:VIBlend.WPF.Controls;assembly=VIBlendWPFEditors"
xmlns:local="clr-namespace:WpfApplication1"
Title="MainWindow" Height="200" Width="300">
<Grid x:Name="LayoutRoot" Height="200" Width="300">
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<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" />
</Grid>
</Window>
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
{
get
{
return this.dateTime;
}
set
{
this.dateTime = value;
this.OnPropertyChanged("DateTimeValue");
}
}
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.
Subscribe