I'm writing a small UWP project also using the MVVM pattern (MVVM Light framework) for my studies and encountered a binding issue in numerous scenarios and controls.
I've taken the effort to isolate one of those into mini example project available here.
The IsActive property of ProgressRing control is not reacting on updates from ViewModel side even through it has:
INotifyPropertyChanged implemented
Binding mode explicitly set to TwoWay binding
UpdateSourceTrigger explicitly set to PropertyChanged
MainPage.xaml
<Page
x:Class="TestProgressRing.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:core="using:Microsoft.Xaml.Interactions.Core"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:i="using:Microsoft.Xaml.Interactivity"
xmlns:local="using:TestProgressRing"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
Width="491.282"
Height="492.308"
DataContext="{Binding MainPageViewModel, Source={StaticResource ResourceKey=Locator}}"
mc:Ignorable="d">
<Grid
Width="500"
Height="800"
Margin="0,0,-8.667,-307.667"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="3*" />
</Grid.RowDefinitions>
<Button
Grid.Row="0"
Width="250"
Height="50"
Margin="0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="Boom">
<i:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Click">
<core:InvokeCommandAction Command="{Binding ClickCommand}" />
</core:EventTriggerBehavior>
</i:Interaction.Behaviors>
</Button>
<ProgressRing
Grid.Row="1"
Width="500"
Height="500"
Margin="0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
IsActive="{Binding IsLoading, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
Visibility="Visible" />
</Grid>
</Page>
MainPageViewModel.cs
using GalaSoft.MvvmLight;
using GalaSoft.MvvmLight.Command;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Input;
namespace TestProgressRing
{
public class MainPageViewModel : ViewModelBase
{
private bool _isLoading;
public bool IsLoading
{
get => _isLoading;
set
{
_isLoading = value;
Set(() => IsLoading, ref _isLoading, value);
}
}
public ICommand ClickCommand { get; set; }
public MainPageViewModel()
{
ClickCommand = new RelayCommand(() =>
IsLoading = !IsLoading);
}
}
}
Does the UWP controls just simply doesn't works well with regular Binding instead of x:Bind? There are more issues like that for example CalendarPickerView Date property is also don't want to cooperate.
First, you don't need UpdateSourceTrigger=PropertyChanged, Mode=TwoWay in your binding. It's always going to be source to target (i.e. OneWay).
The real issue is that you shouldn't be setting _isLoading = value; since it's passed in as a ref for checking if property value has been changed or not.
So deleting this line will make your code work. You can even simplify it to
private bool _isLoading;
public bool IsLoading
{
get => _isLoading;
set => Set(ref _isLoading, value);
}
Try changing your binding to:
IsActive="{Binding IsLoading}"
And your property code to:
private bool _isLoading;
public bool IsLoading
{
get {return _isLoading;}
set
{
_isLoading = value;
NotifyOfPropertyChange(nameof(IsLoading));
}
}
I have used implementation of INotifyPropertyChanged from Caliburn.Micro framework, but it can be any other implementation of it that works ;)
Related
in my Shell view XAML
<Grid>
....///
<StackPanel x:Name="SettingsPanelIsVisible" Grid.Row="6" Grid.Column="6" Orientation="Vertical"
VerticalAlignment="Bottom" >
<Button x:Name="Button1" Content="Button 1"/>
<Button x:Name="Button2" Content="Button 2"/>
</StackPanel>
</Grid>
and in my ShellViewModel
....//
public bool SettingsPanelIsVisible { get; set; }
as I understood these should be bound and the visibility should be toggled by caliburn.Micro by setting or resetting the bool, however this is not working, even though the other components are seeming to work fine
hum i just read StackPanel have some convention name, you error is maybe coming from your definition of viewmodel class ( dont see the code):
you have to put in viewmodel: using Caliburn.Micro;
public class ShellViewModel:Screen or PropertyChangedBase
{
private bool _SettingsPanelIsVisible;
public bool SettingsPanelIsVisible
{
get => _SettingsPanelIsVisible;
set
{
_SettingsPanelIsVisible = value;
NotifyOfPropertyChange(() => SettingsPanelIsVisible);
}
}
:
}
this convention is ok with Grid or StackPanel and maybe WrapPanel.....
This question already has answers here:
Issue with DependencyProperty binding
(3 answers)
Binding to custom control inside DataTemplate for ItemsControl
(1 answer)
How to pass data from MainWindow to a User Control that's inside the MainWindow?
(1 answer)
Closed 3 years ago.
I am learning WPF for work and working on a simple Todo List application, and have run into some problems with the Observable List not updating the view.
I am using the MVVM Light framework, and have done a test subscription to the CollectionChanged event which does get fired when I add elements. I am doing multiple views, so in the off chance that I am not in the main UI thread I've added the MVVM Light's DispatcherHelper to ensure it is being invoked on the main thread. I've also tried manually re-triggering the INotifyPropertyChanged by using MVVM Light's RaisePropertyChanged function on the observable list (see the commented out code). To ensure it was not me screwing up the XAML I also changed the ListBox to a DataGrid with the same results.
Here are a list of some of the stack overflow messages I tried and tutorials I've followed trying to get this done:
Observable Collection Not Updating View
Observablecollection not updating list, when an item gets added
WPF MVVM observable collection not updating GUI
Binding to an Observable Collection
Using Mvvm Light
Todo Model Class
namespace WPFTodoList.Models
{
class TodoItem : ObservableObject
{
public String Title { get { return this._title; } set
{
Set(() => this.Title, ref this._title, value);
}
}
public String Description { get { return this._description; } set
{
Set(() => this.Description, ref this._description, value);
}
}
public int Priority { get { return this._priority; } set
{
Set(() => this.Priority, ref this._priority, value);
}
}
public bool Done { get { return this._done; } set
{
Set(() => this._done, ref this._done, value);
}
}
private String _title;
private String _description;
private int _priority;
private bool _done;
}
}
View Model Class
class TodoListAppViewModel : ViewModelBase
{
public ObservableCollection<TodoItem> Todos { get; private set; }
public RelayCommand AddTodoItemCommand { get{ return this._addTodoItemCommand ?? this._BuildAddTodoItemCommand(); } }
private RelayCommand _addTodoItemCommand;
private NavigationService _navService;
private TodoService _todoService;
private IDisposable _addTodoSubscription;
public TodoListAppViewModel(NavigationService nav, TodoService todo)
{
this._navService = nav;
this._todoService = todo;
this.InitViewModel();
}
public TodoListAppViewModel()
{
this._navService = NavigationService.GetInstance();
this._todoService = TodoService.GetInstance();
this.InitViewModel();
}
private void InitViewModel()
{
this.Todos = new ObservableCollection<TodoItem>();
this.Todos.CollectionChanged += this.CollectionChanged;
this._addTodoSubscription = this._todoService.AddTodoItem.Subscribe((value) =>
{
/*this.Todos.Add(value);
RaisePropertyChanged(() => this.Todos);*/
DispatcherHelper.CheckBeginInvokeOnUI(() => this.Todos.Add(value));
});
}
private RelayCommand _BuildAddTodoItemCommand()
{
this._addTodoItemCommand = new RelayCommand( () => this._navService.NavigateTo("addEdit"));
return this._addTodoItemCommand;
}
private void CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
{
Console.WriteLine(e.Action.ToString());
}
~TodoListAppViewModel()
{
this._addTodoSubscription.Dispose();
}
}
}
View XAML
<UserControl x:Class="WPFTodoList.Views.TodoListAppView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:WPFTodoList.Views"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<UserControl.Resources>
<DataTemplate x:Key="TodoItemTemplate">
<Label Content="{Binding Title}"/>
</DataTemplate>
</UserControl.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="8*" MaxHeight="180px"/>
<RowDefinition Height="16*"/>
</Grid.RowDefinitions>
<StackPanel Margin="24,-20,0,0" VerticalAlignment="Center" HorizontalAlignment="Left" Panel.ZIndex="5">
<Label Content="Your" Foreground="White" FontSize="16" />
<Label Content="Todo List" Foreground="White" FontSize="24" Margin="0,-15,0,0" />
</StackPanel>
<Rectangle HorizontalAlignment="Stretch" VerticalAlignment="Stretch" RenderTransformOrigin="0.5,0.5">
<Rectangle.Fill>
<RadialGradientBrush GradientOrigin="0.2,0.1" RadiusX="1" RadiusY="1" SpreadMethod="Reflect" MappingMode="RelativeToBoundingBox" Center="0.1,0.1">
<GradientStop Color="#FF5B447C" Offset="0.329"/>
<GradientStop Color="#FF1D1F5A" Offset="1"/>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle Fill="#3FFFFFFF" VerticalAlignment="Bottom" Height="40" Panel.ZIndex="5"/>
<StackPanel Panel.ZIndex="10" Height="40" HorizontalAlignment="Right" VerticalAlignment="Bottom" Orientation="Horizontal">
<Button Background="Transparent" BorderBrush="Transparent" HorizontalAlignment="Right" Command="{Binding AddTodoItemCommand}" BorderThickness="0,0,0,0" SnapsToDevicePixels="True" >
<Button.ToolTip>
<Label Content="Add A Todo Item"/>
</Button.ToolTip>
<Image Source="../Resources/add.png" HorizontalAlignment="Right" />
</Button>
</StackPanel>
<ListBox Grid.Row="1" ItemsSource="{Binding Todos}" ItemTemplate="{DynamicResource TodoItemTemplate}"/>
</Grid>
</UserControl>
View Code Back
public partial class TodoListAppView : UserControl
{
public TodoListAppView()
{
InitializeComponent();
TodoListAppViewModel vm = new TodoListAppViewModel();
this.DataContext = vm;
}
}
To simulate the todo without another 4-6 files I used a RX.net subject to relay the todo item from the other view to the list view (I can post code if requested).
As for how the window displays the views here is the root xaml
<Window x:Class="WPFTodoList.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WPFTodoList"
mc:Ignorable="d"
xmlns:views="clr-namespace:WPFTodoList.Views"
xmlns:viewModels="clr-namespace:WPFTodoList.ViewModels"
Title="MainWindow" Height="600" Width="300">
<Window.Resources>
<DataTemplate x:Name="AddEditPage" DataType="{x:Type viewModels:AddEditTodoViewModel}">
<views:AddEditTodoView DataContext="{Binding}"/>
</DataTemplate>
<DataTemplate x:Name="TodoListApp" DataType="{x:Type viewModels:TodoListAppViewModel}">
<views:TodoListAppView DataContext="{Binding}"/>
</DataTemplate>
</Window.Resources>
<Grid>
<ContentControl Content="{Binding ActivePage}"/>
</Grid>
</Window>
ActivePage is then bound to an instance of TodoListAppViewModel
The expected behavior is when the subscription to the TodoService.AddTodoItem subscription is fired, the provided instance of a TodoListItem passed to the lambda should be added to the observable Todos list. The list in turn should update the view. Right now I am seeing the CollectionChanged event being fired inside of TodoListAppViewModel, however the view does not update.
I have created a very simple user control, an ImageButton
<UserControl x:Class="SampleApp.Controls.ImageButton"
Name="ImageButtonControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
d:DesignHeight="300"
d:DesignWidth="300"
mc:Ignorable="d">
<Button>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="6*" />
<RowDefinition Height="2*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<Image Grid.Row="1" Source="{Binding ElementName=ImageButtonControl, Path=Image}" VerticalAlignment="Stretch" HorizontalAlignment="Center" />
<TextBlock Grid.Row="2" Text="{Binding ElementName=ImageButtonControl, Path=Text}" VerticalAlignment="Stretch" HorizontalAlignment="Center" />
</Grid>
</Button>
</UserControl>
With code behind:
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
namespace SampleApp.Controls
{
/// <summary>
/// Interaction logic for ImageButton.xaml
/// </summary>
public partial class ImageButton : UserControl
{
public ImageButton()
{
InitializeComponent();
}
public string Text
{
get { return (string)GetValue(TextProperty); }
set { SetValue(TextProperty, value); }
}
public static readonly DependencyProperty TextProperty =
DependencyProperty.Register("Text", typeof(string), typeof(ImageButton), new UIPropertyMetadata(""));
public ImageSource Image
{
get { return (ImageSource)GetValue(ImageProperty); }
set { SetValue(ImageProperty, value); }
}
public static readonly DependencyProperty ImageProperty =
DependencyProperty.Register("Image", typeof(ImageSource), typeof(ImageButton), new UIPropertyMetadata(null));
}
}
Now I want to use that in my little sample application like
xmlns:controls="clr-namespace:SampleApp.Controls"
<controls:ImageButton Grid.Row="1"
Grid.Column="1"
Margin="2"
Image="/Images/link.png"
Text="DoSomething">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<cal:ActionMessage MethodName="DoSomething" />
</i:EventTrigger>
</i:Interaction.Triggers>
</controls:ImageButton>
If I give it a x:Name, like
<controls:ImageButton x:Name="DoSomething"
e.g. DoSomething the method DoSomething with that name is directly called when the view is shown, i.e. when I active the viewmodel that contains that button, just like I click the Button (if it was a normal button and not a usercontrol, it would work that way), but the button-click handler is never called on clicking.
Now I tried to add an ActionMessage as seen above, but it does not work either...
What is wrong here?
That's because there is no convention configured for your user control type. You could either add a convention via the ConventionManager (see http://caliburnmicro.codeplex.com/wikipage?title=All%20About%20Conventions), or you could derive your type from Button instead.
You could also not use a custom user control and instead just add the image to the Content property of the Button in your view.
I have a:
System.Windows.Data Error: 4 : Cannot find source for binding with
reference 'ElementName=Test'. BindingExpression:Path=Value;
DataItem=null; target element is 'Slider' (Name=''); target property
is 'Value' (type 'Double')
error in a very special case.
I though about a name scope problem but I don't know how to fix it.
Consider the following WPF application :
MyUserControl.xaml:
<UserControl x:Class="WpfApplication1.MyUserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label Grid.Row="0" Content="Move me !"/>
<Slider x:Name="Test" Grid.Row="0" Grid.Column="1" />
<Label Grid.Row="1" Content="Binded slider"/>
<ContentPresenter Grid.Row="1" Grid.Column="1">
<ContentPresenter.Content>
<Slider Value="{Binding Value, ElementName=Test}"/>
</ContentPresenter.Content>
</ContentPresenter>
</Grid>
</UserControl>
MyUserControl.xaml.cs:
using System.Windows.Controls;
namespace WpfApplication1
{
public partial class MyUserControl : UserControl
{
public MyUserControl()
{
InitializeComponent();
}
}
}
MainWindow.xaml:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Width="300" Height="120">
<StackPanel>
<Button Click="Button_Click" Content="Click me to show Sliders !" Height="25"/>
<ContentPresenter x:Name="contentPresenter"/>
</StackPanel>
</Window>
MainWindow.xaml.cs:
using System.Windows;
namespace WpfApplication1
{
public partial class MainWindow : Window
{
private MyUserControl myUserControl;
public MainWindow()
{
InitializeComponent();
myUserControl = new MyUserControl();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
contentPresenter.Content = myUserControl;
}
}
}
Given the code of MyUserControl.xaml, I expect the binded slider to have the same value has the first one.
But nothing happens.
Now, the tricky part: Start the application, Click on the button, Move the first slider, Open "WPF Inspector" and Attach it to the application. Result: The binding is fixed.
How do you explain this phenomenon?
This will do the trick
<!--<ContentPresenter Grid.Row="1" Grid.Column="1">
<ContentPresenter.Content>-->
<Slider Value="{Binding Value, ElementName=Test}" Grid.Column="1" Grid.Row="1"/>
<!--</ContentPresenter.Content>
</ContentPresenter>-->
Because Slider is inside a content presenter you can't access it's value like that. You would need to bind to the same viewmodel property to achive this while having it in the content presenter.
Edit
Get Prism and user a ViewModel... I won't go into details... But What you need to do is this...
After you donwloaded everything add the Microsoft.Practices.Prism dll to your project
Create a new class (ViewModel).Name it whatever you want. I call my MyUserControlViewModel and make it look like this
using Microsoft.Practices.Prism.ViewModel;
namespace YourNamespace
{
public class MyUserControlViewModel : NotificationObject
{
private double _sliderValue;
public double SliderValue
{
get { return _sliderValue; }
set
{
_sliderValue = value;
RaisePropertyChanged(() => SliderValue);
}
}
}
}
Change the XAML in your usercontrol like this
<Slider x:Name="Test" Grid.Row="0" Grid.Column="1" Value="{Binding SliderValue, Mode=TwoWay}"/>
<ContentPresenter Grid.Row="1" Grid.Column="1">
<ContentPresenter.Content>
<Slider Value="{Binding SliderValue}"/>
</ContentPresenter.Content>
</ContentPresenter>
And add this line of code into your MyUserControl.cs file
DataContext = new MyUserControlViewModel();
Now the ViewModel takes over for the heavy lifting... You bound the value of the first slider to the Property SliderValue (the Mode=TwoWay indicates that this control can set and get the state of the property) and you have bound the other slider to the same SliderValue so that it moves in sync with the first
Hope this helps
I'm building a simple UserControl, DoubleDatePicker, which defines a DependencyProperty, SelectedDate :
DoubleDatePicker.xaml :
<UserControl x:Class="TestWpfDoubleDatePicker.DoubleDatePicker"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:toolkit="http://schemas.microsoft.com/wpf/2008/toolkit">
<StackPanel x:Name="LayoutRoot" Background="White">
<toolkit:DatePicker x:Name="DateInput" SelectedDate="{Binding SelectedDate,Mode=TwoWay}" Margin="5,0,5,0" />
<TextBlock Text="{Binding SelectedDate}" />
<toolkit:DatePicker SelectedDate="{Binding SelectedDate,Mode=TwoWay}" Margin="5,0,5,0" />
</StackPanel>
DoubleDatePicker.xaml.cs :
using System;
using System.Windows;
using System.Windows.Controls;
namespace TestWpfDoubleDatePicker
{
public partial class DoubleDatePicker : UserControl
{
public static readonly DependencyProperty SelectedDateProperty =
DependencyProperty.Register("SelectedDate", typeof(DateTime), typeof(DoubleDatePicker), null);
public DateTime SelectedDate
{
get { return (DateTime)this.GetValue(SelectedDateProperty); }
set { this.SetValue(SelectedDateProperty, value); }
}
public DoubleDatePicker()
{
this.InitializeComponent();
this.DataContext = this;
}
}
}
I'd like to be able to bind the SelectedDate property from the outside but things do not seem so simple.
Here is a sample code that is trying to get the value of the property in a TextBlock :
MainWindow.xaml :
<Window x:Class="TestWpfDoubleDatePicker.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:TestWpfDoubleDatePicker"
Title="MainWindow" Height="350" Width="525">
<StackPanel x:Name="LayoutRoot" Background="White">
<local:DoubleDatePicker x:Name="ddp" SelectedDate="{Binding SelectedDate}" />
<Button Content="Update" Click="Button_Click" />
<TextBlock Text="{Binding SelectedDate}" />
</StackPanel>
and MainWindow.xaml.cs :
using System;
using System.Windows;
namespace TestWpfDoubleDatePicker
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public static readonly DependencyProperty SelectedDateProperty =
DependencyProperty.Register("SelectedDate", typeof(DateTime), typeof(MainWindow), null);
public DateTime SelectedDate
{
get { return (DateTime)this.GetValue(SelectedDateProperty); }
set { this.SetValue(SelectedDateProperty, value); }
}
public MainWindow()
{
InitializeComponent();
this.DataContext = this;
}
private void Button_Click(object sender, RoutedEventArgs e)
{
this.SelectedDate = this.ddp.SelectedDate;
}
}
}
Inside the DoubleDatePicker itself all is working fine : the SelectedDate property is updated when changed by using any of the two DatePicker, and the TextBlock of the DoubleDatePicker is updated as expected.
But, outside, the TextBlock of the MainWindow is not updated automatically and the only way to get the SelectedDate property of the DoubleDatePicker is to get it explicitly, like it's done when clicking the Button.
What am I doing wrong ?
I'm using Visual Studio Professional 2010 with WPF 4.
Thanks in advance for you help.
What you are doing wrong is overwriting your DataContext inside your control with this:
this.DataContext = this;
Now your DatePicker no longer binds to your intended object, but in stead binds to your DatePicker instance. I guess this is not how you intended your DatePicker to work ;).
So, remove that line in your DatePicker, and if you do need to bind inside the XAML of your DatePicker use ElementName or RelativeSource bindings to bind to this dependency property.
Hope this clarifies things ;)
I took the liberty of rewriting your bindings inside your XAML of your DatePicker using ElementName bindings:
<UserControl x:Class="TestWpfDoubleDatePicker.DoubleDatePicker"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:toolkit="http://schemas.microsoft.com/wpf/2008/toolkit"
x:Name="Root">
<StackPanel x:Name="LayoutRoot" Background="White">
<toolkit:DatePicker x:Name="DateInput" SelectedDate="{Binding ElementName=Root, Path=SelectedDate,Mode=TwoWay}" Margin="5,0,5,0" />
<TextBlock Text="{Binding ElementName=Root, Path=SelectedDate}" />
<toolkit:DatePicker SelectedDate="{Binding ElementName=Root, Path=SelectedDate,Mode=TwoWay}" Margin="5,0,5,0" />
</StackPanel>