I need an accordion control for WPF 4

Question

I am looking for an Accordion control for WPF .NET 4.

I am aware of the WPF Toolkit on Codeplex which has an accordion control, but states that it is compatible with .NET 3.5. Will it work in version 4?

Solution 1

Yes, the Accordion in the toolkit is fully compatible with .NET 4

Solution 2

We created a custom style for a ListBox with expanders as the section. This allowed us to customize the look and feel of the menu items by simply styling the Expander (i.e. summary buttons, red when invalid, etc.) Below is a code snippet that can serve as a starting point and you can customize it to fit your needs. Note: Binding IsExpanded with IsSelected makes it so that only one expander is open at a time, simply remove that if you want multiples to be open at a time.

        <Style x:Key="VerticalListBoxWithAutoScroll" TargetType="{x:Type ListBox}">
        <Setter Property="SnapsToDevicePixels" Value="true"/>
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
        <Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <Grid>
                        <ScrollViewer x:Name="scrollviewer">
                            <ScrollViewer.Template>
                                <ControlTemplate TargetType="{x:Type ScrollViewer}" >
                                    <Grid >

                                        <ScrollBar x:Name="PART_VerticalScrollBar" Orientation="Vertical" 
                                                           Value="{TemplateBinding VerticalOffset}"
                                                           Maximum="{TemplateBinding ScrollableHeight}"
                                                           ViewportSize="{TemplateBinding ViewportHeight}"
                                                           Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
                                                           Width="{Binding Width, ElementName=Panel}">
                                            <ScrollBar.Template>
                                                <ControlTemplate>
                                                    <Track x:Name="PART_Track">
                                                        <Track.DecreaseRepeatButton>
                                                            <RepeatButton Command="ScrollBar.PageUpCommand" 
                                                                          Background="White" BorderBrush="Transparent"/>
                                                        </Track.DecreaseRepeatButton>
                                                        <Track.IncreaseRepeatButton>
                                                            <RepeatButton Command="ScrollBar.PageDownCommand" 
                                                                          Background="White" BorderBrush="Transparent"/>
                                                        </Track.IncreaseRepeatButton>
                                                        <Track.Thumb>
                                                            <Thumb BorderBrush="Transparent" 
                                                                   Background="White" Opacity="0.8" />
                                                        </Track.Thumb>
                                                    </Track>
                                                </ControlTemplate>
                                            </ScrollBar.Template>
                                        </ScrollBar>
                                        <ScrollContentPresenter Height="Auto" VerticalAlignment="Center"/>
                                    </Grid>
                                </ControlTemplate>
                            </ScrollViewer.Template>
                            <ItemsPresenter/>
                        </ScrollViewer>
                        <Grid x:Name="Panel">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <RepeatButton Grid.Row="0" x:Name="LineUpButton" Height="30" Width="80" HorizontalAlignment="Center" Opacity="0" Visibility="Collapsed"
                                  Style="{StaticResource ScrollBarLineButton}"
                                  Content="M 0 8 L 8 8 L 4 0 Z"       
                                  Command="{x:Static ScrollBar.LineUpCommand}"       
                                  CommandTarget="{Binding ElementName=scrollviewer}"
                                  ClickMode="Hover" />
                            <RepeatButton Grid.Row="2" x:Name="LineDownButton" Height="30" Width="80" HorizontalAlignment="Center" Opacity="0" Visibility="Collapsed"
                                  Style="{StaticResource ScrollBarLineButton}"
                                  Content="M 0 0 L 4 8 L 8 0 Z" 
                                  Command="{x:Static ScrollBar.LineDownCommand}"       
                                  CommandTarget="{Binding ElementName=scrollviewer}"
                                  ClickMode="Hover"/>
                        </Grid>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsMouseOver" Value="True"/>
                                <Condition Property="ComputedVerticalScrollBarVisibility" SourceName="scrollviewer" Value="Visible"/>
                            </MultiTrigger.Conditions>
                            <MultiTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="LineUpButton" 
                                                         Storyboard.TargetProperty="Opacity" To="0.8" Duration="0:0:0.25"/>
                                        <DoubleAnimation Storyboard.TargetName="LineDownButton" 
                                                         Storyboard.TargetProperty="Opacity" To="0.8" Duration="0:0:0.25"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiTrigger.EnterActions>
                            <MultiTrigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="LineUpButton" 
                                                         Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.25"/>
                                        <DoubleAnimation Storyboard.TargetName="LineDownButton" 
                                                         Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.25"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiTrigger.ExitActions>
                            <Setter TargetName="LineUpButton" Property="Visibility" Value="Visible" />
                            <Setter TargetName="LineDownButton" Property="Visibility" Value="Visible" />
                        </MultiTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="ItemTemplate">
            <Setter.Value >
                <DataTemplate>
                    <StackPanel Background="White">
                        <Expander Content="{Binding}"  Width="Auto" Header="{Binding DisplayName}"
                              IsExpanded="{Binding IsSelected, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBoxItem}}}" >
                        </Expander>
                    </StackPanel>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Solution 3

Yes the Accordian control works with .NET 4. Here is an article that explains how to use it:

http://www.c-sharpcorner.com/uploadfile/dpatra/538/