Question

Hii,
I am creating a WPF aplication. My home page will look like the one I have shown in the image.
In which i will have following componenents:
1. Topbar
2. Left bar – slide down menu like accordion which will slide down on selection if it has any submenu items otherwise on selection it will show related form.
3. Main panel – in which i will open my child forms
4. Bottom bar.

I would prefer if i get already implemented application that i can reuse in my application, as I think this form is gonna take hell lot of time. And Also as I am new to WPF, I would love to have some guidance about following points

1. How to make a slide down accordion like menu in WPF, which are also supposed to have submenu in it. ex. Report menu – will have list of all reports in it, which will be displayed when you click on the reports menu. How can I accomplish this in WPF>

2. How to open child form in right side panel? What controls/components should I use in my form to host child forms?

3. Any sample applications, web references, or already implemented code will be of great help as I have very strict deadline and dont afford to spend much time in exploring.

Answer 1

Abandon full accordion functionality

If you can live without a full accordion, you could easily accomplish something similar to what you want by using a TabControl, with alternate layout (TabStripPlacement="Left").

See this question (the same as in my comments): Create Tabbed Sidebar with sections WPF

Existing Library

There are existing WPF control libraries with accordions:

• WPF Toolkit
• Telerik Rad controls – http://www.telerik.com/products/wpf.aspx (or silverlight/asp.net MVC, etc)
• Many others, most of them for money…

DIY

You can try using a TreeView to implement your accordion, too. You just need a few tricks up your sleeve to accomplish this:

First, you need to hide the tree-view buttons. They will mess up what we’re trying to accomplish. See this question – Treeview hide [+] [-] buttons

Second, you want to ensure that the IsExpanded property is set to true if a TreeViewItem or one of its children is selected, and set to false otherwise. You can do this with a IMultiValueConverter combined with a Style for TreeViewItem.

<Window x:Class="WpfApplication1.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="clr-namespace:WpfApplication1">

<!-- ... -->

<TreeView>
  <TreeView.Resources>
    <local:SelectedItemToIsChildConverter x:Key="isChildConverter" />
    <Style TargetType="{x:Type TreeViewItem}">
      <Style.Setters>
        <Setter Property="IsExpanded">
          <Setter.Value>
            <MultiBinding Converter="{StaticResource isChildConverter}">
              <Binding Path="SelectedItem"
                RelativeSource="{RelativeSource AncestorType={x:Type TreeView}}" />
              <Binding RelativeSource="{RelativeSource Self}" />
            </MultiBinding>
          </Setter.Value>
        </Setter>
      </Style.Setters>
    </Style>
  </TreeView.Resources>
  <!-- Children here, or set ItemsSource property via databinding -->
</TreeView>

Here’s the code for the converter, in separate CS file:

public class SelectedItemToIsChildConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        TreeViewItem selectedItem = values.Length > 0 ? values[0] as TreeViewItem : null;
        TreeViewItem targetItem = values.Length > 1 ? values[1] as TreeViewItem : null;

        if (targetItem == null)
            return false;

        TreeViewItem currentItem = selectedItem;
        while (currentItem != null)
        {
            if (currentItem == targetItem)
                return true;
            currentItem = currentItem.Parent as TreeViewItem;
        }

        return false;
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

After this, you would have to style it to make it look nice, and support animation.

Once this is all done, use a grid to split up your UI. Use data binding to show content on your main UI area, based off the selected tree view item.

Edit:

Actually, a tree view is a poor base for an accordion. I searched a bit for details on accordion controls, and it turns out that they tend to only have one level of hierarchy.

With this description in mind, it may be easier to use a DataGrid, and take advantage of the RowDetails to expand your accordion view.

Here’s a brief tutorial: http://www.wpftutorial.net/DataGrid.html#rowDetails

Just make sure most of the data grid features are disabled.