Gestion de l'action Développer avec XAML lui-même

Question

J'ai la liste des empilements à charger dynamiquement dans XAML Xamarin Forms.

Lorsque vous tapez sur stacklayout, les éléments enfants doivent être étendus.

Voici ce que j'ai essayé jusqu'à présent.

<StackLayout Spacing="1"> 

        <StackLayout Style="{StaticResource ExpandableHeaderStyle}"> 
         <Label Text="Spec" FontSize="16" VerticalOptions="CenterAndExpand"/> 
         <Image Source="{Binding ImageOne}" HorizontalOptions="EndAndExpand" Margin="0,0,12,0"> 
          <Image.GestureRecognizers> 
           <TapGestureRecognizer Command ="{Binding ExpandViewFlagCommand}" CommandParameter="1"/> 
          </Image.GestureRecognizers> 
         </Image> 
        </StackLayout> 
        <StackLayout Spacing="0"> 
         <StackLayout.Triggers> 
          <DataTrigger TargetType="StackLayout" Binding="{Binding Path=ImageOne}" Value="down_Arrow.png"> 
           <Setter Property="IsVisible" Value="False" /> 
          </DataTrigger> 
          <DataTrigger TargetType="StackLayout" Binding="{Binding Path=ImageOne}" Value="up_Arrow.png"> 
           <Setter Property="IsVisible" Value="True"/> 
          </DataTrigger> 
         </StackLayout.Triggers> 
         <StackLayout Spacing="0" Style="{StaticResource ExpandableViewStyle}"> 
          <Label Text="spec1" FontAttributes="Bold" FontSize="16"/> 
          <Label Text="spec detail 1" FontSize="14"/> 
         </StackLayout> 

         <StackLayout Spacing="0" Style="{StaticResource ExpandableViewStyle}"> 
          <Label Text="spec1" FontAttributes="Bold" FontSize="16"/> 
          <Label Text="spec detail 1" FontSize="14"/> 
         </StackLayout> 

        </StackLayout> 
       </StackLayout> 
       <StackLayout Spacing="0"> 
        <StackLayout Style="{StaticResource ExpandableHeaderStyle}"> 
         <Label Text="Features" FontSize="16" VerticalOptions="CenterAndExpand"/> 
         <Image Source="{Binding ImageTwo}" VerticalOptions="CenterAndExpand" HorizontalOptions="EndAndExpand" Margin="0,0,12,0"> 
          <Image.GestureRecognizers> 
           <TapGestureRecognizer Command ="{Binding ExpandViewFlagCommand}" CommandParameter="2"/> 
          </Image.GestureRecognizers> 
         </Image> 
        </StackLayout> 

        <StackLayout Spacing="0"> 
         <StackLayout.Triggers> 
          <DataTrigger TargetType="StackLayout" Binding="{Binding Path=ImageTwo}" Value="down_Arrow.png"> 
           <Setter Property="IsVisible" Value="False" /> 
          </DataTrigger> 
          <DataTrigger TargetType="StackLayout" Binding="{Binding Path=ImageTwo}" Value="up_Arrow.png"> 
           <Setter Property="IsVisible" Value="True"/> 
          </DataTrigger> 
         </StackLayout.Triggers> 

         <StackLayout Style="{StaticResource ExpandableViewOneItemStyle}"> 
          <Image Source="bulletIcon.png" HeightRequest="6" WidthRequest="6"/> 
          <Label Text="feature 1" Style="{StaticResource ExpandableViewChildLabelStyle}" /> 
         </StackLayout> 

         <StackLayout Style="{StaticResource ExpandableViewOneItemStyle}"> 
          <Image Source="bulletIcon.png" HeightRequest="6" WidthRequest="6"/> 
          <Label Text="feature 2" Style="{StaticResource ExpandableViewChildLabelStyle}"/> 


        </StackLayout> 
       </StackLayout> 

       <StackLayout Spacing="0"> 
        <StackLayout Style="{StaticResource ExpandableHeaderStyle}"> 
         <Label Text="Applications" FontSize="16" VerticalOptions="CenterAndExpand"/> 
         <Image Source="{Binding ImageThree}" VerticalOptions="CenterAndExpand" HorizontalOptions="EndAndExpand" Margin="0,0,12,0"> 
          <Image.GestureRecognizers> 
           <TapGestureRecognizer Command ="{Binding ExpandViewFlagCommand}" CommandParameter="3"/> 
          </Image.GestureRecognizers> 
         </Image> 
        </StackLayout> 

        <StackLayout Spacing="0"> 
         <StackLayout.Triggers> 
          <DataTrigger TargetType="StackLayout" Binding="{Binding Path=ImageThree}" Value="down_Arrow.png"> 
           <Setter Property="IsVisible" Value="False" /> 
          </DataTrigger> 
          <DataTrigger TargetType="StackLayout" Binding="{Binding Path=ImageThree}" Value="up_Arrow.png"> 
           <Setter Property="IsVisible" Value="True"/> 
          </DataTrigger> 
         </StackLayout.Triggers> 
         <StackLayout Style="{StaticResource ExpandableViewOneItemStyle}"> 
          <Image Source="bulletIcon.png" HeightRequest="6" WidthRequest="6"/> 
          <Label Text="application 1" Style="{StaticResource ExpandableViewChildLabelStyle}"/> 
         </StackLayout> 

         <StackLayout Style="{StaticResource ExpandableViewOneItemStyle}"> 
          <Image Source="bulletIcon.png" HeightRequest="6" WidthRequest="6"/> 
          <Label Text="application 2" Style="{StaticResource ExpandableViewChildLabelStyle}"/> 
         </StackLayout> 

        </StackLayout> 
       </StackLayout> 

Je souhaite que le nombre d'empilements à afficher soit dynamique.

Si j'apprends à modifier la visibilité des éléments enfants dans la disposition de la pile sur le tap pour contrôler XAML lui-même, cela suffira également.

Besoin d'aide sur ce produit.

Answer 1

Cela ressemble à un contrôle utilisateur. Vous pouvez peut-être créer un contrôle utilisateur qui implémente un seul "nœud" en utilisant une disposition de pile ou une grille puis créer un contrôle utilisateur wrapper avec des propriétés bindables qui génère et ajoute le nombre requis de nœuds dans le code derrière les scènes.