This is a migrated thread and some comments may be shown as answers.

Need Collapsed Items to Vertically Align to Top

2 Answers 51 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Joonatan
Top achievements
Rank 1
Joonatan asked on 11 Jun 2014, 09:24 AM
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!

2 Answers, 1 is accepted

Sort by
0
Accepted
Petar Mladenov
Telerik team
answered on 13 Jun 2014, 08:23 AM
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
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
0
Joonatan
Top achievements
Rank 1
answered on 13 Jun 2014, 08:57 AM
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!
Tags
PanelBar
Asked by
Joonatan
Top achievements
Rank 1
Answers by
Petar Mladenov
Telerik team
Joonatan
Top achievements
Rank 1
Share this question
or