WPF controls, saving real estate

I开发者_JS百科'm pretty new to WPF and C# and am trying to help out on some GUI stuff for work. We basically have 3 sections, a LHS (left hand side) [section 1], a RHS that has a top and bottom section [section 2 and section 3]. Looks like this

1 | 2
1 | -
1 | 3

They want a way to shrink each section with a button click. Currently the | and - are spacer items and can be dragged (Edit: this is done using a gridsplitter which they don't like). I did a little research and saw there are expander items and accordion items. I didn't know if either could be used for this scenario, and what would be the least hassle. In trying each just a bit, some additional questions for the controls come to mind since I'm not familiar with them.

Expander: By shrinking section 1, would it make section 2 and 3 then take up the whole screen? Or can this only be done with an Accordion? Is it hard/easy to change the <> icons to +- icons? If so, any tutorial out there?

Accordion: Can the <> be changed to +-? If so, any tutorial out there? Can the default color of blue be changed?

TIA

---

An Expander sounds like a suitable option for your situation. Fortunately it's included with WPF out of the box, unlike the Accordion control. But I found this question related to the Accordion control and thought it'd be useful for you to check out.

To change the appearance of the Expander toggle button you'll want to modify its control template. Changing the template to display plus or minus instead of arrows isn't too tough. If you visit the link you'll see you're going to want to change ExpanderToggleButton portion of the template.

Since you just want to change from using the arrows to using plus/minus signs you can simply change the Path data for collasped/expanded arrow. You can look here for more infortmation on drawing simple shapes with path.

Here is an example of someone modifying the control template of the Expander. It's for a different tweek in appearance, but it should be useful should you decide to go this route.

EDIT:

Really simple example (without the change in ToggleButton appearance) to get an idea of how to collaspe and save real estate:

<Grid>
   <Grid.ColumnDefinitions>
       <ColumnDefinition Width="Auto" />
       <ColumnDefinition Width="Auto" />
   </Grid.ColunmDefinitions>
   <Grid.RowDefinitions>
       <RowDefinition Height="Auto" />
       <RowDefinition Height="Auto" />
   </Grid.RowDefinitions>
   <Expander Name="Section1" Grid.RowSpan="2" Grid.Colunm="0" ExpandDirection="Left">
       <!-- Stuff goes here -->
   </Expander>
   <Expander Name="Section2" Grid.RowSpan="0" Grid.Colunm="1" 
       <!-- Stuff goes here -->
   </Expander>
   <Expander Name="Section3" Grid.RowSpan="1" Grid.Colunm="0" 
       <!-- Stuff goes here -->
   </Expander>
</Grid>

---

You could use GridSplitter. The user can drag them to change the size. Not a click - a drag.

   <GridSplitter Grid.Row="1" Grid.Column="1" 
                  Width="3" Background="Purple" VerticalAlignment="Stretch" HorizontalAlignment="Center" ShowsPreview="False" >