1 Layout Basics 2 Layout Controls 3 Layout

  • Slides: 26
Download presentation

1. Layout Basics 2. Layout Controls 3. Layout Hierarchy 4. Stack. Panel 5. Wrap.

1. Layout Basics 2. Layout Controls 3. Layout Hierarchy 4. Stack. Panel 5. Wrap. Panel Layout and Panels 1. Dock. Panel 2. Canvas 3. Grid 4. Uniform. Grid Panel

Layout Controls : פופולאריים Layout ישנם חמישה רכיבי Stack Panel . 1 Wrap Panel

Layout Controls : פופולאריים Layout ישנם חמישה רכיבי Stack Panel . 1 Wrap Panel . 2 Dock Panel . 3 Canvas Panel . 4 Grid Panel . 5 . 1

Stack. Panel <Stack. Panel> <Button <Button </Stack. Panel> : דוגמת קוד – סידור אנכי

Stack. Panel <Stack. Panel> <Button <Button </Stack. Panel> : דוגמת קוד – סידור אנכי Content="Click Content="Click me me me 1" 2" 3" 4" 5" Font. Size="25"></Button>

Stack. Panel : דוגמת קוד – סידור אופקי <Stack. Panel Orientation="Horizontal"> <Button Content="Click me

Stack. Panel : דוגמת קוד – סידור אופקי <Stack. Panel Orientation="Horizontal"> <Button Content="Click me 1" <Button Content="Click me 2" <Button Content="Click me 3" <Button Content="Click me 4" <Button Content="Click me 5" </Stack. Panel> Font. Size="25"></Button>

Stack. Panel נוספים ולא רק Layout יכול להכיל רכיבי Stack. Panel גם Layout -

Stack. Panel נוספים ולא רק Layout יכול להכיל רכיבי Stack. Panel גם Layout - כמו כל רכיבי ה : פקדים <Stack. Panel > <Button Content="Click me 1" Font. Size="25"></Button> <Button Content="Click me 2" Font. Size="25"></Button> <Button Content="Click me 3" Font. Size="25"></Button> <Button Content="Click me 4" Font. Size="25"></Button> <Stack. Panel Orientation="Horizontal" Horizontal. Alignment="Center"> <Button Content="Click me 1" Font. Size="25"></Button> <Button Content="Click me 2" Font. Size="25"></Button> <Button Content="Click me 3" Font. Size="25"></Button> <Button Content="Click me 4" Font. Size="25"></Button> </Stack. Panel> <Button Content="Click me 5" Font. Size="25"></Button> <Button Content="Click me 6" Font. Size="25"></Button> </Stack. Panel> : דוגמת קוד Nested. Stack. Panel. Sample

Wrap Panel <Wrap. Panel> <Button. . . <Button </Wrap. Panel> Content="Click me 1" Font.

Wrap Panel <Wrap. Panel> <Button. . . <Button </Wrap. Panel> Content="Click me 1" Font. Size="25"></Button> Content="Click me 2" Font. Size="25"></Button> Content="Click me 3" Font. Size="25"></Button> Content="Click me 8" Font. Size="25"></Button> Content="Click me 9" Font. Size="25"></Button> Content="Click me 10" Font. Size="25"></Button> : דוגמת קוד

Wrap Panel

Wrap Panel

Wrap Panel <Wrap. Panel Orientation="Vertical"> <Button Content="Click me. . . <Button Content="Click me </Wrap.

Wrap Panel <Wrap. Panel Orientation="Vertical"> <Button Content="Click me. . . <Button Content="Click me </Wrap. Panel> : סידור אנכי - דוגמת קוד 1" Font. Size="25"></Button> 2" Font. Size="25"></Button> 3" Font. Size="25"></Button> 8" Font. Size="25"></Button> 9" Font. Size="25"></Button> 10" Font. Size="25"></Button>

Dock Panel : דוגמת קוד <Dock. Panel> <Button Dock. Panel. Dock="Top" Content="Click me 1"

Dock Panel : דוגמת קוד <Dock. Panel> <Button Dock. Panel. Dock="Top" Content="Click me 1" Font. Size="25"></Button> <Button Dock. Panel. Dock="Top" Content="Click me 2" Font. Size="25"></Button> <Button Dock. Panel. Dock="Bottom" Content="Click me 3" Font. Size="25"></Button> <Button Dock. Panel. Dock="Right" Content="Click me 4" Font. Size="25"></Button> <Button Dock. Panel. Dock="Left" Content="Click me 5" Font. Size="25"></Button> <Button Content="Click me 6" Font. Size="25"></Button> </Dock. Panel>

Dock Panel

Dock Panel

Canvas Panel <Canvas Background="Alice. Blue"> <Button Content="Click me <Button Content="Click me Panel. ZIndex="50"></Button> התנגשות

