sdk/samples/WPFSamples/FlowDocumentSamp/csharp/docs/panels_ovw.xaml

   1 <FlowDocumentPageViewer xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   2                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   3   <FlowDocument ColumnWidth="350" ColumnGap="15" ColumnRuleWidth="1" ColumnRuleBrush="LightGray">
   4
   5     <Paragraph Style="{StaticResource HeaderStyle}">Panels Overview</Paragraph>
   6
   7     <Paragraph>
   8       <Rectangle Fill="Black" Height="1" Width="500" HorizontalAlignment="Left" />
   9       <LineBreak/>
  10     </Paragraph>
  11
  12     <Paragraph Style="{StaticResource DisStyle}">
  13       [This topic is pre-release documentation and is subject to change in future releases. Blank topics are included as placeholders.]<LineBreak/>
  14     </Paragraph>
  15
  16     <Paragraph Style="{StaticResource mainContentStyle}">
  17       <Bold>Panels</Bold> are components that control the rendering of elements—their size and dimensions, their position, and the arrangement of their child content. Rendering is controlled by properties specified on panels.
  18     </Paragraph>
  19
  20     <Paragraph Style="{StaticResource mainContentStyle}">This topic contains the following sections.</Paragraph>
  21
  22     <List>
  23
  24       <ListItem>
  25         <Paragraph Style="{StaticResource mainContentStyle}">
  26           <Hyperlink NavigateUri="#panelclass">The Panel Class</Hyperlink>
  27         </Paragraph>
  28       </ListItem>
  29       <ListItem>
  30         <Paragraph Style="{StaticResource mainContentStyle}">
  31           <Hyperlink NavigateUri="#panelcommon">Panel Element Common Members</Hyperlink>
  32         </Paragraph>
  33       </ListItem>
  34       <ListItem>
  35         <Paragraph Style="{StaticResource mainContentStyle}">
  36           <Hyperlink NavigateUri="#panelderived">Derived Panel Elements</Hyperlink>
  37         </Paragraph>
  38       </ListItem>
  39       <ListItem>
  40         <Paragraph Style="{StaticResource mainContentStyle}">
  41           <Hyperlink NavigateUri="#panelui">User Interface Panels</Hyperlink>
  42         </Paragraph>
  43       </ListItem>
  44       <ListItem>
  45         <Paragraph Style="{StaticResource mainContentStyle}">
  46           <Hyperlink NavigateUri="#panelcustom">Custom Panel Elements</Hyperlink>
  47         </Paragraph>
  48       </ListItem>
  49       <ListItem>
  50         <Paragraph Style="{StaticResource mainContentStyle}">
  51           <Hyperlink NavigateUri="#panellocal">Localization/Globalization Support</Hyperlink>
  52         </Paragraph>
  53       </ListItem>
  54       <ListItem>
  55         <Paragraph Style="{StaticResource mainContentStyle}">
  56           <Hyperlink NavigateUri="#panelrelated">Related Topics</Hyperlink>
  57         </Paragraph>
  58       </ListItem>
  59
  60     </List>
  61
  62     <Paragraph Style="{StaticResource SubHeaderStyle}" Name="panelclass">The Panel Class</Paragraph>
  63     <Paragraph Style="{StaticResource mainContentStyle}">
  64       <Bold>Panel</Bold> provides a base class for all elements that define layout characteristics in Windows Presentation Foundation. Derived <Bold>Panel</Bold> elements are used to position and arrange child elements in "Extensible Application Markup Language" ("XAML") and code.
  65     </Paragraph>
  66
  67     <Paragraph Style="{StaticResource mainContentStyle}">
  68       Windows Presentation Foundation includes a comprehensive suite of derived <Bold>Panel</Bold> implementations that provides options for many complex layouts. Each of these derived classes exposes properties and methods that enable most standard user interface (UI) scenarios. Developers who are unable to find a layout design pattern or child nesting behavior that meets their needs can create new layout containers by overriding the ArrangeOverride and MeasureOverride methods of <Bold>Panel</Bold>.
  69     </Paragraph>
  70
  71     <Paragraph Style="{StaticResource SubHeaderStyle}" Name="panelcommon"> Element Common Members</Paragraph>
  72     <Paragraph Style="{StaticResource mainContentStyle}">
  73       The <Bold>Panel</Bold> element extends FrameworkElement and provides a further framework for all controls that define layout characteristics. Because <Bold>Panel</Bold> inherits from FrameworkElement, all <Bold>Panel</Bold> elements support the base properties and methods defined on that class, including Height, Width, HorizontalAlignment, VerticalAlignment, Visibility, FlowDirection, LayoutTransform, Margin, ArrangeOverride and MeasureOverride.
  74     </Paragraph>
  75
  76     <Paragraph Style="{StaticResource mainContentStyle}">
  77       In addition, <Bold>Panel</Bold> exposes three properties that are particularly useful for element layout: Background, Children, and InternalChildren. The Background property is used to fill the area between the boundaries of a derived <Bold>Panel</Bold> element. Children and InternalChildren are similar; however, InternalChildren includes all child elements of a parent <Bold>Panel</Bold>, including those generated by data binding. Both return a UIElementCollection of child elements of the derived <Bold>Panel</Bold> implementation.
  78     </Paragraph>
  79
  80     <Paragraph Style="{StaticResource mainContentStyle}">
  81       <Bold>Panel</Bold> also defines two methods of particular importance, CreateUIElementCollection and OnRender. CreateUIElementCollection is used to cache information on child elements and to perform incremental layout updates. OnRender overrides the default implementation (OnRender) and draws the content of an OnDemandVisual. This method can be overridden to change the rendering behavior of a <Bold>Panel</Bold> element.
  82     </Paragraph>
  83
  84     <Paragraph Style="{StaticResource mainContentStyle}">
  85       Other members of the <Bold>Panel</Bold> class can be viewed here.
  86     </Paragraph>
  87
  88
  89     <Paragraph Style="{StaticResource noteParagraph}">
  90       <Bold>Note:</Bold> <Bold>Panel</Bold> also exposes access to the IAddChild interface, which is intended for internal use by the "XAML" parser only. Using this method directly is not recommended.
  91     </Paragraph>
  92
  93     <Paragraph Style="{StaticResource SubHeaderStyle}" Name="panelderived">Derived Panel Elements</Paragraph>
  94     <Paragraph Style="{StaticResource mainContentStyle}">
  95       Seven elements derive from <Bold>Panel</Bold> and provide their own unique rendering behaviors. A few of these <Bold>Panel</Bold> elements are specialized (BulletPanel, TabPanel, ToolBarOverflowPanel) for particular layout situations, and not very useful for UI layout. However, there are four defined <Bold>Panel</Bold> classes (Canvas, DockPanel, Grid, and StackPanel) that are designed specifically for creating rich application UI.
  96     </Paragraph>
  97
  98     <Paragraph Style="{StaticResource mainContentStyle}">
  99       Each <Bold>Panel</Bold> element encapsulates its own special functionality, as seen in the following table.
 100     </Paragraph>
 101
 102     <Table CellSpacing="5">
 103       <Table.Columns>
 104         <TableColumn Width="Auto"/>
 105         <TableColumn Width="Auto"/>
 106         <TableColumn Width="Auto"/>
 107       </Table.Columns>
 108       <TableRowGroup>
 109         <TableRow>
 110           <TableCell>
 111             <Paragraph FontWeight="Bold">Element Name</Paragraph>
 112           </TableCell>
 113           <TableCell>
 114             <Paragraph FontWeight="Bold">UI Panel?</Paragraph>
 115           </TableCell>
 116           <TableCell>
 117             <Paragraph FontWeight="Bold">Description</Paragraph>
 118           </TableCell>
 119         </TableRow>
 120         <TableRow>
 121           <TableCell>
 122             <Paragraph Style="{StaticResource tableContentStyle}">BulletPanel</Paragraph>
 123           </TableCell>
 124           <TableCell>
 125             <Paragraph Style="{StaticResource tableContentStyle}">No</Paragraph>
 126           </TableCell>
 127           <TableCell>
 128             <Paragraph Style="{StaticResource tableContentStyle}">A primitive layout control designed to host only two child elements. The content of a BulletPanel is usually a text string and a glyph representing a control, such as a check box or a radio button. </Paragraph>
 129           </TableCell>
 130         </TableRow>
 131         <TableRow>
 132           <TableCell>
 133             <Paragraph Style="{StaticResource tableContentStyle}">Canvas</Paragraph>
 134           </TableCell>
 135           <TableCell>
 136             <Paragraph Style="{StaticResource tableContentStyle}">Yes</Paragraph>
 137           </TableCell>
 138           <TableCell>
 139             <Paragraph Style="{StaticResource tableContentStyle}">Defines an area within which you can explicitly position child elements by coordinates relative to the Canvas area.</Paragraph>
 140           </TableCell>
 141         </TableRow>
 142         <TableRow>
 143           <TableCell>
 144             <Paragraph Style="{StaticResource tableContentStyle}">DockPanel</Paragraph>
 145           </TableCell>
 146           <TableCell>
 147             <Paragraph Style="{StaticResource tableContentStyle}">Yes</Paragraph>
 148           </TableCell>
 149           <TableCell>
 150             <Paragraph Style="{StaticResource tableContentStyle}">Defines an area within which you can arrange child elements either horizontally or vertically, relative to each other.</Paragraph>
 151           </TableCell>
 152         </TableRow>
 153         <TableRow>
 154           <TableCell>
 155             <Paragraph Style="{StaticResource tableContentStyle}">Grid</Paragraph>
 156           </TableCell>
 157           <TableCell>
 158             <Paragraph Style="{StaticResource tableContentStyle}">Yes</Paragraph>
 159           </TableCell>
 160           <TableCell>
 161             <Paragraph Style="{StaticResource tableContentStyle}">Defines a flexible grid area consisting of columns and rows. Child elements of a Grid can be positioned precisely using the Margin property. </Paragraph>
 162           </TableCell>
 163         </TableRow>
 164         <TableRow>
 165           <TableCell>
 166             <Paragraph Style="{StaticResource tableContentStyle}">StackPanel</Paragraph>
 167           </TableCell>
 168           <TableCell>
 169             <Paragraph Style="{StaticResource tableContentStyle}">Yes</Paragraph>
 170           </TableCell>
 171           <TableCell>
 172             <Paragraph Style="{StaticResource tableContentStyle}">Arranges child elements into a single line that can be oriented horizontally or vertically. </Paragraph>
 173           </TableCell>
 174         </TableRow>
 175         <TableRow>
 176           <TableCell>
 177             <Paragraph Style="{StaticResource tableContentStyle}">TabPanel</Paragraph>
 178           </TableCell>
 179           <TableCell>
 180             <Paragraph Style="{StaticResource tableContentStyle}">No</Paragraph>
 181           </TableCell>
 182           <TableCell>
 183             <Paragraph Style="{StaticResource tableContentStyle}">Handles the layout of tab buttons in a TabControl.</Paragraph>
 184           </TableCell>
 185         </TableRow>
 186         <TableRow>
 187           <TableCell>
 188             <Paragraph Style="{StaticResource tableContentStyle}">ToolBarOverflowPanel</Paragraph>
 189           </TableCell>
 190           <TableCell>
 191             <Paragraph Style="{StaticResource tableContentStyle}">No</Paragraph>
 192           </TableCell>
 193           <TableCell>
 194             <Paragraph Style="{StaticResource tableContentStyle}">Used to arrange overflow items of a ToolBar.</Paragraph>
 195           </TableCell>
 196         </TableRow>
 197       </TableRowGroup>
 198
 199     </Table>
 200
 201     <Paragraph Style="{StaticResource SubHeaderStyle}" Name="panelui">User Interface Panels</Paragraph>
 202     <Paragraph Style="{StaticResource mainContentStyle}">
 203       There are four <Bold>Panel</Bold> classes available in Windows Presentation Foundation that are optimized to support UI scenarios: Canvas, DockPanel, Grid, and StackPanel. These panels are easy to use, versatile, and extensible enough for most applications.
 204     </Paragraph>
 205
 206     <Paragraph Style="{StaticResource mainContentStyle}">More detailed descriptions of each of these elements can be found below.</Paragraph>
 207
 208     <Paragraph Style="{StaticResource SubHeaderStyle}">Canvas</Paragraph>
 209     <Paragraph Style="{StaticResource mainContentStyle}">
 210       The <Bold>Canvas</Bold> element enables positioning of content according to absolute x- and y-coordinates. Elements can be drawn in a unique location; or, if elements occupy the same coordinates, the order in which they appear in markup determines the order in which the elements are drawn.
 211     </Paragraph>
 212
 213
 214     <Paragraph Style="{StaticResource mainContentStyle}">
 215       The following markup example demonstrates how to use <Bold>Canvas</Bold> to absolutely position content. This markup produces three 100-pixel squares. The first square is red, and its top-left (x, y) position is specified as (0, 0). The second square is green, and its top-left position is (100, 100), just below and to the right of the first square. The third square is blue, and its top-left position is (50, 50), thus encompassing the lower-right quadrant of the first square and the upper-left quadrant of the second. Because the third square is laid out last, it appears to be on top of the other two squares—that is, the overlapping portions assume the color of the third box.
 216     </Paragraph>
 217     <Paragraph Style="{StaticResource CodeSnippetParagraph}" xml:space="preserve">
 218 &lt;Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Text="Canvas Sample">
 219     &lt;Canvas Height="300" Width="300">
 220         &lt;Canvas Height="100" Width="100"  Top="0" Left="0">
 221             &lt;Rectangle Width="100" Height="100" Fill="red"/>
 222         &lt;/Canvas>
 223         &lt;Canvas Height="100" Width="100" Top="100" Left="100">
 224             &lt;Rectangle Width="100" Height="100" Fill="green"/>
 225         &lt;/Canvas>
 226         &lt;Canvas Height="100" Width="100" Top="50" Left="50">
 227             &lt;Rectangle Width="100" Height="100" Fill="blue"/>
 228         &lt;/Canvas>
 229     &lt;/Canvas>
 230 &lt;/Page>
 231     </Paragraph>
 232
 233     <Paragraph Style="{StaticResource expanderStyle}">
 234       <Expander IsExpanded="true" Header="Rendered Output">
 235         <Canvas Height="300" Width="300">
 236           <Canvas Height="100" Width="100"  Top="0" Left="0">
 237             <Rectangle Width="100" Height="100" Fill="red"/>
 238           </Canvas>
 239           <Canvas Height="100" Width="100" Top="100" Left="100">
 240             <Rectangle Width="100" Height="100" Fill="green"/>
 241           </Canvas>
 242           <Canvas Height="100" Width="100" Top="50" Left="50">
 243             <Rectangle Width="100" Height="100" Fill="blue"/>
 244           </Canvas>
 245         </Canvas>
 246       </Expander>
 247     </Paragraph>
 248
 249     <Paragraph Style="{StaticResource mainContentStyle}">The compiled application yields a new UI that looks like this.</Paragraph>
 250
 251     <Paragraph Style="{StaticResource imageStyler}">
 252       <Image Stretch="Uniform">
 253         <Image.Source>
 254           <BitmapImage UriSource="\images\panel_intro_canvas.png"/>
 255         </Image.Source>
 256       </Image>
 257     </Paragraph>
 258
 259     <Paragraph Style="{StaticResource mainContentStyle}">
 260       For more detailed information on the <Bold>Canvas</Bold> element, see <Hyperlink NavigateUri="canvas_ovw.xaml">Canvas Overview</Hyperlink>.
 261     </Paragraph>
 262
 263     <Paragraph Style="{StaticResource SubHeaderStyle}">DockPanel</Paragraph>
 264     <Paragraph Style="{StaticResource mainContentStyle}">
 265       The <Bold>DockPanel</Bold> element uses the attached Dock property to position content along the edges of a container. When Dock is set to Top or Bottom, it positions child elements above or below each other. When Dock is set to Left or Right, it positions child elements to the left or right of each other. The LastChildFill property determines the position of the final element added as a child of a <Bold>DockPanel</Bold>.
 266     </Paragraph>
 267
 268     <Paragraph Style="{StaticResource mainContentStyle}">
 269       You can use <Bold>DockPanel</Bold> to position a group of related controls, such as a set of buttons. Alternately, you can use it to create a "paned" UI, similar to that found in Microsoft Outlook.
 270     </Paragraph>
 271
 272
 273     <Paragraph Style="{StaticResource mainContentStyle}">
 274       The following markup demonstrates how to partition space using a <Bold>DockPanel</Bold>. Five Border elements are added as children of a parent <Bold>DockPanel</Bold>. Each uses a different positioning property of a <Bold>DockPanel</Bold> to partition space. The final element "fills" the remaining, unallocated space.
 275     </Paragraph>
 276     <Paragraph Style="{StaticResource CodeSnippetParagraph}" xml:space="preserve">
 277     &lt;Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
 278     &lt;DockPanel Height="250" Width="400">
 279         &lt;Border Height="25" Background="SkyBlue" BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Top">
 280             &lt;TextBlock Foreground="black">Dock = "Top"&lt;/TextBlock>
 281         &lt;/Border>
 282         &lt;Border Height="25" Background="SkyBlue" BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Top">
 283             &lt;TextBlock Foreground="black">Dock = "Top"&lt;/TextBlock>
 284         &lt;/Border>
 285         &lt;Border Height="25" Background="#ffff99" BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Bottom">
 286             &lt;TextBlock Foreground="black">Dock = "Bottom"&lt;/TextBlock>
 287         &lt;/Border>
 288         &lt;Border Width="200" Background="PaleGreen" BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Left">
 289             &lt;TextBlock Foreground="black">Dock = "Left"&lt;/TextBlock>
 290         &lt;/Border>
 291         &lt;Border Background="White" BorderBrush="Black" BorderThickness="1">
 292             &lt;TextBlock Foreground="black" TextWrapping="Wrap">This content "Fills" the remaining, unallocated space.&lt;/TextBlock>
 293         &lt;/Border>
 294     &lt;/DockPanel>
 295     &lt;/Page>
 296     </Paragraph>
 297
 298     <Paragraph Style="{StaticResource expanderStyle}">
 299       <Expander IsExpanded="true" Header="Rendered Output">
 300         <DockPanel Height="250" Width="400">
 301           <Border Height="25" Background="SkyBlue" BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Top">
 302             <TextBlock Foreground="black">Dock = "Top"</TextBlock>
 303           </Border>
 304           <Border Height="25" Background="SkyBlue" BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Top">
 305             <TextBlock Foreground="black">Dock = "Top"</TextBlock>
 306           </Border>
 307           <Border Height="25" Background="#ffff99" BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Bottom">
 308             <TextBlock Foreground="black">Dock = "Bottom"</TextBlock>
 309           </Border>
 310           <Border Width="200" Background="PaleGreen" BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Left">
 311             <TextBlock Foreground="black">Dock = "Left"</TextBlock>
 312           </Border>
 313           <Border Background="White" BorderBrush="Black" BorderThickness="1">
 314             <TextBlock Foreground="black" TextWrapping="Wrap">This content "Fills" the remaining, unallocated space.</TextBlock>
 315           </Border>
 316         </DockPanel>
 317       </Expander>
 318     </Paragraph>
 319
 320     <Paragraph Style="{StaticResource mainContentStyle}">The compiled application yields a new UI that looks like this.</Paragraph>
 321
 322     <Paragraph Style="{StaticResource imageStyler}">
 323       <Image Stretch="Uniform">
 324         <Image.Source>
 325           <BitmapImage UriSource="\images\panel_intro_dockpanel.png"/>
 326         </Image.Source>
 327       </Image>
 328     </Paragraph>
 329
 330     <Paragraph Style="{StaticResource mainContentStyle}">
 331       For more detailed information on the <Bold>DockPanel</Bold> element, see <Hyperlink NavigateUri="dockpanel_ovw.xaml">DockPanel Overview</Hyperlink>.
 332     </Paragraph>
 333
 334     <Paragraph Style="{StaticResource SubHeaderStyle}">Grid</Paragraph>
 335     <Paragraph Style="{StaticResource mainContentStyle}">
 336       A <Bold>Grid</Bold> enables you to easily position and style elements. It provides similar functionality to the Table element, but adds additional capabilities that make possible more precise positioning and styling of child objects.
 337     </Paragraph>
 338
 339
 340     <Paragraph Style="{StaticResource mainContentStyle}">The following markup demonstrates how to build a UI similar to that found on the Run dialog available on the Microsoft Windows Start menu.</Paragraph>
 341     <Paragraph Style="{StaticResource CodeSnippetParagraph}" xml:space="preserve">
 342 &lt;Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
 343     &lt;Grid Background="#DCDCDC"
 344           Width="375"
 345           Height="150"
 346           HorizontalAlignment="Left"
 347           VerticalAlignment="Top"
 348           ShowGridLines="True">
 349         &lt;Grid.ColumnDefinitions>
 350         &lt;ColumnDefinition Width="Auto" />
 351         &lt;ColumnDefinition Width="*" />
 352         &lt;ColumnDefinition />
 353         &lt;ColumnDefinition />
 354         &lt;ColumnDefinition />
 355         &lt;/Grid.ColumnDefinitions>
 356         &lt;Grid.RowDefinitions>
 357         &lt;RowDefinition Height="Auto" />
 358         &lt;RowDefinition Height="Auto" />
 359         &lt;RowDefinition Height="*" />
 360         &lt;RowDefinition Height="Auto" />
 361         &lt;/Grid.RowDefinitions>
 362
 363         &lt;Image Grid.Column="0" Grid.Row="0" Source="RunIcon.png" />
 364         &lt;TextBlock Grid.Column="1" Grid.ColumnSpan="4" Grid.Row="0" Margin="0,5,0,0" TextWrapping="Wrap">
 365             Type the name of a program, folder, document, or
 366             Internet resource, and Windows will open it for you.
 367         &lt;/TextBlock>
 368         &lt;TextBlock Grid.Column="0" Grid.Row="1" Margin="3,3,0,0">Open:&lt;/TextBlock>
 369         &lt;TextBox Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="5" Height="Auto" Width="Auto" />
 370         &lt;Button Grid.Row="3" Grid.Column="2">OK&lt;/Button>
 371         &lt;Button Grid.Row="3" Grid.Column="3">Cancel&lt;/Button>
 372         &lt;Button Grid.Row="3" Grid.Column="4">Browse ...&lt;/Button>
 373     &lt;/Grid>
 374 &lt;/Page>
 375     </Paragraph>
 376
 377     <Paragraph Style="{StaticResource expanderStyle}">
 378       <Expander IsExpanded="true" Header="Rendered Output">
 379         <Grid Background="#DCDCDC"
 380               Width="375"
 381               Height="150"
 382               HorizontalAlignment="Left"
 383               VerticalAlignment="Top"
 384               ShowGridLines="True">
 385           <Grid.ColumnDefinitions>
 386             <ColumnDefinition Width="Auto" />
 387             <ColumnDefinition Width="*" />
 388             <ColumnDefinition />
 389             <ColumnDefinition />
 390             <ColumnDefinition />
 391           </Grid.ColumnDefinitions>
 392           <Grid.RowDefinitions>
 393             <RowDefinition Height="Auto" />
 394             <RowDefinition Height="Auto" />
 395             <RowDefinition Height="*" />
 396             <RowDefinition Height="Auto" />
 397           </Grid.RowDefinitions>
 398           <Image Grid.Column="0" Grid.Row="0" Stretch="None">
 399             <Image.Source>
 400               <BitmapImage UriSource="\images\runicon.PNG"/>
 401             </Image.Source>
 402           </Image>
 403           <TextBlock Grid.Column="1" Grid.ColumnSpan="4" Grid.Row="0" Margin="0,5,0,0" TextWrapping="Wrap">
 404             Type the name of a program, folder, document, or
 405             Internet resource, and Windows will open it for you.
 406           </TextBlock>
 407           <TextBlock Grid.Column="0" Grid.Row="1" Margin="3,3,0,0">Open:</TextBlock>
 408           <TextBox Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="5" Height="Auto" Width="Auto" />
 409           <Button Grid.Row="3" Grid.Column="2">OK</Button>
 410           <Button Grid.Row="3" Grid.Column="3">Cancel</Button>
 411           <Button Grid.Row="3" Grid.Column="4">Browse ...</Button>
 412         </Grid>
 413       </Expander>
 414     </Paragraph>
 415
 416     <Paragraph Style="{StaticResource mainContentStyle}">The compiled application yields a new UI that looks like this.</Paragraph>
 417
 418     <Paragraph Style="{StaticResource imageStyler}">
 419       <Image Stretch="Uniform">
 420         <Image.Source>
 421           <BitmapImage UriSource="\images\run_dialog.png"/>
 422         </Image.Source>
 423       </Image>
 424     </Paragraph>
 425
 426     <Paragraph Style="{StaticResource mainContentStyle}">
 427       For more detailed information on the <Bold>Grid</Bold> element, see <Hyperlink NavigateUri="grid_ovw.xaml">Grid Overview</Hyperlink>.
 428     </Paragraph>
 429
 430     <Paragraph Style="{StaticResource SubHeaderStyle}">StackPanel</Paragraph>
 431     <Paragraph Style="{StaticResource mainContentStyle}">
 432       A <Bold>StackPanel</Bold> enables you to "stack" elements in an assigned direction. The default stack direction in a <Bold>StackPanel</Bold> is vertical. The Orientation property can be used to control content flow in a <Bold>StackPanel</Bold>.
 433     </Paragraph>
 434
 435     <Paragraph Style="{StaticResource mainContentStyle}">
 436       The following markup demonstrates how to use a <Bold>StackPanel</Bold> to create a set of vertically-positioned buttons.
 437     </Paragraph>
 438     <Paragraph Style="{StaticResource CodeSnippetParagraph}" xml:space="preserve">
 439 &lt;Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Text="StackPanel Sample">
 440     &lt;StackPanel HorizontalAlignment="Left"
 441                 VerticalAlignment="Top">
 442         &lt;Button DockPanel.Dock="Top">Button 1&lt;/Button>
 443         &lt;Button DockPanel.Dock="Top">Button 2&lt;/Button>
 444         &lt;Button DockPanel.Dock="Top">Button 3&lt;/Button>
 445     &lt;/StackPanel>
 446 &lt;/Page>
 447 </Paragraph>
 448
 449     <Paragraph Style="{StaticResource expanderStyle}">
 450       <Expander IsExpanded="true" Header="Rendered Output">
 451         <StackPanel HorizontalAlignment="Left"
 452                     VerticalAlignment="Top">
 453           <Button DockPanel.Dock="Top">Button 1</Button>
 454           <Button DockPanel.Dock="Top">Button 2</Button>
 455           <Button DockPanel.Dock="Top">Button 3</Button>
 456         </StackPanel>
 457       </Expander>
 458     </Paragraph>
 459
 460     <Paragraph Style="{StaticResource mainContentStyle}">The compiled application yields a new UI that looks like this.</Paragraph>
 461
 462     <Paragraph Style="{StaticResource imageStyler}">
 463       <Image Stretch="Uniform">
 464         <Image.Source>
 465           <BitmapImage UriSource="\images\panel_intro_stackpanel.png"/>
 466         </Image.Source>
 467       </Image>
 468     </Paragraph>
 469
 470     <Paragraph Style="{StaticResource mainContentStyle}">
 471       For more detailed information on the <Bold>StackPanel</Bold> element, see <Hyperlink NavigateUri="stackpanel_ovw.xaml">StackPanel Overview</Hyperlink>.
 472     </Paragraph>
 473
 474     <Paragraph Style="{StaticResource SubHeaderStyle}" Name="panelcustom">Custom Panel Elements</Paragraph>
 475     <Paragraph Style="{StaticResource mainContentStyle}">
 476       While Windows Presentation Foundation provides an array of flexible layout controls, custom layout behaviors can also be achieved by overriding the ArrangeOverride and MeasureOverride methods of <Bold>Panel</Bold>. Custom sizing and positioning can be done by defining new positioning behaviors within these override methods.
 477     </Paragraph>
 478
 479     <Paragraph Style="{StaticResource mainContentStyle}">
 480       Similarly, custom layout behaviors based on existing <Bold>Panel</Bold> classes (such as Canvas or Grid can be defined by overriding their ArrangeOverride and MeasureOverride methods.
 481     </Paragraph>
 482
 483     <Paragraph Style="{StaticResource mainContentStyle}">
 484       The following markup demonstrates how to create a custom <Bold>Panel</Bold> element using C#. This new <Bold>Panel</Bold>, defined as PlotPanel, supports the positioning of child elements through the use of hard-coded x- and y-coordinates. In this example, a Rectangle element (not shown) is positioned at plot point 50 (x), and 50 (y).
 485     </Paragraph>
 486     <Paragraph Style="{StaticResource CodeSnippetParagraph}" xml:space="preserve">
 487 ...
 488 public class PlotPanel : Panel
 489     {
 490     // Default public constructor
 491     public PlotPanel()
 492         : base()
 493         {
 494         }
 495     // Override the default Measure method of Panel
 496     protected override Size MeasureOverride(Size availableSize)
 497         {
 498             Size childSize = availableSize;
 499             foreach (UIElement child in InternalChildren)
 500             {
 501                 if (child == null) { continue; }
 502                 child.Measure(childSize);
 503             }
 504             return availableSize;
 505         }
 506
 507         protected override Size ArrangeOverride(Size finalSize)
 508         {
 509             foreach (UIElement child in InternalChildren)
 510             {
 511                 if (child == null) { continue; }
 512                 double x = 50;
 513                 double y = 50;
 514                 child.Arrange(new Rect(new Point(x, y), child.DesiredSize));
 515             }
 516             return finalSize; // Returns the final Arranged size
 517         }
 518     }
 519 ...
 520 </Paragraph>
 521
 522     <Paragraph Style="{StaticResource SubHeaderStyle}" Name="panellocal">Localization/Globalization Support</Paragraph>
 523     <Paragraph Style="{StaticResource mainContentStyle}">Windows Presentation Foundation supports a number of features that assist in the creation of localizable UI.</Paragraph>
 524
 525     <Paragraph Style="{StaticResource mainContentStyle}">
 526       All <Bold>Panel</Bold> elements natively support the FlowDirection property, which can be used to dynamically reflow content based on a user's locale or language settings.
 527     </Paragraph>
 528
 529     <Paragraph Style="{StaticResource mainContentStyle}">The SizeToContent property provides a mechanism that enables application developers to anticipate the needs of localized UI. Using the WidthAndHeight value of this property, a parent Window always sizes dynamically to fit content and is not constrained by artificial height or width restrictions.</Paragraph>
 530
 531     <Paragraph Style="{StaticResource mainContentStyle}">DockPanel, Grid, and StackPanel are all good choices for localizable UI. Canvas is not a good choice, however, because it positions content absolutely, making it difficult to localize.</Paragraph>
 532
 533     <Paragraph Style="{StaticResource SubHeaderStyle}" Name="panelrelated">
 534       Related Topics<LineBreak/>
 535     </Paragraph>
 536     <List>
 537       <ListItem>
 538         <Paragraph Style="{StaticResource mainContentStyle}">
 539           <Hyperlink NavigateUri="canvas_ovw.xaml" TargetName="frame2">Canvas Overview</Hyperlink>
 540         </Paragraph>
 541       </ListItem>
 542       <ListItem>
 543         <Paragraph Style="{StaticResource mainContentStyle}">
 544           <Hyperlink NavigateUri="documents_ovw.xaml" TargetName="frame2">Documents Overview</Hyperlink>
 545         </Paragraph>
 546       </ListItem>
 547       <ListItem>
 548         <Paragraph Style="{StaticResource mainContentStyle}">
 549           <Hyperlink NavigateUri="grid_ovw.xaml" TargetName="frame2">Grid Overview</Hyperlink>
 550         </Paragraph>
 551       </ListItem>
 552       <ListItem>
 553         <Paragraph Style="{StaticResource mainContentStyle}">
 554           <Hyperlink NavigateUri="layout_ovw.xaml" TargetName="frame2">Layout "Cook Book"</Hyperlink>
 555         </Paragraph>
 556       </ListItem>
 557       <ListItem>
 558         <Paragraph Style="{StaticResource mainContentStyle}">
 559           <Hyperlink NavigateUri="panels_ovw.xaml" TargetName="frame2">Panels Overview</Hyperlink>
 560         </Paragraph>
 561       </ListItem>
 562       <ListItem>
 563         <Paragraph Style="{StaticResource mainContentStyle}">
 564           <Hyperlink NavigateUri="stackpanel_ovw.xaml" TargetName="frame2">StackPanel Overview</Hyperlink>
 565         </Paragraph>
 566       </ListItem>
 567     </List>
 568
 569     <Paragraph Style="{StaticResource mainContentStyle}">Send comments about this topic to Microsoft. © Microsoft Corporation. All rights reserved.</Paragraph>
 570
 571   </FlowDocument>
 572 </FlowDocumentPageViewer>