PanelBar Design Question

3 posts, 0 answers
  1. Ali Rafiee
    Ali Rafiee avatar
    23 posts
    Member since:
    May 2010

    Posted 20 Jul 2011 Link to this post

    Hi all,

    .Net newbie here.

    I'm trying to design a page that has a bunch of options on a screen, where some are optional, and a button on the bottom of the page that the user must press to procceed.

    I've put together a user control for each set of options, which are then inserted as the different panels of the PanelBar on the main page.
    This works out pretty good since the options are hidden unless the user want's to mess with them.

    The PanelBar has the HorizontalAlignment="Stretch" so it is taking up the entire width of the page.

    I have two problems.
    1. I can figure out how to add a button at the bottom of the page, while the scrollbar for the PanelBar takes up the entire rightside to the bottom of the screen.
    2. The top two Panels are not optional so the user must select something. Is there anyway I can lock the top two panels open so that the user can't collapse them?

    2 is not a big deal but would be nice if I had the option to lock the panels open.

    But 1 is a must.  What I want to accomplish for the button to be at the bottom of the page where if all the panels are expanded and a scrollbar is visible the user would have to scroll to see the button.
    What I tried to do was add an extra PanelBarItem as the last item in the panel bar, and remove its Header so that the user can't collapse it, but can't figure out away to remove it.

    Worst case I can have the button just below the PanelBar, but that would make the scrollbar come up short (the height of the button) toward the bottom of the page, which is going to look a little funny.
  2. Ali Rafiee
    Ali Rafiee avatar
    23 posts
    Member since:
    May 2010

    Posted 20 Jul 2011 Link to this post

    I figured out how to keep the PanelBarItem from collapsing.

    I'm catching the Collapsed event and expanding the item back.

    Does anyone know how to get rid of the ^ icon on the right side of the item's header. That way the user won't even know it is clickable.

    Thanks.
  3. DevCraft banner
  4. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 26 Jul 2011 Link to this post

    Hello Ali Rafiee,

     You have to edit the default style of RadPanelBarItem and remove the Data from the Path named "arrow":

    <Path x:Name="arrow" Grid.Column="5" Data="M 1,1.5 L 4.5,5 L 8,1.5" HorizontalAlignment="Right" Margin="7 0" Opacity="1" RenderTransformOrigin="0.5 0.5" Stretch="None" Stroke="{StaticResource ControlElement_Normal}" StrokeThickness="2" VerticalAlignment="Center">
                            <Path.RenderTransform>
                                <RotateTransform x:Name="directionRotation" Angle="0"/>
                            </Path.RenderTransform>
                        </Path>
    You can find this realized in the attached project. The edited style is applied to all RadPanelBarItems in XAML. Let us know if you need further assistance.
    Regards,
    Petar Mladenov
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

Back to Top