Accordéon L'article n'est pas corrigé État visuel

Question

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

Si je place l'accordéon en XAML, tout fonctionne correctement et l'état de l'icône (>) est correct et pointe vers la droite. Sur la souris entrant dans l'AccordionItem, nous avons pas avoir un changement d'état visuel. Si j'ajoute dynamiquement AccordionItems sur un clic de bouton (pour simuler le retour d'un appel de données asynchrone) 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 deux fois sur "Ajouter 3 articles d'accordéon".

Si j'ajoute dynamiquement un accordéon sur un clic de bouton avec AccordionItems cela fonctionne très bien. Voici mon exemple d'application.

Alors, que dois-je faire pour que l'Accordéon ajoute des AcordionItems à l'exécution et soit dans l'état correct lors de 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 

{ nombre private int = 0; public MainPage() { // 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

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

Answer 2

Si vous jetez un coup d'oeil au code source pour le contrôle Accordian vous verrez qu'il utilise le 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" }); 
    } 
} 

Puisque la méthode est marquée interne sur le contrôle et la Accordian InteractionHelper est une variable privée, votre meilleur pari est de savoir lequel des états que vous ajoutez le contrôle et puis dire le contrôle d'aller à cet état (sans transition) avant de l'ajouter à l'arbre visuel. C'est pourquoi le MouseOver "le corrige".

Answer 3

Pouvez-vous lier les éléments accordéiens à une ObservableCollection?