WPF Accordion VerticalAlignment bug

Using the Accordion control from the latest WPF toolkit i came across this issue. When an accordion control has its VerticalAlignment set to 'Stretch' the AccordionItems contained within it will no longer expand if the SelectionMode is set to 'One'. If the selection mode is set to 'ZeroOrOne' you get expansion after several attempts at clicking. If it is set to 'ZeroOrMore' some really funky stuff happens where accordion items go missing off the bottom of the screen!

Anyone found a solution for this problem?

Thanks!

回答1:

You can also set the Accordion SelectionSequence property to CollapseBeforeExpand.

This bug is due to timing problems of the expanding/collapsing animation of each accordion item (when both expanding and collapsing happens simultaneously) with the layout update of the Accordion which messes up the size available for expansion.

回答2:

An OK workaround is to bind the ActualHeight and ActualWidth to the parent element you want it to fill. This is a bit of a hack but it will work.

回答3:

First of all, I appologise for reactivate a very old topic but the following code can illustrate TerrorAustralis response.

The Part 1 ScrollViewer's Heigth property depends of the Accordion's ActualHeigth. To adjust in detail, you can change ConverterParameter value.

<UserControl ...
         xmlns:local="clr-namespace:MyProject.namespace.converters"
         xmlns:lTk="clr-namespace:System.Windows.Controls;assembly=DotNetProjects.Layout.Toolkit">
                <lTk:Accordion HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                    <lTk:Accordion.Resources>
                        <local:RemoveMarginConverter x:Key="RemoveMarginConverter"/>
                        <Style TargetType="lTk:AccordionItem">
                            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                        </Style>
                    </lTk:Accordion.Resources>
                    <lTk:AccordionItem Header="Part 1">
                        <ScrollViewer VerticalScrollBarVisibility="Auto" Background="White"
                                      Height="{Binding RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type lTk:Accordion}},
                                                Path=ActualHeight, Converter={StaticResource RemoveMarginConverter}, ConverterParameter=px50}">
<!-- Part 1 content -->
                        </ScrollViewer>
                    </lTk:AccordionItem>
                    <lTk:AccordionItem Header="Part 2">
                        <ScrollViewer VerticalScrollBarVisibility="Auto" Background="White">
<!-- Part 2 content -->
                        </ScrollViewer>
                    </lTk:AccordionItem>
                </lTk:Accordion>
</UserControl>

And the converter's code :

using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Data;

namespace MyProject.namespace.converters
{
    public class RemoveMarginConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            var val = System.Convert.ToInt32(value);
            var margin = System.Convert.ToInt32(parameter.ToString().Replace("px", ""));
            return val - margin;
        }
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}