在XAML本身中處理Expand動作

Question

我有要在XAML Xamarin表單中動態加載的堆棧布局列表。

在點擊堆棧布局時，需要擴展子元素。

以下是到目前為止我嘗試過的。

  <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>

我想使要顯示的堆棧布局數量是動態的。

如果我知道在XAML本身中通過更改水龍頭在堆棧布局中子元素的可見性來進行控制，就足夠了。

需要幫助。

Answer 1

感覺就像一個用戶控件。

也許您可以創建一個使用堆棧布局或網格實現單個“節點”的用戶控件，然后創建具有可綁定屬性的包裝用戶控件，從而在幕后的代碼中生成並添加所需數量的節點。