title: why this dockpanel doesn't work?
body: <p>I have this xml:</p>
  
  <pre><code> &lt;DockPanel x:Name="TitleBar"  MouseDown="TitleBar_MouseDown" Background="Red"&gt;
          &lt;Canvas DockPanel.Dock="Left"&gt;
              &lt;Image Stretch="Fill" Width="295" Height="47" Source="/Resources\Images\TopPanel\Toplogo.png"/&gt;
          &lt;/Canvas&gt;
          &lt;Canvas DockPanel.Dock="Right" Width="90"&gt;
              &lt;Button Canvas.Left="70" DockPanel.Dock="Right" Width="16" Height="14" Style="{StaticResource TransparentButton}" Click="ButtonCloseWindowClick"&gt;
                  &lt;Image Height="14" VerticalAlignment="Top" &gt;
                      &lt;Image.Style&gt;
                          &lt;Style TargetType="{x:Type Image}"&gt;
                              &lt;Setter Property="Source" Value="/Resources/Images/Toppanel/but_close.png"/&gt;
                              &lt;Style.Triggers&gt;
                                  &lt;Trigger Property="IsMouseOver" Value="True"&gt;
                                      &lt;Setter Property="Source"  Value="/Resources/Images/Toppanel/but_close_roll.png"/&gt;
                                  &lt;/Trigger&gt;
                              &lt;/Style.Triggers&gt;
                          &lt;/Style&gt;
                      &lt;/Image.Style&gt;
                  &lt;/Image&gt;
              &lt;/Button&gt;
              &lt;Image Canvas.Left="50" Stretch="Fill" Width="2" Height="33" Source="/Resources/Images/Toppanel/divider.png"/&gt;
              &lt;Button Canvas.Left="40" Width="16" Height="14" Style="{StaticResource TransparentButton}" Click="ButtonMinimizedClick" &gt;
                  &lt;Image &gt;
                      &lt;Image.Style&gt;
                          &lt;Style TargetType="{x:Type Image}"&gt;
                              &lt;Setter Property="Source" Value="/Resources/Images/Toppanel/but_minimise.png"/&gt;
                              &lt;Style.Triggers&gt;
                                  &lt;Trigger Property="IsMouseOver" Value="True"&gt;
                                      &lt;Setter Property="Source"  Value="/Resources/Images/TopPanel/but_minimise_roll.png"/&gt;
                                  &lt;/Trigger&gt;
                              &lt;/Style.Triggers&gt;
                          &lt;/Style&gt;
                      &lt;/Image.Style&gt;
                  &lt;/Image&gt;
              &lt;/Button&gt;
              &lt;Image  Canvas.Left="30"  Stretch="Fill" Width="2" Height="33" Source="/Resources/Images/Toppanel/divider.png"/&gt;
              &lt;Button   Canvas.Left="10" Canvas.Top="0"  Width="16" Height="14" Style="{StaticResource TransparentButton}" Click="ButtonInfoClick"&gt;
                  &lt;Image &gt;
                      &lt;Image.Style&gt;
                          &lt;Style TargetType="{x:Type Image}"&gt;
                              &lt;Setter Property="Source" Value="/Resources/Images/Toppanel/but_info.png"/&gt;
                              &lt;Style.Triggers&gt;
                                  &lt;Trigger Property="IsMouseOver" Value="True"&gt;
                                      &lt;Setter Property="Source"  Value="/Resources/Images/TopPanel/but_info_roll.png"/&gt;
                                  &lt;/Trigger&gt;
                              &lt;/Style.Triggers&gt;
                          &lt;/Style&gt;
                      &lt;/Image.Style&gt;
                  &lt;/Image&gt;
              &lt;/Button&gt;
              &lt;Image  Canvas.Left="0" Canvas.Top="0"  Stretch="Fill" Width="2" Height="33" Source="/Resources/Images/Toppanel/divider.png"/&gt;
  
  
  
          &lt;/Canvas&gt;
  
  
      &lt;/DockPanel&gt;
  </code></pre>
  
  <p>based on my understanding, the first canvas should be shown on the left and the other canvas should be shown on right hand size of window, but both of them shown on left hand size. Why dockpanel doesn't work?</p>