Shervin Shakibi's Blog

Some of you asked me to post my panels demo from my presentation Intoroduction to WPF Windows Presentation Foundation.  If you like this, you need to check out this book http://www.amazon.com/gp/product/0596101139/ref=pd_luc_mri/002-4299915-1292828?%5Fencoding=UTF8&m=ATVPDKIKX0DER&v=glance&n=283155

1 +++++++++++++++++++++++++

Notice if you don't define a position it will default to 0,0. you can set the positioning base on left, top, right or bottom
   

 <Canvas>
      <Button> no position, no size</Button>
      <Button Canvas.Left="25" Canvas.Top="25"> , top, no size</Button>
      <Button Canvas.Right="25" Canvas.Bottom="25"> right, bottom, no size</Button>
      <Button Canvas.Left="100" Canvas.Top="100" Width="250" Height="50">On Canvas: left, top, size</Button>

    </Canvas>
2 ++++++++++++++++++++++

Try moving left before bottom

  <DockPanel>
    <Button DockPanel.Dock="Top">Top</Button>
    <Button DockPanel.Dock="Bottom">Bottom</Button>
    <Button DockPanel.Dock="Left">Left</Button>
    <Button DockPanel.Dock="Right">Right</Button>
    <Button >Fill</Button>
    <!-- Fill -->
  </DockPanel>
3 ++++++++++++++++++++++++++

Grid view is very similar to HTML table

 <Grid>
    <Grid.RowDefinitions>
      <RowDefinition />
      <RowDefinition />
      <RowDefinition />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition />
      <ColumnDefinition />
      <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Button Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2">A</Button>
    <Button Grid.Row="0" Grid.Column="2">C</Button>
    <Button Grid.Row="1" Grid.Column="0" Grid.RowSpan="2">D</Button>
    <Button Grid.Row="1" Grid.Column="1">E</Button>
    <Button Grid.Row="1" Grid.Column="2">F</Button>
    <Button Grid.Row="2" Grid.Column="1">H</Button>
    <Button Grid.Row="2" Grid.Column="2">I</Button>
  </Grid>
4+++++++++++++++++++++++

 <StackPanel>
    <!--<StackPanel Orientation="Horizontal">-->
      <Button x:Name="Button1">1</Button>
      <Button x:Name="Button2">2</Button>
      <Button x:Name="Button3">3</Button>
      <Button x:Name="Button4">4</Button>
  </StackPanel>

5+++++++++++++++
in this example lets demonstrate inserting the stack panel in the grid panel, replace the code below

 <StackPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2">
      <!--<StackPanel Orientation="Horizontal">-->
      <Button x:Name="Button1">1</Button>
      <Button x:Name="Button2">2</Button>
      <Button x:Name="Button3">3</Button>
      <Button x:Name="Button4">4</Button>
    </StackPanel>