How to change Accordion Template RSS

• 

  Isaak

  Member

  598 Points

  104 Posts

  • Reply
  •  

  How to change Accordion Template

  May 22, 2009 03:09 PM | LINK

  Hi, I'm using the Accordion control applying ItemTemplate and HeaderTemplate (DataBinded). The accordion and all the controls I put inside work fine, but I cannot find a way to change the accordion items layout, such as the background (remains white) and the mouse hover or selected states. I go inside the Accordion template through Blend in order to change the control parts, but I see only a Border, including a ScrollViewer with an ItemsPresenter. Where are the states etc...?? 

• 

  bajrachar

  Member

  155 Points

  40 Posts

  • Reply
  •  

  Re: How to change Accordion Template

  May 22, 2009 04:12 PM | LINK

  It should be in the template for AccordianItem

• 

  Isaak

  Member

  598 Points

  104 Posts

  • Reply
  •  

  Re: How to change Accordion Template

  May 22, 2009 08:20 PM | LINK

  OK, it is inside the Accordion Item, but I don't directly use it, because it is automatically implemented by the Accordion Control when it performs the binding. So, my XAML is something like:

   

  <layoutToolkit:Accordion  x:Name="mainAccordion"  SelectionSequence="Simultaneous" Background="Black"  Width="256" Height="387">
                  <layoutToolkit:Accordion.HeaderTemplate>
                      <DataTemplate>
                          ...

                      </DataTemplate>
                  </layoutToolkit:Accordion.HeaderTemplate>
                  <layoutToolkit:Accordion.ContentTemplate>
                      <DataTemplate>
                                                     
                              ...

                      </DataTemplate>
                  </layoutToolkit:Accordion.ContentTemplate>
  
  
                             </layoutToolkit:Accordion>

   

  Should I stop using the Accordion control and go to an ItemsControl that has AccordionItems as DataTemplate?

• 

  JustinAngel

  Contributor

  4455 Points

  606 Posts

  • Reply
  •  

  Re: How to change Accordion Template

  May 26, 2009 12:25 AM | LINK

  Hi,

  In order to edit the Style and Template of generated AccordionItems you'll need to use the Accordion.ItemContainerStyle.
  That's how it works for all ItemsControls (ListBox, ComboBox, TreeView, etc).

  Here's how to go about doing that:
  1. Open up blend and place an Accordion on user control
  2. In the top menu select "Object" --> Edit Other Styles --> Edit ItemContainerStyle --> Edit Copy
  3. Right click "Style" in the "Objects and Timeline" window --> Edit Control Parts (Template) --> Edit Template
  4. At this point you can completely change the layout or Visual States of the AccordionItem.
  5. It sounds like you're trying to edit the Style of the AccordionButton (on top of the AccordionItem).
  So, in the Template for AccordionItem navigate to Templates-->Grid-->Background-->ExpanderButton
  6. Right click the ExpanderButton --> Edit Control Parts (Template) --> Edit Copy
  7. Select the Mouseover VSM States in the "states" window. 
  8. When still in the mouseover VSM state for AccordionButton, go to the MouseOverBackground element and change it's background colour.

  Sincerely,   

   

  --
  Justin Angel,
  Twitter @ http://twitter.com/JustinAngel
  Blog @ http://JustinAngel.net
  
• 

  davedrat

  Member

  22 Points

  19 Posts

  • Reply
  •  

  Re: How to change Accordion Template

  Aug 19, 2009 03:15 PM | LINK

  Hi Justin,

  I am trying to achieve styling of the accordion control in Blend 3 (using silverlight 3 toolkit July 2009 release).

  I've placed an accordion on the user control

  Then selected "Object" --> Edit Additional Styles --> Edit Generated Item Container (ItemContainerStyle) -->

  But "Edit Copy" is grayed out...    The only option available is "Create Empty" which is not what I want to do.

   Can you give me some pointers as to how to edit the default template?

  Many thanks

• 

  pookiehalo

  Member

  5 Points

  13 Posts

  • Reply
  •  

  Re: Re: How to change Accordion Template

  Feb 11, 2010 02:37 PM | LINK

  I also have the same problem, is there anyway to stop this?
• 

  Cecilia33

  Member

  16 Points

  20 Posts

  • Reply
  •  

  Re: Re: How to change Accordion Template

  Mar 23, 2010 10:25 PM | LINK

  Same problem here...

• 

  Oscar Fortuny

  Member

  4 Points

  2 Posts

  • Reply
  •  

  Re: Re: How to change Accordion Template

  Jun 04, 2010 10:04 AM | LINK

  This work perfect for me. Thanks for your help. With this, i can get a cool control.
• 

  abiswas_kol

  Member

  2 Points

  1 Post

  • Reply
  •  

  Re: Re: Re: How to change Accordion Template

  Apr 09, 2011 06:27 AM | LINK

  Please first select the Accordion control from object browser then select the menu.

  M.C.P.