El elemento de acordeón no está en el estado visual correcto

Question

Necesito usar un acordeón para mostrar algunos totales en una aplicación LOB que estamos construyendo.

Si coloco el acordeón en XAML, todo funciona bien y el estado del icono (>) es correcto y apunta a la derecha. Al ingresar el mouse al elemento de acordeón, no tenemos un cambio de estado visual.

Si agrego dinámicamente AccordionItems en un clic de botón (para simular el retorno asíncrono de la llamada de datos) el estado del icono no es el mismo y en MouseEnter lo corrige " a sí mismo ejecutando un cambio de estado visual. * Es posible que deba hacer clic en "Agregar 3 elementos de acordeón" dos veces.

Si agrego dinámicamente un acordeón en un clic de botón con AccordionItems, funciona bien. A continuación se muestra mi aplicación de muestra.

Entonces, ¿qué debo hacer para que el Acordeón agregue AcordionItems en tiempo de ejecución y esté en el estado correcto según cuando uso 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

{       recuento int privado = 0;   public MainPage ()   {    // Requerido para inicializar 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 );
  }

}

Answer 1

Llamar TestAccordion.UpdateLayout (); después de agregar los elementos ... puede ser

Answer 2

Si observa el código fuente del control Accordian, verá que usa InteractionHelper.UpdateVisualState para establecer su estado correcto después de los eventos.

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" });
    }
}

Dado que el método está marcado internamente en el control Accordian y el InteractionHelper es una variable privada, su mejor opción es averiguar en qué estados está agregando el control y luego decirle al control que vaya a ese estado ( sin transición) antes de agregarlo al árbol visual. Es por eso que MouseOver está "arreglando" eso.

Answer 3

¿Puedes vincular los elementos del acordeón a una colección observable?