I followed the sample  on Scott Guthrie blog to create a modal dialog and suddenly found such a bug in DatePicker, that the drop down part will be shown far away from the control itself. it is very easy to reproduce. say we have the modal dialog
XAML
<UserControl x:Class="DatePickerBug.DemoDialog"
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    >
  <Grid>
    <Rectangle HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Opacity="0.765" Fill="#FF8A8A8A"/>

    <Border CornerRadius="5" Background="#FF5C7590" Width="300" Height="185" x:Name="RootContainer">
      <StackPanel>
        <TextBlock Text="Select Symbol Parameters" Foreground="Yellow" Margin="5" HorizontalAlignment="Center"/>
        <Grid>
          <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
          </Grid.ColumnDefinitions>
          <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
          </Grid.RowDefinitions>
         
          <TextBlock Text="Symbol" Foreground="White" Margin="5 0 0 0"/>
          <TextBlock Text="Bar Interval" Foreground="White" Margin="5 3 0 0" Grid.Row="1"/>         
          <TextBlock Text="Bar History" Foreground="White" Margin="5 3 0 0" Grid.Row="2"/>         
          <TextBlock Text="Periodicity" Foreground="White" Margin="5 3 0 0" Grid.Row="3"/>         
         
          <TextBox x:Name="txtSymbol" Grid.Column="1" Margin="0 0 5 0" Text="Symbol"/>
          <TextBox x:Name="txtBarInterval" Grid.Column="1" Margin="0 2 5 0" Text="" Grid.Row="1"/>         
          <TextBox x:Name="txtBarHistory" Grid.Column="1" Margin="0 2 5 0" Text="" Grid.Row="2"/>         
          <DatePicker x:Name="cmbBarPeriodicity" Grid.Column="1" Margin="0 2 5 0" Text="" Grid.Row="3" /> 
        </Grid>
       
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
          <Button x:Name="btnOK" Content="OK" Width="64" Margin="5" HorizontalAlignment="Right" Click="btnOK_Click"/>
        </StackPanel>
      </StackPanel>
    </Border>
  </Grid>
</UserControl>

.CS file
using System.Windows;

namespace DatePickerBug
{
  public partial class DemoDialog
  {
    public DemoDialog()
    {
      InitializeComponent();
    }

    private void btnOK_Click(object sender, RoutedEventArgs e)
    {
      Visibility = Visibility.Collapsed;
    }

    public void Show()
    {
      Visibility = Visibility.Visible;
    }
  }
}

and the main page of our app
XAML
<UserControl x:Class="DatePickerBug.Page"
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:my="clr-namespace:DatePickerBug"            
    >
    <Grid x:Name="LayoutRoot" Background="White">
    <StackPanel>
      <Button Content="Show Dialog" x:Name="btnShow" Click="btnShow_Click"/>
    </StackPanel>
    <my:DemoDialog x:Name="dlgDemo"   Visibility="Collapsed" />
  </Grid>
</UserControl>

.CS file
using System.Windows;

namespace DatePickerBug
{
  public partial class Page
  {
    public Page()
    {
      InitializeComponent();
    }

    private void btnShow_Click(object sender, RoutedEventArgs e)
    {
      dlgDemo.Show();
    }
  }
}

in my case I get such a picture


as you can see the popup part is far away from control itself.

Anyone can confirm this?

Thx 

Hi! I discovered a similar problem.

When I open my Page with the DatePicker on it, the Calendar PopUp appears at the right place.

But if I move or resize the window after this first use, the Calendar PopUp will still appear on the same position of the screen as it appeared for the first time...

I'm seeing a similar issue.  The DatePicker does not show up anywhere close to where it should.  In my case it is rendered outside of my ScrollViewer.  Anybody figured this one out?

<Grid x:Name="Grid">
 <ScrollViewer VerticalScrollBarVisibility="Visible" Height="400" Width="600">
  <Grid>
   <Grid.ColumnDefinitions>
    <ColumnDefinition Width="150" />
    <ColumnDefinition />
                        </Grid.ColumnDefinitions>
   <Grid.RowDefinitions>
                             <RowDefinition Height="Auto"/>
                             <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>

   <TextBlock Grid.Row="0" Grid.Column="0">Choose a date</TextBlock>
                        <DatePicker x:Name="DatePicker1" Grid.Row="0" Grid.Column="1"></DatePicker>
             </Grid>
 </ScrollViewer>
</Grid>

I think the issue is when the DatePicker is clicked the Calendar reders properly but doesn't scroll.  So the issue I was seeing was a little more complex than the code I just posted.  Here is how to reproduce the problem.  Add enough rows to your grid to where the ScrollViewer scrolls the DatePicker.  Click the DatePicker so the Calendar appears.  Scroll the ScrollViewer.  The Calendar doesn't move.  So the problem really is anoying if initially your DatePicker is way down in your grid because the Calendar renders where the DatePicker exists before any scrolling by the user.

Hi,

 Im using the margin's of controls... its show correctly.. if we using the <Grid> control there is a problem....

the code is:

<TextBlock Text="Date :" Margin="20,20,20,20"></TextBlock>

<DatePicker x:Name="dtpk1" Width="100" HorizontalAlignment="left" Margin="150,20,20,20"></DatePicker>

<TextBlock Text="Description :" Margin="20,50,0,0"></TextBlock>

<TextBox Text="" x:Name="txtDesc" Margin="150,50,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="150" Height="20"></TextBox>

<Button x:Name="btnSave" Content="SAVE" Width="70" Height="25" Margin="150,90,0,0" VerticalAlignment="Top

Thanks & Regards