1 <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
2 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
3 Title="Document Viewer"
4 x:Class="myDocumentViewer.Page1"
6 <TabControl MinHeight="500" MaxHeight="700" MinWidth="400">
7 <TabItem Style="{StaticResource TabStyle}" Header="FlowDocumentPageViewer Sample" IsSelected="true">
9 <TextBlock Style="{StaticResource HeaderStyle}">FlowDocumentPageViewer Sample</TextBlock>
11 <TextBlock Style="{StaticResource mainContentStyle}">This example demonstrates how to implement a Flow Document hosted within a FlowDocumentPageViewer control.</TextBlock>
16 <TabItem Name="xaml" Style="{StaticResource TabStyle}" Header="XAML">
17 <ScrollViewer HorizontalScrollBarVisibility="Visible">
19 <TextBlock Name="xamlCheck">
20 <TextBox Style="{StaticResource CodeSnippetParagraph}" xml:space="preserve">
21 <FlowDocumentPageViewer>
22 <FlowDocument xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
24 <Paragraph Style="{StaticResource HeaderStyle}">Canvas Overview</Paragraph>
25 <Paragraph><Rectangle Fill="Black" Height="1" Width="500" HorizontalAlignment="Left" /><LineBreak/></Paragraph>
27 <Paragraph Style="{StaticResource DisStyle}">[This topic is pre-release documentation and is subject to change in future releases. Blank topics are included as placeholders.]<LineBreak/></Paragraph>
28 <Paragraph Style="{StaticResource mainContentStyle}">The Canvas element is used to position content according to absolute x- and y-coordinates. Canvas provides ultimate flexibility for positioning and arranging elements on the screen. Elements can be drawn in a unique location, or in the event that elements occupy the same coordinates, the order in which they appear in markup determines the order in which elements are drawn.</Paragraph>
30 <Paragraph Style="{StaticResource mainContentStyle}">This topic contains the following sections.</Paragraph>
34 <ListItem><Paragraph Style="{StaticResource mainContentStyle}">What Can I Do with the Canvas?</Paragraph></ListItem>
35 <ListItem><Paragraph Style="{StaticResource mainContentStyle}">Adding a Border to a Canvas Element</Paragraph></ListItem>
36 <ListItem><Paragraph Style="{StaticResource mainContentStyle}">Order of Elements in a Canvas</Paragraph></ListItem>
37 <ListItem><Paragraph Style="{StaticResource mainContentStyle}">Creating a Canvas in "XAML"</Paragraph></ListItem>
38 <ListItem><Paragraph Style="{StaticResource mainContentStyle}">Creating a Canvas in Code</Paragraph></ListItem>
42 <Paragraph Style="{StaticResource SubHeaderStyle}">What Can I Do with the Canvas?</Paragraph>
43 <Paragraph Style="{StaticResource mainContentStyle}">Canvas provides the most flexible layout support of any Panel element. Height and Width properties are used to define the area of the canvas, and elements inside are assigned absolute coordinates relative to the upper left corner of the parent Canvas. This allows you to position and arrange elements precisely where you want them on the screen.</Paragraph>
45 <Paragraph Style="{StaticResource SubHeaderStyle}">Adding a Border to a Canvas Element</Paragraph>
46 <Paragraph Style="{StaticResource mainContentStyle}">In order for a Canvas element to have a border, it must be encapsulated within a Border element.</Paragraph>
48 <Paragraph Style="{StaticResource mainContentStyle}">The following code example shows how to display Hello World within a Canvas with a border and background.</Paragraph>
49 <Paragraph Style="{StaticResource CodeSnippetParagraph}" xml:space="preserve">
50 <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
54 Background="LightGray"
55 HorizontalAlignment="Left"
56 VerticalAlignment="Top"
60 <TextBlock Canvas.Top="10" Canvas.Left="20">Hello World!</TextBlock>
65 <Paragraph Style="{StaticResource SubHeaderStyle}">Order of Elements in a Canvas</Paragraph>
66 <Paragraph Style="{StaticResource mainContentStyle}">The order of child elements (z-index) in a Canvas is determined by their order in "Extensible Application Markup Language" ("XAML") or code. As a consequence, layered order can be achieved when elements share the same coordinates. Canvas and Grid are the only layout controls that supports sharing of space in this manner.</Paragraph>
68 <Paragraph Style="{StaticResource mainContentStyle}">The following example demonstrates how to achieve layered order of elements within a Canvas. Notice that each Rectangle element is drawn in the order it appears in "XAML".</Paragraph>
70 <Paragraph Style="{StaticResource CodeSnippetParagraph}" xml:space="preserve">
71 <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
72 <Canvas Width="500" Height="500">
73 <Rectangle Width="100" Height="100" Canvas.Top="100" Canvas.Left="100" Fill="blue"/>
74 <Rectangle Width="100" Height="100" Canvas.Top="150" Canvas.Left="150" Fill="yellow"/>
75 <Rectangle Width="100" Height="100" Canvas.Top="200" Canvas.Left="200" Fill="green"/>
77 <!-- Reverse the order to illustrate z-index layering -->
79 <Rectangle Width="100" Height="100" Canvas.Top="300" Canvas.Left="200" Fill="green"/>
80 <Rectangle Width="100" Height="100" Canvas.Top="350" Canvas.Left="150" Fill="yellow"/>
81 <Rectangle Width="100" Height="100" Canvas.Top="400" Canvas.Left="100" Fill="blue"/>
85 <Paragraph Style="{StaticResource SubHeaderStyle}">Creating a Canvas in "XAML"</Paragraph>
86 <Paragraph Style="{StaticResource mainContentStyle}">A Canvas can be instantiated simply by using "XAML".</Paragraph>
88 <Paragraph Style="{StaticResource mainContentStyle}">The following markup example demonstrates how to use Canvas 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.</Paragraph>
90 <Paragraph Style="{StaticResource CodeSnippetParagraph}" xml:space="preserve">
91 <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
92 <Canvas Height="600" Width="800">
93 <Canvas Height="100" Width="100" Top="0" Left="0">
94 <Rectangle Width="100" Height="100" Fill="red"/>
96 <Canvas Height="100" Width="100" Top="100" Left="100">
97 <Rectangle Width="100" Height="100" Fill="green"/>
99 <Canvas Height="100" Width="100" Top="50" Left="50">
100 <Rectangle Width="100" Height="100" Fill="blue"/>
105 <Paragraph Style="{StaticResource noteParagraph}"><Bold>Note:</Bold> The Canvas element does not automatically produce scrollbars, even if its assigned width and height are greater than the available screen space. To render scrollbars, wrap the project in its entirety within a ScrollViewer element.</Paragraph>
106 <Paragraph Style="{StaticResource SubHeaderStyle}">Creating a Canvas in Code</Paragraph>
107 <Paragraph Style="{StaticResource mainContentStyle}">The following code example shows how to instantiate and use a Canvas using C#. Two TextBlock elements are absolutely positioned using the SetTop and SetLeft methods of the Canvas. The Canvas is assigned a Background color of LightSteelBlue.</Paragraph>
109 <Paragraph Style="{StaticResource CodeSnippetParagraph}" xml:space="preserve">
111 using System.Windows;
112 using System.Windows.Controls;
113 using System.Windows.Media;
114 using System.Threading;
116 namespace Canvas_Demo
118 public class app : System.Windows.Application
120 System.Windows.Controls.TextBlock txt1;
121 System.Windows.Controls.Canvas canvas;
122 System.Windows.Controls.TextBlock txt2;
123 System.Windows.Window mainWindow;
125 protected override void OnStartingUp (StartingUpCancelEventArgs e)
127 base.OnStartingUp(e);
128 CreateAndShowMainWindow();
131 private void CreateAndShowMainWindow()
133 // Create the application's main window
134 mainWindow = new System.Windows.Window();
136 // Create a canvas sized to fill the window
137 canvas = new Canvas();
138 canvas.Background = System.Windows.Media.Brushes.LightSteelBlue;
140 // Add a "Hello World!" text element to the Canvas
141 txt1 = new System.Windows.Controls.TextBlock();
143 txt1.Text = "Hello World!";
144 System.Windows.Controls.Canvas.SetTop(txt1, 100);
145 System.Windows.Controls.Canvas.SetLeft(txt1, 10);
146 canvas.Children.Add(txt1);
148 // Add a second text element to show how absolute positioning works in a Canvas
149 txt2 = new System.Windows.Controls.TextBlock();
151 txt2.Text = "Isn't absolute positioning handy?";
152 System.Windows.Controls.Canvas.SetTop(txt2, 200);
153 System.Windows.Controls.Canvas.SetLeft(txt2, 75);
154 canvas.Children.Add(txt2);
156 mainWindow.Content= canvas;
161 internal sealed class EntryClass
164 private static void Main ()
166 app app = new app ();
173 <Paragraph Style="{StaticResource mainContentStyle}">Send comments about this topic to Microsoft. © Microsoft Corporation. All rights reserved.</Paragraph>
177 </FlowDocumentPageViewer>
182 <TabItem Name="xamlcsharp" Style="{StaticResource TabStyle}" Header="XAML + C#">
183 <TabControl TabStripPlacement="Right">
184 <TabItem Name="xcsharpCheck" Style="{StaticResource TabStyle2}" Header="XAML"></TabItem>
185 <TabItem Style="{StaticResource TabStyle2}" Header="C#"></TabItem>
189 <TabItem Name="xamlvb" Style="{StaticResource TabStyle}" Header="XAML + Visual Basic.NET">
190 <TabControl TabStripPlacement="Right">
191 <TabItem Name="xvbCheck" Style="{StaticResource TabStyle2}" Header="XAML"></TabItem>
192 <TabItem Style="{StaticResource TabStyle2}" Header="VB.NET"></TabItem>
196 <TabItem Name="csharp" Style="{StaticResource TabStyle}" Header="C#"></TabItem>
198 <TabItem Name="vb" Style="{StaticResource TabStyle}" Header="Visual Basic.NET"></TabItem>
200 <TabItem Name="managedcpp" Style="{StaticResource TabStyle}" Header="Managed C++"></TabItem>
202 <TabItem Style="{StaticResource TabStyle}" Header="Preview Sample">
204 <FlowDocumentPageViewer>
207 <Paragraph Style="{StaticResource HeaderStyle}">Canvas Overview</Paragraph>
208 <Paragraph><Rectangle Fill="Black" Height="1" Width="500" HorizontalAlignment="Left" /><LineBreak/></Paragraph>
210 <Paragraph Style="{StaticResource DisStyle}">[This topic is pre-release documentation and is subject to change in future releases. Blank topics are included as placeholders.]<LineBreak/></Paragraph>
211 <Paragraph Style="{StaticResource mainContentStyle}">The Canvas element is used to position content according to absolute x- and y-coordinates. Canvas provides ultimate flexibility for positioning and arranging elements on the screen. Elements can be drawn in a unique location, or in the event that elements occupy the same coordinates, the order in which they appear in markup determines the order in which elements are drawn.</Paragraph>
213 <Paragraph Style="{StaticResource mainContentStyle}">This topic contains the following sections.</Paragraph>
217 <ListItem><Paragraph Style="{StaticResource mainContentStyle}">What Can I Do with the Canvas?</Paragraph></ListItem>
218 <ListItem><Paragraph Style="{StaticResource mainContentStyle}">Adding a Border to a Canvas Element</Paragraph></ListItem>
219 <ListItem><Paragraph Style="{StaticResource mainContentStyle}">Order of Elements in a Canvas</Paragraph></ListItem>
220 <ListItem><Paragraph Style="{StaticResource mainContentStyle}">Creating a Canvas in "XAML"</Paragraph></ListItem>
221 <ListItem><Paragraph Style="{StaticResource mainContentStyle}">Creating a Canvas in Code</Paragraph></ListItem>
225 <Paragraph Style="{StaticResource SubHeaderStyle}">What Can I Do with the Canvas?</Paragraph>
226 <Paragraph Style="{StaticResource mainContentStyle}">Canvas provides the most flexible layout support of any Panel element. Height and Width properties are used to define the area of the canvas, and elements inside are assigned absolute coordinates relative to the upper left corner of the parent Canvas. This allows you to position and arrange elements precisely where you want them on the screen.</Paragraph>
228 <Paragraph Style="{StaticResource SubHeaderStyle}">Adding a Border to a Canvas Element</Paragraph>
229 <Paragraph Style="{StaticResource mainContentStyle}">In order for a Canvas element to have a border, it must be encapsulated within a Border element.</Paragraph>
231 <Paragraph Style="{StaticResource mainContentStyle}">The following code example shows how to display Hello World within a Canvas with a border and background.</Paragraph>
232 <Paragraph Style="{StaticResource CodeSnippetParagraph}" xml:space="preserve">
233 <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
237 Background="LightGray"
238 HorizontalAlignment="Left"
239 VerticalAlignment="Top"
243 <TextBlock Canvas.Top="10" Canvas.Left="20">Hello World!</TextBlock>
248 <Paragraph Style="{StaticResource SubHeaderStyle}">Order of Elements in a Canvas</Paragraph>
249 <Paragraph Style="{StaticResource mainContentStyle}">The order of child elements (z-index) in a Canvas is determined by their order in "Extensible Application Markup Language" ("XAML") or code. As a consequence, layered order can be achieved when elements share the same coordinates. Canvas and Grid are the only layout controls that supports sharing of space in this manner.</Paragraph>
251 <Paragraph Style="{StaticResource mainContentStyle}">The following example demonstrates how to achieve layered order of elements within a Canvas. Notice that each Rectangle element is drawn in the order it appears in "XAML".</Paragraph>
253 <Paragraph Style="{StaticResource CodeSnippetParagraph}" xml:space="preserve">
254 <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
255 <Canvas Width="500" Height="500">
256 <Rectangle Width="100" Height="100" Canvas.Top="100" Canvas.Left="100" Fill="blue"/>
257 <Rectangle Width="100" Height="100" Canvas.Top="150" Canvas.Left="150" Fill="yellow"/>
258 <Rectangle Width="100" Height="100" Canvas.Top="200" Canvas.Left="200" Fill="green"/>
260 <!-- Reverse the order to illustrate z-index layering -->
262 <Rectangle Width="100" Height="100" Canvas.Top="300" Canvas.Left="200" Fill="green"/>
263 <Rectangle Width="100" Height="100" Canvas.Top="350" Canvas.Left="150" Fill="yellow"/>
264 <Rectangle Width="100" Height="100" Canvas.Top="400" Canvas.Left="100" Fill="blue"/>
268 <Paragraph Style="{StaticResource SubHeaderStyle}">Creating a Canvas in "XAML"</Paragraph>
269 <Paragraph Style="{StaticResource mainContentStyle}">A Canvas can be instantiated simply by using "XAML".</Paragraph>
271 <Paragraph Style="{StaticResource mainContentStyle}">The following markup example demonstrates how to use Canvas 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.</Paragraph>
273 <Paragraph Style="{StaticResource CodeSnippetParagraph}" xml:space="preserve">
274 <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
275 <Canvas Height="600" Width="800">
276 <Canvas Height="100" Width="100" Top="0" Left="0">
277 <Rectangle Width="100" Height="100" Fill="red"/>
279 <Canvas Height="100" Width="100" Top="100" Left="100">
280 <Rectangle Width="100" Height="100" Fill="green"/>
282 <Canvas Height="100" Width="100" Top="50" Left="50">
283 <Rectangle Width="100" Height="100" Fill="blue"/>
288 <Paragraph Style="{StaticResource noteParagraph}"><Bold>Note:</Bold> The Canvas element does not automatically produce scrollbars, even if its assigned width and height are greater than the available screen space. To render scrollbars, wrap the project in its entirety within a ScrollViewer element.</Paragraph>
289 <Paragraph Style="{StaticResource SubHeaderStyle}">Creating a Canvas in Code</Paragraph>
290 <Paragraph Style="{StaticResource mainContentStyle}">The following code example shows how to instantiate and use a Canvas using C#. Two TextBlock elements are absolutely positioned using the SetTop and SetLeft methods of the Canvas. The Canvas is assigned a Background color of LightSteelBlue.</Paragraph>
292 <Paragraph Style="{StaticResource CodeSnippetParagraph}" xml:space="preserve">
294 using System.Windows;
295 using System.Windows.Controls;
296 using System.Windows.Media;
297 using System.Threading;
299 namespace Canvas_Demo
301 public class app : System.Windows.Application
303 System.Windows.Controls.TextBlock txt1;
304 System.Windows.Controls.Canvas canvas;
305 System.Windows.Controls.TextBlock txt2;
306 System.Windows.Window mainWindow;
308 protected override void OnStartingUp (StartingUpCancelEventArgs e)
310 base.OnStartingUp(e);
311 CreateAndShowMainWindow();
314 private void CreateAndShowMainWindow()
316 // Create the application's main window
317 mainWindow = new System.Windows.Window();
319 // Create a canvas sized to fill the window
320 canvas = new Canvas();
321 canvas.Background = System.Windows.Media.Brushes.LightSteelBlue;
323 // Add a "Hello World!" text element to the Canvas
324 txt1 = new System.Windows.Controls.TextBlock();
326 txt1.Text = "Hello World!";
327 System.Windows.Controls.Canvas.SetTop(txt1, 100);
328 System.Windows.Controls.Canvas.SetLeft(txt1, 10);
329 canvas.Children.Add(txt1);
331 // Add a second text element to show how absolute positioning works in a Canvas
332 txt2 = new System.Windows.Controls.TextBlock();
334 txt2.Text = "Isn't absolute positioning handy?";
335 System.Windows.Controls.Canvas.SetTop(txt2, 200);
336 System.Windows.Controls.Canvas.SetLeft(txt2, 75);
337 canvas.Children.Add(txt2);
339 mainWindow.Content= canvas;
344 internal sealed class EntryClass
347 private static void Main ()
349 app app = new app ();
356 <Paragraph Style="{StaticResource mainContentStyle}">Send comments about this topic to Microsoft. © Microsoft Corporation. All rights reserved.</Paragraph>
360 </FlowDocumentPageViewer>