Need Collapsed Items to Vertically Align to Top

3 posts, 1 answers
  1. Joonatan
    Joonatan avatar
    2 posts
    Member since:
    Jun 2014

    Posted 11 Jun 2014 Link to this post

    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. Answer
    Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 13 Jun 2014 Link to this post

    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.
     
  3. UI for WPF is Visual Studio 2017 Ready
  4. Joonatan
    Joonatan avatar
    2 posts
    Member since:
    Jun 2014

    Posted 13 Jun 2014 Link to this post

    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!
Back to Top