Acordeão Item não no Estado Visual correta
-
06-07-2019 - |
Pergunta
Eu preciso usar um acordeão para exibir alguns totais em um aplicativo LOB que estamos construindo.
Se eu colocar o acordeão em XAML tudo bem funciona e o estado do ícone (>) está correta e apontando para a direita. No Rato entrar no AccordionItem fazemos não ter uma mudança de estado visual.
Se eu adicionar dinamicamente AccordionItems em um botão Click (dados assíncronos simulados chamada de retorno) o estado do ícone não é o mesmo e sobre MouseEnter ele "corrige" em si, executando uma mudança de estado visual. * Você pode precisar clicar em "Adicionar 3 Itens acordeão" duas vezes.
Se eu adicionar dinamicamente um acordeão em um clique de botão com AccordionItems ele funciona bem. Abaixo está a minha aplicação de exemplo.
Então, o que eu preciso fazer para obter o acordeão para adicionar AcordionItems em tempo de execução e estar no estado correto conforme ao usar 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
{ contagem de private int = 0; pública MainPage () { // necessária para inicializar variáveis 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 );
}
}
Solução
Chamada TestAccordion.UpdateLayout (); depois de adicionar os itens ... pode ser
Outras dicas
Se você der uma olhada no código fonte para o controle de Accordian você verá que ele usa o InteractionHelper.UpdateVisualState para definir seu estado correto depois de 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" });
}
}
Uma vez que o método está marcado interna no controle Accordian eo InteractionHelper é uma variável privada, a sua melhor aposta é a de descobrir qual dos estados que você está adicionando o controle e, em seguida, informar o controle para ir para aquele estado ( sem uma transição) antes addig-lo para a árvore visual. É por isso que o MouseOver é "consertar" isso.
Você pode vincular os itens accordian a uma ObservableCollection?