Accordion element is not in the correct visual state

I need to use Accordion to display some totals in a LOB application that we are creating.

If I put the Accordion in XAML everything works fine and the state of the (>) icon is correct and points to right. When we enter the mouse into the AccordionItem, we have no visual state change.

If I dynamically add AccordionItems to the Click button (to simulate an asynchronous data call), the state of the icon does not match, and in the MouseEnter it is "corrected" by performing a visual change in state. * You may need to double click on "Add 3 Accordion Elements".

If I dynamically add an Accordion to a button click with AccordionItems, it works great. Below is a sample application.

So what do I need to do to get Accordion to add AcordionItems at runtime and be in the correct state when using XAML?

XAML

 <Grid x:Name="LayoutRoot" Background="Black" >
  <StackPanel x:Name="TheStackPanel">
     <Button Content="Create Accordion" Click="CreateAccordionItems"></Button>
     <Button Content="Add 3 Accordion Items" Click="AddAccordionItems"></Button>
     <Grid Background="Pink">
        <layoutToolkit:Accordion SelectionMode="ZeroOrMore" x:Name="TestAccordion" Margin="10,10,10,10" HorizontalAlignment="Stretch"  >
           <layoutToolkit:AccordionItem Content="Content - 1" Header="Header - 1">
           </layoutToolkit:AccordionItem>
           <layoutToolkit:AccordionItem Content="Content - 2" Header="Header - 2">
           </layoutToolkit:AccordionItem>
           <layoutToolkit:AccordionItem Content="Content - 3" Header="Header - 3">
           </layoutToolkit:AccordionItem>
        </layoutToolkit:Accordion>
     </Grid>
  </StackPanel>

      

 public partial class MainPage : UserControl

      

{private int count = 0; public MainPage () {// Required to initialize variables InitializeComponent (); //TestAccordion.ExpandDirection = ExpandDirection.Down; }

  private void AddAccordionItems( object sender, RoutedEventArgs e )
  {
     AddToAccordion( 3, TestAccordion );
  }

  private void AddToAccordion( int size, Accordion _Accordion )
  {
     for( int i = 0; i < size; i++ )
     {
        AccordionItem accordionItem = new AccordionItem( );
        accordionItem.Header = "Item " + count.ToString( );
        count++;
        _Accordion.Items.Add( accordionItem );
        Grid aGrid = new Grid( );
        TextBlock tb = new TextBlock( );
        tb.Text = accordionItem.Header as string;
        aGrid.Children.Add( tb );
        accordionItem.Content = aGrid;
        //accordionItem.IsEnabled = true;
        accordionItem.IsSelected = true;
     }
  }

  private void CreateAccordionItems( object sender, RoutedEventArgs e )
  {
     Accordion accordion = new Accordion( );
     accordion.HorizontalContentAlignment = HorizontalAlignment.Stretch;
     TheStackPanel.Children.Add( accordion );
     AddToAccordion( 10, accordion );
  }

      

}

+2


source to share


3 answers


Call TestAccordion.UpdateLayout (); after adding items ... maybe



+1


source


If you look at the source code for the Accordian control, you can see that it uses InteractionHelper.UpdateVisualState to set the correct post-event state.

public void UpdateVisualStateBase(bool useTransitions)
{
    if (!this.Control.IsEnabled)
    {
        VisualStates.GoToState(this.Control, useTransitions, new string[] { "Disabled", "Normal" });
    }
    else if (this.IsReadOnly)
    {
        VisualStates.GoToState(this.Control, useTransitions, new string[] { "ReadOnly", "Normal" });
    }
    else if (this.IsPressed)
    {
        VisualStates.GoToState(this.Control, useTransitions, new string[] { "Pressed", "MouseOver", "Normal" });
    }
    else if (this.IsMouseOver)
    {
        VisualStates.GoToState(this.Control, useTransitions, new string[] { "MouseOver", "Normal" });
    }
    else
    {
        VisualStates.GoToState(this.Control, useTransitions, new string[] { "Normal" });
    }
    if (this.IsFocused)
    {
        VisualStates.GoToState(this.Control, useTransitions, new string[] { "Focused", "Unfocused" });
    }
    else
    {
        VisualStates.GoToState(this.Control, useTransitions, new string[] { "Unfocused" });
    }
}

      



Since the method is marked as internal in the Accordian governor and InteractionHelper is a private variable, it is best to determine from which state you are adding the control, and then pass control to that state (no transition) before adding it to the visual tree. This is why MouseOver "fixes" it.

+2


source


Can you bind accordion items to ObservableCollection?

0


source







All Articles