Expander doesn't collapse

[Aldo]

Hi,
I'm using LayoutControl with DisplayMode="Expander", but when I collapse a group, its content doesn't resize, controls disappear but LayoutControl height doesn'tchange.

I tried to use a WrapPanel to contains controls but it's the same behavior.

Am I missing something ?

This is my XAML

<Grid Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Margin="5">
            <Grid.RowDefinitions>
                <RowDefinition Height="550"/>
            </Grid.RowDefinitions>
            <telerik:RadLayoutControl  Grid.Row="0" Grid.Column="0" Orientation="Vertical">
                <telerik:LayoutControlGroup DisplayMode="Expander" IsExpanded="True" IsExpandable="True" Header="{DynamicResource layTabAccAccountCausalsFlags}">
                    <WrapPanel>
                        <CheckBox HorizontalAlignment="Left" Margin="5,0,0,0" Height="20"  IsChecked="{Binding Causal.GeneralUse}" Content="{DynamicResource labTabAccAccountCausalsGenericUse}" Validation.ErrorTemplate="{StaticResource ErrorTemplate}"></CheckBox>
                        <CheckBox HorizontalAlignment="Left" Margin="5,0,0,0" Height="20"  IsChecked="{Binding Causal.IVAUse}" Content="{DynamicResource labTabAccAccountCausalsIVAUse}" Validation.ErrorTemplate="{StaticResource ErrorTemplate}"></CheckBox>
                        <CheckBox HorizontalAlignment="Left" Margin="5,0,0,0" Height="20"  IsChecked="{Binding Causal.CustomersUse}" Content="{DynamicResource labTabAccAccountCausalsCustomersUse}" Validation.ErrorTemplate="{StaticResource ErrorTemplate}"></CheckBox>
                        <CheckBox HorizontalAlignment="Left" Margin="5,0,0,0" Height="20"  IsChecked="{Binding Causal.SuppliersUse}" Content="{DynamicResource labTabAccAccountCausalsSuppliersUse}" Validation.ErrorTemplate="{StaticResource ErrorTemplate}"></CheckBox>
                        <CheckBox HorizontalAlignment="Left" Margin="5,0,0,0" Height="20"  IsChecked="{Binding Causal.ThirdPartsUse}" Content="{DynamicResource labTabAccAccountCausalsThirdPartsUse}" Validation.ErrorTemplate="{StaticResource ErrorTemplate}"></CheckBox>
                        <CheckBox HorizontalAlignment="Left" Margin="5,0,0,0" Height="20"  IsChecked="{Binding Causal.INTRAUse}" Content="{DynamicResource labTabAccAccountCausalsINTRAUse}" Validation.ErrorTemplate="{StaticResource ErrorTemplate}"></CheckBox>
                    </WrapPanel>
                </telerik:LayoutControlGroup>
                <telerik:LayoutControlGroup DisplayMode="Expander" Margin="3" IsExpanded="True" IsExpandable="True" Header="{DynamicResource layTabAccAccountCausalsIVA}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="150"/>
                            <ColumnDefinition Width="150*"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="40"/>
                            <RowDefinition Height="40"/>
                            <RowDefinition Height="40"/>
                        </Grid.RowDefinitions>
                        <Label Grid.Row="0" Grid.Column="0" Content="{DynamicResource labTabAccAccountCausalsSign}" Style="{StaticResource styleLabels}"/>
                        <StackPanel Orientation="Horizontal" Grid.Row="0" Grid.Column="1">
                            <telerik:RadRadioButton IsChecked="{Binding Causal.Sign, Converter={StaticResource boolToStringConverter}, ConverterParameter=D}" Content="{DynamicResource valGive}" Margin="3" Width="50" />
                            <telerik:RadRadioButton IsChecked="{Binding Causal.Sign, Converter={StaticResource boolToStringConverter}, ConverterParameter=A}" Content="{DynamicResource valHave}" Margin="3" Width="50"/>
                        </StackPanel>
                        <Label Grid.Row="1" Grid.Column="0" Content="{DynamicResource labTabAccAccountCausalsIVABookID}" Style="{StaticResource styleLabels}"/>

                        <Label Grid.Row="2" Grid.Column="0" Content="{DynamicResource labTabAccAccountCausalsIVASign}" Style="{StaticResource styleLabels}"/>
                        <StackPanel Orientation="Horizontal" Grid.Row="2" Grid.Column="1">
                            <telerik:RadRadioButton IsChecked="{Binding Causal.IVASign, Converter={StaticResource boolToStringConverter}, ConverterParameter=+}" Content="{DynamicResource valPlus}" Margin="3" Width="35" />
                            <telerik:RadRadioButton IsChecked="{Binding Causal.IVASign, Converter={StaticResource boolToStringConverter}, ConverterParameter=-}" Content="{DynamicResource valMinus}" Margin="3" Width="35"/>
                        </StackPanel>
                    </Grid>
                </telerik:LayoutControlGroup>
                <telerik:LayoutControlGroup DisplayMode="Expander" Margin="3" IsExpanded="True" IsExpandable="True" Header="{DynamicResource layTabAccAccountCausalsCounterpart}">
                        <CheckBox HorizontalAlignment="Left" Margin="5,0,0,0" Height="20"  IsChecked="{Binding Causal.GeneralUse}" Content="{DynamicResource labTabAccAccountCausalsGenericUse}" Validation.ErrorTemplate="{StaticResource ErrorTemplate}"></CheckBox>
                        <CheckBox HorizontalAlignment="Left" Margin="5,0,0,0" Height="20"  IsChecked="{Binding Causal.IVAUse}" Content="{DynamicResource labTabAccAccountCausalsIVAUse}" Validation.ErrorTemplate="{StaticResource ErrorTemplate}"></CheckBox>
                        <CheckBox HorizontalAlignment="Left" Margin="5,0,0,0" Height="20"  IsChecked="{Binding Causal.CustomersUse}" Content="{DynamicResource labTabAccAccountCausalsCustomersUse}" Validation.ErrorTemplate="{StaticResource ErrorTemplate}"></CheckBox>
                        <CheckBox HorizontalAlignment="Left" Margin="5,0,0,0" Height="20"  IsChecked="{Binding Causal.CustomersUse}" Content="{DynamicResource labTabAccAccountCausalsCustomersUse}" Validation.ErrorTemplate="{StaticResource ErrorTemplate}"></CheckBox>
                </telerik:LayoutControlGroup>
            </telerik:RadLayoutControl>
        </Grid>