Canvas Panel <Canvas Background="Alice. Blue"> <Button Content="Click me <Button Content="Click me Panel. ZIndex="50"></Button> התנגשות בהגדרת </Canvas> מיקום Zindex : דוגמת קוד 1" 2" 3" 4" 5" 6" Font. Size="25" 7" Font. Size="25" Canvas. Top="10" Canvas. Left="150" ></Button> Canvas. Top="70" Canvas. Left="350"></Button> Canvas. Top="150" Canvas. Left="250"></Button> Canvas. Top="250" Canvas. Left="300"></Button> Canvas. Top="200" Canvas. Left="50" Panel. ZIndex="60"></Button> Canvas. Top="210" Canvas. Left="120" Canvas. Top="0" Canvas. Left="0" Canvas. Bottom="200" Canvas. Right="200"

Canvas Panel

Canvas Panel

Grid Panel : Rows - דוגמת קוד ראשונה – שימוש רק ב <Grid> Grid-

Grid Panel : Rows - דוגמת קוד ראשונה – שימוש רק ב <Grid> Grid- הגדרת ה <Grid. Row. Definitions> קביעת מיקום <Row. Definition Height="75"></Row. Definition> Grid- הפקדים ב <Row. Definition Height="Auto"></Row. Definition> <Row. Definition Height="*"></Row. Definition> </Grid. Row. Definitions> <Button Grid. Row="0" Content="Click me 1" Font. Size="25"></Button> <Button Grid. Row="1" Content="Click me 2" Font. Size="25"></Button> <Button Grid. Row="2" Content="Click me 3" Font. Size="25"></Button> </Grid> Grid. Sample 01 : דוגמת קוד

Grid Panel <Grid> : Columns- וב Rows - דוגמת קוד ראשונה – שימוש ב

Grid Panel <Grid> : Columns- וב Rows - דוגמת קוד ראשונה – שימוש ב <Grid. Row. Definitions> <Row. Definition Height="75"></Row. Definition> <Row. Definition Height="Auto"></Row. Definition> <Row. Definition Height="*"></Row. Definition> </Grid. Row. Definitions> <Grid. Column. Definitions> <Column. Definition Width="175"></Column. Definition> <Column. Definition Width="Auto"></Column. Definition> <Column. Definition Width="*"></Column. Definition> </Grid. Column. Definitions> <Button Grid. Row="0" Grid. Column="0" Content="Click me 1" Font. Size="25"></Button> <Button Grid. Row="1" Grid. Column="0" Content="Click me 2" Font. Size="25"></Button> <Button Grid. Row="2" Grid. Column="0" Content="Click me 3" Font. Size="25"></Button> <Button Grid. Row="0" Grid. Column="1" Content="Click me 4" Font. Size="25"></Button> <Button Grid. Row="1" Grid. Column="1" Content="Click me 5" Font. Size="25"></Button> <Button Grid. Row="2" Grid. Column="1" Content="Click me 6" Font. Size="25"></Button> <Button Grid. Row="0" Grid. Column="2" Content="Click me 7" Font. Size="25"></Button> <Button Grid. Row="1" Grid. Column="2" Content="Click me 8" Font. Size="25"></Button> <Button Grid. Row="2" Grid. Column="2" Content="Click me 9" Font. Size="25"></Button> </Grid> Grid. Sample 02 : דוגמת קוד

Grid Panel Grid. Row. Span Grid. Column. Span - ו Grid. Row. Span Grid.

Grid Panel Grid. Row. Span Grid. Column. Span - ו Grid. Row. Span Grid. Column. Span <Grid> <Grid. Row. Definitions> <Row. Definition Height="75" ></Row. Definition> <Row. Definition Height="Auto" ></Row. Definition> <Row. Definition Height="*"></Row. Definition> </Grid. Row. Definitions> <Grid. Column. Definitions> <Column. Definition Width="175"></Column. Definition> <Column. Definition Width="Auto"></Column. Definition> <Column. Definition Width="*"></Column. Definition> </Grid. Column. Definitions> <Button Grid. Row="0" Grid. Column="0" Content="Click me 1" Font. Size="25"></Button> <Button Grid. Row="1" Grid. Column="0" Grid. Row. Span="2" Content="Click me 2" Font. Size="25"></Button> <Button Grid. Row="0" Grid. Column="1" Content="Click me 4" Grid. Column. Span="2" Font. Size="25"></Button> <Button Grid. Row="1" Grid. Column="1" Content="Click me 5" Font. Size="25"></Button> <Button Grid. Row="2" Grid. Column="1" Content="Click me 6" Font. Size="25"></Button> <Button Grid. Row="1" Grid. Column="2" Content="Click me 8" Font. Size="25"></Button> <Button Grid. Row="2" Grid. Column="2" Content="Click me 9" Font. Size="25"></Button> </Grid> Grid. Sample 03 : דוגמת קוד

Uniform. Grid Panel <Uniform. Grid> <Button <Button <Button </Uniform. Grid> : יהיו זהים בגודלם

Uniform. Grid Panel <Uniform. Grid> <Button <Button <Button </Uniform. Grid> : יהיו זהים בגודלם Grid- "אוטומטי" – כל התאים ב Grid § Content="Click Content="Click Content="Click Grid. Sample 04 : דוגמת קוד me me me 1" 2" 3" 4" 5" 6" 7" 8" 9" Font. Size="25"></Button> Font. Size="25"></Button>