L'élément accordéon n'est pas dans l'état visuel correct

Question

Je dois utiliser un accordéon pour afficher certains totaux sur une application métier que nous sommes en train de créer.

Si je place l'accordéon dans XAML, tout fonctionne correctement et l'état de l'icône (>) est correct et pointe vers la droite. Lorsque la souris entre dans AccordionItem, nous ne n’avons pas un changement d’état visuel.

Si j'ajoute de manière dynamique AccordionItems à un clic sur un bouton (pour simuler le renvoi d'appels de données asynchrones), l'état de l'icône n'est pas le même et sur MouseEnter, il "corrige". lui-même en exécutant un changement d'état visuel. * Vous devrez peut-être cliquer sur "Ajouter 3 éléments d'accordéon". deux fois.

Si j'ajoute dynamiquement un accordéon sur un clic de bouton avec AccordionItems, cela fonctionne correctement. Vous trouverez ci-dessous un exemple d'application.

Alors, que dois-je faire pour que Accordion ajoute des AcordionItems au moment de l'exécution et se trouve dans l'état correct, conformément à l'utilisation de 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

{       privé int compte = 0;   page principale publique ()   {    // Requis pour initialiser les 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

Appeler TestAccordion.UpdateLayout (); après avoir ajouté les éléments ... peut être

Answer 2

Si vous examinez le code source du contrôle Accordian, vous verrez qu'il utilise InteractionHelper.UpdateVisualState pour définir son état correct après les événements.

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

Comme la méthode est marquée comme étant interne sur le contrôle Accordian et que InteractionHelper est une variable privée, le mieux est de déterminer dans quel état vous ajoutez le contrôle, puis d'indiquer au contrôle de passer à cet état ( sans transition) avant de l'ajouter à l'arborescence visuelle. C’est la raison pour laquelle MouseOver est "en réparation". il.

Answer 3

Pouvez-vous lier les éléments en accordéon à une collection Observable?