[Aldo]

lay1.png Expanded
lay2.png Collapsed

[Kiril Vandov]

Hello Aldo,

The described behavior is expected as the LayoutControl draws its elements based-on their Alignment properties. Basically, the VerticalAligment property of the LayoutControlGroup is set to Stretch by default and that is why the group is taking that much space.

Currently the control does not have exposed Expand/Collapsed events and that is why you could use EventManager to achieve the scenario. As a workaround, you can subscribe to the expanded and collapsed event of the RadExpander and depends on if the LayoutControlGroup is collapse or expand set its VerticalAlignment property to Center or Stretch.

public MainWindow()
{
    EventManager.RegisterClassHandler(typeof(RadExpander), RadExpander.ExpandedEvent, new RoutedEventHandler(OnExpander));
    EventManager.RegisterClassHandler(typeof(RadExpander), RadExpander.CollapsedEvent, new RoutedEventHandler(OnCollapsed));
    ...

private void OnCollapsed(object sender, RoutedEventArgs e)
{
    var expander = sender as RadExpander;
    var parentLayoutGroup = expander.ParentOfType<LayoutControlGroup>();
    parentLayoutGroup.VerticalAlignment = VerticalAlignment.Center;
}

private void OnExpander(object sender, RoutedEventArgs e)
{
    var expander = sender as RadExpander;
    var parentLayoutGroup = expander.ParentOfType<LayoutControlGroup>();
    parentLayoutGroup.VerticalAlignment = VerticalAlignment.Stretch;
}

I hope this information helps. Please let us know if you need further assistance.

Regards,
Kiril Vandov
Telerik

[Aldo]

Thank you, I need it in XAML only, so changing LayoutControl VerticalAlignment to Top and LayoutControlGroup VerticalAlignment to Center works fine.

Thanks a lot
Regards