Need Collapsed Items to Vertically Align to Top

[Joonatan]

Hello!

I have noticed that when I have only one of my items expanded and the rest of them collapsed in my radpanelbar, the collapsed items all group/align at the bottom which creates a great deal of empty space between them and the expanded item (see screenshot). I was wondering if there was any way to align them upwards instead, so that they would start right after the expanded item? I have tried the following but it seems that setting

<Setter Property="VerticalAlignment" Value="Top"/>

in the style for the menu item does not help.

All the styling code is here:

<Style TargetType="telerik:RadPanelBarItem" x:Key="LeftMenuSubItemStyle">
            <Style.Triggers>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter Property="FontWeight"  Value="Normal"/>
                    <Setter Property="Opacity"  Value="0.70"/>
                </Trigger>

                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="FontWeight"  Value="Bold"/>
                </Trigger>
            </Style.Triggers>
            <Setter Property="IsSelected" Value="{Binding IsCurrent, Mode=TwoWay}" />
            <Setter Property="IsEnabled" Value="{Binding IsNavigationEnabled, Mode=TwoWay}" />
        </Style>

        <Style TargetType="telerik:RadPanelBarItem" x:Key="LeftMenuMainItemStyle">

            <Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" />
            <Setter Property="VerticalAlignment" Value="Top"/>
        </Style>


        <!--Data template for the DescriptiveSubMenuItem object-->
        <HierarchicalDataTemplate DataType="{x:Type domain:DescriptiveSubMenuItem}">
            <Grid Margin="15,0,0,0">
               <TextBlock Text="{Binding Title}" Margin="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" TextWrapping="Wrap" FontSize="12">
                   <TextBlock.InputBindings>
                        <MouseBinding MouseAction="LeftClick" Command="{ Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Path=DataContext.MenuItemClicked}" CommandParameter="{Binding Title}" />
                    </TextBlock.InputBindings>
                </TextBlock>
                <Rectangle HorizontalAlignment="Right" Width="15" Height="15" Visibility="{Binding IsCheckVisible}" Fill="{StaticResource CompleteCheck}" Margin="0,0,10,0">
                    <Rectangle.InputBindings>
                        <MouseBinding MouseAction="LeftClick" Command="{ Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Path=DataContext.MenuItemClicked}" CommandParameter="{Binding Title}" />
                    </Rectangle.InputBindings>
            </Rectangle>
            </Grid>

        </HierarchicalDataTemplate>

        <!--Data template for the DescriptiveMenuItem object-->
        <HierarchicalDataTemplate DataType="{x:Type domain:DescriptiveMenuItem}" ItemsSource="{Binding SubMenuItems}" ItemContainerStyle="{StaticResource LeftMenuSubItemStyle}">
            <Label Content="{Binding Header}" FontSize="16" Margin="0"/>
        </HierarchicalDataTemplate>
    </UserControl.Resources>
    <Grid>

        <telerik:RadPanelBar ItemsSource="{Binding ActiveNavigationItems}" ExpandMode="Multiple" ItemContainerStyle="{StaticResource LeftMenuMainItemStyle}">

        </telerik:RadPanelBar>

    </Grid>

Any suggestions would be greatly appreciated!

[Petar Mladenov]

Hello Joonatan,

I believe this can be achieved with setting VerticalAlignment of the RadPanelBar to Top or Center. Please check out the attached project which uses most of your snippet and the suggested approach as well. Let us know if this is what you expect.

Regards,
Petar Mladenov
Telerik

 

 

[Joonatan]

That worked great, thank you! Somehow I didn't think setting the alignment on the control itself would affect its items so I unfortunately didn't even try that, but great that it was so 'easy'. I appreciate the help!