Introduction To WPF Expander Control

Introduction

Here we discuss how to use an Expander Control in WPF and how we create this control in JavaScript. First we look at JavaScript.

For this follow these steps:

Step1: First we create a table and two rows. In the first row we take a column (tdhead) in which we use the following controls like this:

<td id="tdhead" class="style1">
        <img id="img1" alt="" src="Image/Down%20Arrow.png" onclick="Show()" style="width: 17px" /><img id="img2" alt="" style="display:none; width:17px" src="Image/Up%20Arrow.png" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<asp:Image
            ID="Image1" runat="server" Height="10px" ImageUrl="~/Image/Desert.jpg"
            Width="10px" />
&nbsp;The Desert</td>

Here we take an Image folder, in which we specify our images.

Step2: In the second row we create a column (tdmain) in which we specify the matter.

<td id="tdmain" class="style1">The defining characteristic of a desert is that it is dry. Depending on its geographical location, the annual precipitation in a desert varies from half an inch to as much as 15 inches. Rainfall is usually very localized, and although it is frequently seasonal, it is difficult to predict when or where it will occur. At times in the Atacama Desert in Chile, years have passed with no measurable rainfall at all. However, that is not generally </td>

The output will be:

 

Step3: After that we specify the display property of tdmain is none as we can't see the Column. And the column will be visible when we click on the image button.

<td id="tdmain" style="display:none;" class="style1">The defining characteristic of a desert is that it is dry. Depending on its geographical location, the annual precipitation in a desert varies from half an inch to as much as 15 inches. Rainfall is usually very localized, and although it is frequently seasonal, it is difficult to predict when or where it will occur. At times in the Atacama Desert in Chile, years have passed with no measurable rainfall at all. However, that is not generally </td>

Step4: Now we write the code for the Image Button (img1):

Here we take another image in our program after the Image (img1) and set its display property to none.

<img id="img2" alt="" style="display:none; width:17px" src="Image/Up%20Arrow.png" />

After that we write a click event on img1:

<img id="img1" alt="" src="Image/Down%20Arrow.png" onclick="Show()" style="width: 17px" />
<script language="javascript" type="text/javascript">

   function Show()
    {
    if(document.getElementById('img1').src="Image/Down Arrow.png")
    {
    document.getElementById('tdmain').style.display='block';
    document.getElementById('img1').style.display='none';
    document.getElementById('img2').style.display='';
    }
    }
    </script>

Here we set the display property of the column (tdmain) and set the display property of the Images (img1, img2). By this img1 is not visible and img2 and the column will be visible like this:

 

Step5: After that we write the code for the img2 as we again want to hide the column on the click of the Up Arrow Image:

<img id="img2" alt="" style="display:none; width:17px" src="Image/Up%20Arrow.png" onclick="Show1()" />

function Show1()
    {
    document.getElementById('tdmain').style.display='none';
    document.getElementById('img1').style.display='';
    document.getElementById('img2').style.display='none';
    }

The Output Will be:

 

Now we write the example of Expander Control in WPF:

Step1: First we write the following control in the Grid:

    <Grid>
        <Expander Width="250" HorizontalContentAlignment="Stretch">
            <Expander.Header>
                <BulletDecorator>
                    <BulletDecorator.Bullet>
                        <Image Width="10" Source="Image\Desert.jpg"/>
                    </BulletDecorator.Bullet>
                    <TextBlock Margin="10,0,0,0" Height="20" Width="60">The Desert</TextBlock>
                </BulletDecorator>
            </Expander.Header>
            <Expander.Content>
                <ScrollViewer Height="50">
                    <TextBlock TextWrapping="Wrap">
                A desert is a landscape or region that receives an extremely low amount of precipitation, less than enough to support growth of most plants. Most deserts have an average annual precipitation of less than 400 millimetres (16 in).[1] A common definition distinguishes between true deserts, which receive less than 250 millimetres (10 in) of average annual precipitation, and semideserts or steppes, which receive between 250 millimetres (10 in) and 400 to 500 millimetres (16 to 20 in):   By Wikipedia
              </TextBlock>
                </ScrollViewer>
            </Expander.Content>
        </Expander>
    </Grid>

In this example we take a Expander Control, in which first we specify the  BulletDecorater, here we take an Image as a BulletDecoretor and set it in the header part of the Expander Control like this:

   <Grid>
        <Expander Width="250" HorizontalContentAlignment="Stretch">
            <Expander.Header>
                <BulletDecorator>
                    <BulletDecorator.Bullet>
                        <Image Width="10" Source="Image\Desert.jpg"/>
                    </BulletDecorator.Bullet>
                    <TextBlock Margin="10,0,0,0" Height="20" Width="60">The Desert</TextBlock>
                </BulletDecorator>
            </Expander.Header>
       </Expander>
  </Grid>

Now we write the code for the content part of the Expander control; here we take a ScrolliVewer in our program. It is useful to scroll the content. And here we take a TextBlock to show the content and set its TextWrapping property.

           <Expander.Content>
                <ScrollViewer Height="50">
                    <TextBlock TextWrapping="Wrap">
                A desert is a landscape or region that receives an extremely low amount of precipitation, less than enough to support growth of most plants. Most deserts have an average annual precipitation of less than 400 millimetres (16 in).[1] A common definition distinguishes between true deserts, which receive less than 250 millimetres (10 in) of average annual precipitation, and semideserts or steppes, which receive between 250 millimetres (10 in) and 400 to 500 millimetres (16 to 20 in):   By Wikipedia
              </TextBlock>
                </ScrollViewer>
            </Expander.Content>

The Output Will Be:

 

After that click on this: