WPF Layout Controls | ComponentOne
WPF Layout Controls / Accordion / QuickStart
In This Topic
    QuickStart
    In This Topic

    The following quick start guides the user how to create a simple application using Accordion. In this quick start, you'll create a new project in Visual Studio, add the Accordion control to your application, and then add content to content area of the Accordion control.

    Accordion for WPF control

    Setup the WPF application

    1. Create a new WPF Application in Visual Studio.
    2. Install the assembly using the Manage NuGet Packages.
    3. Open MainWindow.xaml and replace the existing XAML with the following code:
      XAML
      Copy Code 
      <Window x:Class="Accordion_quickstart.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Accordion_quickstart" xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
    </Grid>
</Window>
    4. Place the cursor between the <Grid></Grid> tags. Now, drag and drop the C1Accordion control from the ToolBox to the <Grid></Grid> tag of MainWindow.xaml. The reference assemblies get automatically added to the References and the code looks as shown below:
      XAML
      Copy Code 
      ````
<Grid>
<c1:C1Accordion></c1:C1Accordion>
</Grid>
````

    Add Controls to the Content Area

    1. Place your cursor between the <c1:C1Accordion> and</c1:C1Accordion> tags and press ENTER. Add the following code to add an Expander control to the Accordion pane.   
      XAML
      Copy Code 
      <!--Add first Expander control in Accordion pane.-->
<c1:C1Expander Header="Mail" IsExpanded="True">
</c1:C1Expander>

    2. Add items to the Expander, such as ListBox, Image and TextBlock controls as shown below:

      XAML
      Copy Code 
      <!--Add listbox items within Expander control.-->
                <ListBox>
                    <ListBoxItem>
                        <Grid>
                            <Image  Source="/Folder.png" HorizontalAlignment="Left" />
                            <TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" Text="All Items" TextWrapping="Wrap" Margin="16,0,0,0" Width="60" />
                        </Grid>
                    </ListBoxItem>
                    <ListBoxItem FontWeight="Bold" FontFamily="Portable User Interface">
                        <Grid>
                            <Image  Source="/Folder.png" HorizontalAlignment="Left" />
                            <TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" Text="Inbox (1)" TextWrapping="Wrap" Margin="16,0,0,0" Width="60" />
                        </Grid>
                    </ListBoxItem>
                    <ListBoxItem>
                        <Grid>
                            <Image Source="/Folder.png" HorizontalAlignment="Left" />
                            <TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" Text="Drafts" TextWrapping="Wrap" Margin="16,0,0,0" Width="60" />
                        </Grid>
                    </ListBoxItem>
                    <ListBoxItem>
                        <Grid>
                            <Image  Source="/Folder.png" HorizontalAlignment="Left" />
                            <TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" Text="Sent Items" TextWrapping="Wrap" Margin="16,0,0,0" Width="65" />
                        </Grid>
                    </ListBoxItem>
                    <ListViewItem>
                        <Grid>
                            <Image  Source="/Folder.png" HorizontalAlignment="Left" />
                            <TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" Text="Trash" TextWrapping="Wrap" Margin="16,0,0,0" Width="60" />
                        </Grid>
                    </ListViewItem>
                </ListBox>

    3. Add the second Expander to fill the Accordion pane.

      XAML
      Copy Code 
      <!--Add second Expander control in Accordion pane.-->          
            <c1:C1Expander Header="Tasks" IsExpanded="False">
                <!--Add listbox items within Expander control.-->
                <ListBox>
                    <ListBoxItem>
                        <Grid>
                            <Image Source="/Folder.png" HorizontalAlignment="Left" />
                            <TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" Text="All Tasks" TextWrapping="Wrap" Margin="16,0,0,0" Width="60" />
                        </Grid>
                    </ListBoxItem>
                    <ListBoxItem>
                        <Grid>
                            <Image  Source="/Folder.png" HorizontalAlignment="Left" />
                            <TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" Text="Completed Tasks" TextWrapping="Wrap" Margin="16,0,0,0" Width="94.724" />
                        </Grid>
                    </ListBoxItem>
                    <ListBoxItem>
                        <Grid>
                            <Image  Source="/Folder.png" HorizontalAlignment="Left" />
                            <TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" Text="Active Tasks" TextWrapping="Wrap" Margin="16,0,0,0" Width="87.324" />
                        </Grid>
                    </ListBoxItem>
                    <ListBoxItem>
                        <Grid>
                            <Image  Source="/Folder.png" HorizontalAlignment="Left" />
                            <TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" Text="Overdue Tasks" TextWrapping="Wrap" Margin="16,0,0,0" Width="88.462" />
                        </Grid>
                    </ListBoxItem>
                    <ListBoxItem>
                        <Grid>
                            <Image  Source="/Folder.png" HorizontalAlignment="Left" />
                            <TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" Text="By Category" TextWrapping="Wrap" Margin="16,0,0,0" Width="75" />
                        </Grid>
                    </ListBoxItem>
                </ListBox>
            </c1:C1Expander>
    4. Run the application to view how your application will appear at run time.