使用XAML本身处理展开操作

时间:2017-10-17 03:36:20

标签: c# xaml xamarin.forms

我有要在XAML Xamarin Forms中动态加载的stacklayout列表。

在点击stacklayout时,需要扩展子元素。

以下是我到目前为止所尝试的内容。

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

我想将stacklayout的数量显示为动态。

如果我知道在XAML本身中更改群组布局中子元素的可见性以控制XAML本身,那也就足够了。

需要帮助。

1 个答案:

答案 0 :(得分:0)

这感觉就像一个用户控件。

也许你可以创建一个实现单个节点的用户控件&#34;使用堆栈布局或网格,然后使用可绑定属性创建包装器用户控件,该属性可在后台生成并在代码中添加所需数量的节点。