Accordion vs PanelBar/Expander

[Perry Robertson]

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

[Serrin]

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. ;)

[Perry Robertson]

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

[Tihomir Petkov]

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.