WPF Expander

Last Friday I discussed the GroupBox as a way to organize and sets of controls into distinct groups. There are several controls that will allow you to group controls, so today I’d like to highlight another named the Expander.

The expander is a nifty control that will allow you to show and hide the controls you place on it. Let’s start by putting an Expander control onto a Window. Inside we’ll add a StackPanel, and in it I’ll copy a couple of the RadioButtons from last week’s examples.

<Expander>

    <StackPanel>

      <RadioButton GroupName=One IsChecked=True>Option 1</RadioButton>

      <RadioButton GroupName=One IsChecked=False>Option 2</RadioButton>

    </StackPanel>

  </Expander>

wpf049

Sort of uninspiring, just that button sitting there. But click it and the magic happens.

wpf050

The arrow is nice, but it’d be nice to know what the expander is supposed to do. To that end the Header property is provided. Let’s expand our example with a second Expander control.

  <StackPanel>

    <Expander>

      <StackPanel>

        <RadioButton GroupName=One IsChecked=True>Option 1</RadioButton>

        <RadioButton GroupName=One IsChecked=False>Option 2</RadioButton>

      </StackPanel>

    </Expander>

    <Expander Header=Expander Header>

      <StackPanel>

        <TextBlock>Here is some instructional text for your viewing pleasure.</TextBlock>

        <CheckBox>Check me out!</CheckBox>

      </StackPanel>

    </Expander>

  </StackPanel>

wpf051

Here you can see the group header named “Expander Header”. You may notice, however, that the text scrolls off the side of the screen. That’s easy enough to fix though, all we have to do is add TextWrapping=Wrap” to the TextBlock, which you’ll see in the next sample.

Speaking of which, you may decide there are times when you want to have the Expander control already open when the dialog appears. The most common scenario would be with additional instructions for the user. Perhaps your program has modes for new users and experts. In “new user” mode, you want these to appear already expanded, but in “expert” mode they should not appear. Easy enough to achieve with the IsExpanded property.

  <StackPanel>

    <Expander>

      <StackPanel Margin=15,3,1,1>

        <RadioButton GroupName=One IsChecked=True>Option 1</RadioButton>

        <RadioButton GroupName=One IsChecked=False>Option 2</RadioButton>

      </StackPanel>

    </Expander>

    <Expander Header=Expander Header>

      <StackPanel>

        <TextBlock TextWrapping=Wrap>Here is some instructional text for your viewing pleasure.</TextBlock>

        <CheckBox>Check me out!</CheckBox>

      </StackPanel>

    </Expander>

    <Expander IsExpanded=True Header=Expanded to start with>

      <TextBlock TextWrapping=Wrap>Expanded using the IsExpanded property</TextBlock>

    </Expander>

  </StackPanel>

Here is the dialog, just as it appears to the user when it’s first run.

wpf052

Play around with the other two headers as well. You’ll notice I added a Margin tag to the first group, to bump the options over a bit and make them look a little nicer. I also added the TextWrapping tags to the various TextBlocks.

Finally, you may not always want the Expander to expand down. Fear not, it’s possible to have the expansion go to the right, left, or up via the ExpandDirection tag. Getting it to look right, however, is not a straight forward task. Let’s take a look at what I want to achieve.

wpf053

As you can see, I have a button, and to the right of the button is the expander control, with the ExpandDirection set to Right. You might think you could just drop them into a Horizontally aligned StackPanel, but it won’t work. The StackPanel just expands to take up the room it needs, even if that means going off the edge of the form. The TextWrapping property then of the TextBlock is useless, since it’s container, the StackPanel, seems to be wide enough. It’s not looking at the Window.

There are a couple of ways we could solve this, such as tieing the width of the StackPanel to the Window. But the most straightforward way is to not use the StackPanel at all, but instead to use a Grid.  

  <StackPanel>

    <!–First 3 Expanders omitted for brevity–>

    <Grid>

      <Grid.ColumnDefinitions>

        <ColumnDefinition Width=47></ColumnDefinition>

        <ColumnDefinition></ColumnDefinition>

      </Grid.ColumnDefinitions>

      <Grid.RowDefinitions>

        <RowDefinition></RowDefinition>

      </Grid.RowDefinitions>

      <Button Grid.Column=0 Height=25 VerticalAlignment=Top HorizontalAlignment=Left>Button</Button>

      <Expander Grid.Column=1 ExpandDirection=Right>

        <TextBlock TextWrapping=Wrap Margin=5,3,3,3>Expanded to the right using the ExpandDirection property gives interesting possibilities</TextBlock>

      </Expander>

    </Grid>

    <TextBlock>Some text just below the Right Expander</TextBlock>

  </StackPanel>

Here you can see a grid with one row and two columns. Note in the grid, I’ve fixed the width of the first column to be a good size for the button. If that’s not done, the Grid will keep changing size as the Window changes, and thus changing the button width which gets rather disconcerting to the user, who typically expects buttons to remain a constant size.

In addition, in the Button control I set a fixed height, again to avoid the resize issue. I’ve also set the alignment to the upper left, otherwise the button will move around as the Expander is opened and closed.

Now for the heart of all this, in the Expander control I set the ExpandDirection to Right, so it will go in the direction I want.

Within the TextBlock I added a slight margin to the TextBlock, to make it appear a little nicer. Finally I put another TextBlock under the Grid in the StackPanel, just so you could see it move up and down with the Expander.

Expander controls have a lot of possibilities with WPF. I’ve already mentioned the instructions scenario for new / expert users. They could also be used to hide seldom used options. Expression Blend uses these over in the properties window. If you come up with new design possibilities for this control, feel free to post a comment and let us know what you came up with.

About these ads

3 Responses to “WPF Expander”

  1. WPF Expander Says:

    [...] arcanecode Blogged something interesting today on arcanecode.wordpress.comRead this summary…. [...]

  2. Jon Says:

    So… how do I make the expander actually resize the window to grow/shrink?
    I tried catching Expanded/Collapsed events and expanding the window by getting the bottom/right corner of the expander, but it appears that the bot/right of the expander is always the expanded size (or at least, hasn’t shrunk yet when the Collapsed event is fired).

  3. K Says:

    Is there a way to resize the window whenever an expander is expanded/collapsed?


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 101 other followers

%d bloggers like this: