手风琴项目不处于正确的视觉状态

Question

我需要使用 Accordion 在我们正在构建的 LOB 应用程序上显示一些总计。

如果我将 Accordion 放在 XAML 中，则一切正常，并且图标 (>) 的状态正确并指向右侧。当鼠标进入 AccordionItem 时，我们没有看到视觉状态发生变化。

如果我在按钮单击上动态添加 AccordionItems（以模拟异步数据调用返回），则图标的状态不相同，并且在 MouseEnter 上，它通过执行视觉状态更改来“纠正”自身。 *您可能需要单击“添加 3 个手风琴项目”两次。

如果我使用 AccordionItems 在 Button 单击上动态添加 Accordion，则效果很好。下面是我的示例应用程序。

那么我需要做什么才能让 Accordion 在运行时添加 AccordionItems 并在使用 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

{ 私有整数计数 = 0； 公共主页（） { // 需要初始化变量 初始化组件(); //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

如果您查看 Accordian 控件的源代码，您会发现它使用 InteractionHelper.UpdateVisualState 在事件发生后设置其正确状态。

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

由于该方法在 Accordian 控件上标记为内部，并且 InteractionHelper 是私有变量，因此最好的选择是找出要添加控件的状态，然后告诉控件转到该状态（无需转换） ），然后将其添加到可视化树中。这就是为什么 MouseOver 会“修复”它。

Answer 2

称呼
TestAccordion.UpdateLayout();
添加项目后...可能是

Answer 3

您可以将手风琴项目绑定到 ObservableCollection 吗？