Telerik blogs

When designing an application a challenge that all user interfaces must contend with is available screen real estate.  While you want to maximize the information available to the user, you also want to avoid visual overload.  There are a variety of controls available that allow you to minimize the impact of options on a form.  For example, the RadioButtons below display three options for the user, but for each option you take up valuable screen real estate.  A ComboBox offers the same choices to the user when expanded, but takes up minimal space on the form when not being used. 

 

Radio Buttons
image

ComboBox collapsed
image

ComboBox expanded
image

 

If you use this same concept, but go beyond just a single option group then you have the basis of the RadExpander.  The RadExpander is a new control that was released with the most recent Service Pack (SP1) for the Q1 2009 WPF suite.  The expander control is a flexible control that helps you save space and achieve easier navigation. You can place the expander anywhere and embed any content inside the drop-down area. The Expander control also gives you the ability to modify it’s ExpandDirection to let you adjust the control as per your custom layout. 

 

Consider the application below, which allows a user to select and view an image.  Your primary requirement is to display the image at the largest size possible.  If you want to show additional information about the image, you are going to sacrifice screen real estate to do so.  With the RadExpander you can provide that information in an easily accessible way that takes up a minimum amount of space. 

image

<Grid >  
    <Image Margin="12,41,12,29" Stretch="Fill" Source="file:///C:/Pictures/butterfly.jpg" />  
    <Button Height="23" HorizontalAlignment="Right" Margin="0,12,12,0" VerticalAlignment="Top" Width="75">Open</Button>  
</Grid> 
 

Here is the same example where I have added the RadExpander to house some additional information.

image 

You will see that I am not using a large amount of the screen to display the Expander.  In the screenshot below, I am displaying some additional information about graphic.  This is just an example, but you should get a feeling for how powerful the RadExpander is.  I am housing a few TextBlocks and RadioButtons, but you are not limited in what you can use.

image

Here is the XAML

<Grid >  
    <Image Margin="12,41,12,29" Stretch="Fill" Source="file:///C:/Users/Public/Pictures/Sample Pictures/butterfly.jpg" />  
    <Button Height="23" HorizontalAlignment="Right" Margin="0,12,12,0" VerticalAlignment="Top" Width="75">Open</Button> 
 
    <telerik:RadExpander Background="White" Header="Advanced Options" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="10,10,0,0" Name="radExpander1" Width="245">  
            <telerik:RadExpander.Content>  
            <StackPanel Background="White">    
                <StackPanel>  
                <TextBlock Margin="5" Text="Path:"/>  
                    <TextBlock Text="c:\pictures\butterfly.jpg" />  
                </StackPanel>  
                <TextBlock Margin="5" Text="FileType"/>  
                <RadioButton Content=".GIF"></RadioButton>  
                <RadioButton Content=".JPG" IsChecked="True"></RadioButton>  
                <RadioButton Content=".PNG"></RadioButton>  
            </StackPanel>  
        </telerik:RadExpander.Content>  
        </telerik:RadExpander>  
</Grid> 

 

I would like to point out two very important points that you will need to know when using the RadExpander.

1. Pay attention to the height and width properties.  When working with the expander it will size appropriately to accommodate the content within the control.  If you set the height or width property you are limiting the RadExpander to that size.  For example, if you were to set the height of the control to 25 then when you attempt to expand the control it will already be at least that height and you will not see your options.  So if you want boundaries on size you can do so, but be attentive to the content you are placing in the expander.

2. By default the RadExpander is transparent, so in my XAML above, I set the background to White.  I needed it to be visible over the image that was being displayed.  So when you are using the Expander consider what it will be expanding over/under and make your coloring decisions accordingly.  In the screenshot below, I have removed the background color settings to show the transparency of the RadExpander.

image

 

So the RadExpander offers you a variety of opportunities for laying out your application design.  I hope you will give it a try. 


Comments

Comments are disabled in preview mode.