Accordion vs PanelBar/Expander

4 posts, 1 answers
  1. Perry Robertson
    Perry Robertson avatar
    16 posts
    Member since:
    Nov 2004

    Posted 06 Feb 2009 Link to this post

    Hi,
    What I am trying to achieve is an Accordion.  I tried Expanders inside a stack panel but I don't get the UI look and feel of an accordion like you do in PanelBar.  And using PanelBar I can't seem to put any type of content inside the PanelBar.  Am I missing something or is the Accordion (PanelBar with any type of content) something that should be developed here?

    Thanks.
    Perry
  2. Answer
    Serrin
    Serrin avatar
    286 posts
    Member since:
    Sep 2008

    Posted 06 Feb 2009 Link to this post

    Hey Perry,

    It's Friday, so I've got a nice little hack for you. :)

    The only thing I haven't figured out on this is how to get access to the RadPanelBarItem Header property... but I guess if you are replacing the content of it you really don't need that.

    <telerikNavigation:RadPanelBar x:Name="RPB" 
        <telerikNavigation:RadPanelBarItem Header="I have a custom content item, look!" > 
            <telerikNavigation:RadPanelBarItem Header="Not sure how to access this">  
                <telerikNavigation:RadPanelBarItem.Template> 
                    <ControlTemplate> 
                        <StackPanel> 
                        <StackPanel Orientation="Horizontal">  
                            <Button Content="Button" HorizontalAlignment="Left" Width="100" Margin="20 0 20 0" /> 
                            <TextBlock Text="Text" HorizontalAlignment="Right" Width="100" Margin="20 0 20 0" /> 
                        </StackPanel> 
                            <basics:Calendar x:Name="DisplayCalenda"></basics:Calendar> 
                        </StackPanel> 
                    </ControlTemplate> 
                </telerikNavigation:RadPanelBarItem.Template> 
            </telerikNavigation:RadPanelBarItem> 
        </telerikNavigation:RadPanelBarItem> 
        <telerikNavigation:RadPanelBarItem Header="Sweet!" /> 
    </telerikNavigation:RadPanelBar> 

    Basically, you're putting a RadPanelBarItem nested inside another (so you get that nice PanelBar effect), but then you simply replace the RadPanelBarItem.Template with a new ControlTemplate and you're set!  I tested it with a StackPanel, but my guess is that a Grid or Canvas would work just as well. 

    One thing to be aware of, I can't for the life of me get more than one of these "hacked" RadPanelBarItems to display under a single heading, not that you'd really need that, but just an fyi. ;)
  3. DevCraft banner
  4. Perry Robertson
    Perry Robertson avatar
    16 posts
    Member since:
    Nov 2004

    Posted 06 Feb 2009 Link to this post

    Hi Serrin,
    Thanks for the quick reply.  I have no clue what my issue was before when I tried this and it didn't work.  I took your code and plunked it in and it worked.  I know I couldn't get it to work before.  Anyways, thanks for the code.

    I do have one question, how do I stop the background hilighting of the panelbaritem content?

    Perry
  5. Tihomir Petkov
    Admin
    Tihomir Petkov avatar
    576 posts

    Posted 09 Feb 2009 Link to this post

    Hi Perry Robertson,

    You can stop the highlighting of the item content by modifying the control template. You can see exactly how by taking a look at the attached sample project - I've commented out the portion that highlights the content in the template of the second level items.

    Best wishes,
    Tihomir Petkov
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Back to Top