![]() ![]() If your content is too large for the size of the content area, you can wrap the content a ScrollViewer to make the content area scrollable. If you need to, you can constrain the Height of the content and make the content scrollable. To specify the size of the expanded content area, set size dimensions on the content of the Expander. If you do, the control will reserve that space even when the content area is collapsed, which defeats the purpose of the Expander. The HorizontalAlignment of each Expander in the StackPanel is set to Stretch using a Style in the StackPanel Resources, and the width of the StackPanel determines the width of the Expander controls. Here, a series of related Expander controls are placed in a StackPanel. To prevent the control width from changing when expanded or collapsed, you can set an explicit width, or, if the control is the child of a Panel, set HorizontalAlignment to Stretch and let the layout panel control the sizing. If the content is wider than the header, the header width increases to match the content area when expanded, and shrinks when the content area is collapsed. It's important to use the correct techniques to control the size of the Expander to avoid undesirable appearance or behavior. Control the size of an Expanderīy default, the Header and Content areas automatically size to fit their contents. When you set these properties, the alignment applies only to the expanded content, not the header. You can align content by setting the HorizontalContentAlignment and VerticalContentAlignment properties on the Expander control. You can use complex, interactive UI as the content of the Expander, including nested Expander controls in the content of a parent Expander as shown here. For more details about setting the Content property, see the Remarks section of the ContentControl class. The Content property of an Expander can be any type of object, but is typically a string or UIElement. This example creates an Expander that looks like the previous illustration. The Content property defines the element that can be collapsed and expanded. The Header property defines the element that is always visible. This example shows how to create a simple Expander with the default styling. Get the app from the Microsoft Store or get the source code on GitHub The WinUI 3 Gallery app includes interactive examples of most WinUI 3 controls, features, and functionality. Open the WinUI 3 Gallery app and see the Expander in action. Hiding the secondary content until it's needed can also help to focus the user on the most important parts of your app. ![]() This UI is commonly used when display space is limited and when information or options can be grouped together. Use an Expander when some primary content should always be visible, but related secondary content may be hidden until needed. For example, you can use the control to show additional options for an item. The Expander can expand upwards or downwards.īoth the Header and Content areas can contain any content, from simple text to complex UI layouts. When the content area is expanded, it pushes other UI elements out of the way it does not overlay other UI. The user can expand and collapse the Content area, where secondary content is displayed, by interacting with the header. Items contained in the Header are always visible. The Expander control lets you show or hide less important content that's related to a piece of primary content that's always visible. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |