This describes situations where the layout system has

Info icon This preview shows pages 768–770. Sign up to view the full content.

View Full Document Right Arrow Icon
—this describes situations where the layout system has to make things fit a predetermined space, rather than trying to work out how much space is required. Most user interfaces contain a mixture of constrained and unconstrained layout—the top level of the UI is usually constrained by window size, but you might have individual elements such as text blocks or buttons that have to be large enough to display their content. When elements that have no intrinsic size are put in a constrained lay- out, they will fill the space available if you don’t set the width and height. For example, if you put an Ellipse as the only element of the root Grid layout element, and you don’t set any of the width or height prop- erties, it will fill the whole Silverlight application UI. You can even get a mixture of constrained and unconstrained layouts on one element. In Figure 20-3 , we saw a vertical stack of elements, and vertically, each one’s size was based on its content—since the elements are free to size themselves it means we have unconstrained layout vertically. But the elements are all the same width regardless of content, indicating that constrained layout was in use horizontally. Stack panels always work this way—children are unconstrained in the direction of stacking, but are con- strained to have the same sized layout slots in the other direction. When an element has more space than it needs due to constrained layout, additional properties that determine what the element does with the excess space come into play. The HorizontalAlignment attribute lets you position the element within its slot. Exam- ple 20-7 shows a modified version of Example 20-5 , specifying each of the four HorizontalAlignment options. Example 20-7. Horizontal alignment <StackPanel Orientation="Vertical"> <Button Content="Buttons" FontSize="30" HorizontalAlignment="Left" /> <Button Content="in" HorizontalAlignment="Right" /> <Button Content="a" HorizontalAlignment="Stretch" /> <Button Content="stack" HorizontalAlignment="Center" /> </StackPanel> 744 | Chapter 20: WPF and Silverlight
Image of page 768

Info icon This preview has intentionally blurred sections. Sign up to view the full version.

View Full Document Right Arrow Icon
Figure 20-5 shows the results. As before, each child has been given a layout slot that fills the whole width of the StackPanel , but all except the third row have been sized to content, and have then positioned themselves within their slot based on the HorizontalAlignment property. The third button still fills the whole of its row because its alignment is Stretch . That’s the default, which is why elements fill their whole layout slot unless you specify an alignment. VerticalAlignment works in much the same way, offering Top , Bottom , Center , and Stretch . Figure 20-5. Horizontal alignment The alignment properties do something only when the layout slot is larger than the element requires. When an element has been given a slot exactly as large as it asked for in either the horizontal or vertical dimen- sion, the corresponding alignment property does nothing. So setting VerticalAlignment on the child of a vertical StackPanel does nothing—
Image of page 769
Image of page 770
This is the end of the preview. Sign up to access the rest of the document.

{[ snackBarMessage ]}

What students are saying

  • Left Quote Icon

    As a current student on this bumpy collegiate pathway, I stumbled upon Course Hero, where I can find study resources for nearly all my courses, get online help from tutors 24/7, and even share my old projects, papers, and lecture notes with other students.

    Student Picture

    Kiran Temple University Fox School of Business ‘17, Course Hero Intern

  • Left Quote Icon

    I cannot even describe how much Course Hero helped me this summer. It’s truly become something I can always rely on and help me. In the end, I was not only able to survive summer classes, but I was able to thrive thanks to Course Hero.

    Student Picture

    Dana University of Pennsylvania ‘17, Course Hero Intern

  • Left Quote Icon

    The ability to access any university’s resources through Course Hero proved invaluable in my case. I was behind on Tulane coursework and actually used UCLA’s materials to help me move forward and get everything together on time.

    Student Picture

    Jill Tulane University ‘16, Course Hero Intern