本文介绍了一次只有一个扩展器以 xamarin 形式扩展的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在我的页面上有一个 4 个扩展器,我想一次为一个扩展器编写一个代码,我可以为这种情况做些什么,请帮助我,有关更多说明,我有一个扩展器的添加图像,在这个给定的代码有一个扩展器显示,但是我的页面上有这种类型的 4 个扩展器,我想一次扩展一个

On my page there is a 4 expander ,I want to write a code for at a time one expander is expand ,What can I do for this scenario please help me ,For more clarifications I have a add image of expanders ,In this given code there is a one expander show ,but this type of a 4 expander available on my page and i want to expand one at a time

在此处输入图片说明

<StackLayout IsVisible="{Binding Synonyms,Converter={x:StaticResource CorrectionTypeVisiableConverter}}" Orientation="Vertical" VerticalOptions="StartAndExpand" HorizontalOptions="FillAndExpand">
                                                <xct:Expander ExpandAnimationEasing="CubicIn"
                                                         ExpandAnimationLength="500"
                                                          CollapseAnimationEasing="CubicOut"
                                                          CollapseAnimationLength="500">
                                                    <xct:Expander.Header>
                                                        <Frame  HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BorderColor="#F0F0F0" HasShadow="False" >
                                                            <StackLayout Orientation="Horizontal" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                                                                <xct:BadgeView Text="{Binding Synonyms,Converter={StaticResource CorrectionCountBadgeConverter}}"  BackgroundColor="#FADBD8" BadgePosition="TopLeft"   TextColor="#E74C3C" HorizontalOptions="Start" FontSize="16"  AutoHide="True"                                                                               VerticalOptions="CenterAndExpand">
                                                                    <Label Text=""></Label>
                                                                </xct:BadgeView>
                                                                <Label Text="{x:Static resources:AppResources.Synonyms}"
                                                                        FontAttributes="Bold" VerticalOptions="CenterAndExpand"
                                                                        FontSize="Medium" Style="{StaticResource MenueLableStyle}" HorizontalOptions="StartAndExpand" />
                                                                <Image Source="Expand.png"
                                                                         HorizontalOptions="EndAndExpand"
                                                                         VerticalOptions="CenterAndExpand">
                                                                    <Image.Triggers>
                                                                        <DataTrigger TargetType="Image"
                                                                                Binding="{Binding Source={RelativeSource AncestorType={x:Type xct:Expander}},                                                                              Path=IsExpanded,Mode=OneTime}"
                                                                                Value="True">
                                                                            <Setter Property="Source"
                                                                                Value="collapse.png" />
                                                                        </DataTrigger>
                                                                    </Image.Triggers>
                                                                </Image>
                                                            </StackLayout>
                                                        </Frame>
                                                    </xct:Expander.Header>
                                                    <xct:Expander.ContentTemplate>
                                                        <DataTemplate>
                                                            <StackLayout BindableLayout.ItemsSource="{Binding Synonyms}" VerticalOptions="StartAndExpand" HorizontalOptions="FillAndExpand">
                                                                <BindableLayout.ItemTemplate>
                                                                    <DataTemplate>
                                                                        <Frame HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BorderColor="#F0F0F0" HasShadow="False" >
                                                                            <Grid >
                                                                                <Grid.RowDefinitions>
                                                                                    <RowDefinition Height="Auto" />
                                                                                    <RowDefinition Height="Auto" />
                                                                                    <RowDefinition Height="Auto" />
                                                                                    <RowDefinition Height="Auto" />
                                                                                </Grid.RowDefinitions>
                                                                                <StackLayout Grid.Row="0" Orientation="Horizontal">
                                                                                    <Label  Text="{Binding s}" HorizontalOptions="Start" VerticalOptions="Center">
                                                                                    </Label>
                                                                                    <Label  Text="--->" HorizontalOptions="Start" VerticalOptions="Center"></Label>
                                                                                    <Grid>
                                                                                        <Grid.ColumnDefinitions>
                                                                                            <ColumnDefinition Width="Auto"></ColumnDefinition>
                                                                                        </Grid.ColumnDefinitions>
                                                                                        <xct:BadgeView Grid.Column="0" Text=""  BackgroundColor="#FADBD8" BadgePosition="TopRight" TextColor="#E74C3C" FontSize="14"                                                                                                     HorizontalOptions="CenterAndExpand" AutoHide="True"                                                                                                VerticalOptions="Center" Background="#FADBD8" WidthRequest="80" HeightRequest="25">
                                                                                            <Label Text="{Binding c}"></Label>
                                                                                        </xct:BadgeView>
                                                                                        <ImageButton Grid.Column="0" Source="Storyedit.png"
                                                                                 HorizontalOptions="EndAndExpand" VerticalOptions="Center"   WidthRequest="12" HeightRequest="12"/>
                                                                                    </Grid>
                                                                                    <ImageButton Source="Info.png" Command="{Binding  Path=BindingContext.CorrectionInfoCommand,Source={x:Reference Name=storyView}}"
                                                                                         CommandParameter="{Binding .}"  HorizontalOptions="EndAndExpand"/>
                                                                                </StackLayout>
                                                                                <Button Grid.Row="1" Text="{x:Static resources:AppResources.IgnoreButton}"                                                                                    Style="{StaticResource CancelButton}" VerticalOptions="EndAndExpand"                                                                                        HorizontalOptions="CenterAndExpand" ></Button>
                                                                                <Button Grid.Row="1" Text="{x:Static resources:AppResources.AcceptButton}"                                                                                 Style="{StaticResource AcceptButton}" VerticalOptions="EndAndExpand"                                                                                        HorizontalOptions="StartAndExpand" ></Button>

                                                                                <FlexLayout  IsVisible="False" Grid.Row="3" HorizontalOptions="FillAndExpand"                                                                                  VerticalOptions="FillAndExpand" AlignItems="Start" AlignContent="Center"                                                                                Direction="Row" Wrap="Wrap" JustifyContent="Center">
                                                                                    <Button Text="{x:Static resources:AppResources.IgnoreButton}" Padding="5"                                                                                    Style="{StaticResource CancelButton}" HorizontalOptions="StartAndExpand"></Button>
                                                                                    <Button Text="{x:Static resources:AppResources.IgnoreAllButton}" Style="{StaticResource                                                                        CancelButton}" HorizontalOptions="CenterAndExpand" Padding="5"></Button>
                                                                                    <Button Text="{x:Static resources:AppResources.AcceptButton}" Style="{StaticResource                                                                        AcceptButton}" HorizontalOptions="StartAndExpand" Padding="5"></Button>
                                                                                    <Button Text="{x:Static resources:AppResources.AcceptAllButton}" Style="{StaticResource                                                                      AcceptButton}" HorizontalOptions="CenterAndExpand" Padding="5"></Button>
                                                                                </FlexLayout>
                                                                            </Grid>
                                                                        </Frame>
                                                                    </DataTemplate>
                                                                </BindableLayout.ItemTemplate>
                                                            </StackLayout>
                                                        </DataTemplate>
                                                    </xct:Expander.ContentTemplate>
                                                </xct:Expander>
                                            </StackLayout>

推荐答案

您可以为 IsExpanded 属性绑定 true 或 false 以指示扩展器是展开还是折叠.

You could binding true or false for the IsExpanded property to indicate that the Expander is expanded or collapsed.

我做了一个简单的例子供您参考.

I make a simple example for your reference.

型号:

  public class Model : INotifyPropertyChanged
{
    #region fields
    public string _synonyms;
    public string _s;
    public bool _isexpand;
    #endregion
    public string Synonyms
    {
        get { return _synonyms; }
        set { _synonyms = value; OnPropertyChanged("Synonyms"); }
    }
    public string s
    {
        get { return _s; }
        set { _s = value; OnPropertyChanged("s"); }
    }
    public bool ISexpand
    {
        get { return _isexpand; }
        set { _isexpand = value; OnPropertyChanged("ISexpand"); }
    }
    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string propertyName)
    {
        var handler = PropertyChanged;
        if (handler != null)
            handler(this, new PropertyChangedEventArgs(propertyName));
    }

}

视图模型:

 public class ViewModel1
{
    public ObservableCollection<Model> models { get; set; }
    public ViewModel1()
    {
        CreateCollection();
    }
    public void CreateCollection()
    {
        models = new ObservableCollection<Model>()
        {
            new Model(){ Synonyms="Synonym1", s="A", ISexpand=false},
            new Model(){ Synonyms="Synonym2", s="B",ISexpand=false},
            new Model(){ Synonyms="Synonym3", s="C",ISexpand=false},
            new Model(){ Synonyms="Synonym4", s="D",ISexpand=false},
            new Model(){ Synonyms="Synonym5", s="E",ISexpand=false},
        };
    }

}

XML:

 <ContentPage.BindingContext>
    <local:ViewModel1></local:ViewModel1>
</ContentPage.BindingContext>
<ContentPage.Content>
    <StackLayout x:Name="stacklayout"  BindableLayout.ItemsSource="{Binding models}" Orientation="Vertical" VerticalOptions="StartAndExpand" HorizontalOptions="FillAndExpand">
        <BindableLayout.ItemTemplate>
            <DataTemplate>
                <xct:Expander IsExpanded="{Binding ISexpand}"  Tapped="Expander_Tapped" >
                    <xct:Expander.Header>
                        <Label Text="{Binding Synonyms}"></Label>
                    </xct:Expander.Header>
                    <xct:Expander.ContentTemplate>
                        <DataTemplate>
                                <Label Text="{Binding s}"></Label>
                        </DataTemplate>
                    </xct:Expander.ContentTemplate>
                </xct:Expander>
            </DataTemplate>
        </BindableLayout.ItemTemplate>
    </StackLayout>
</ContentPage.Content>

背后的代码:

 public partial class Page10 : ContentPage
{
    ViewModel1 viewModel1=new ViewModel1();
    public Page10()
    {
        InitializeComponent();

    }
    int i = 0;
    private void Expander_Tapped(object sender, EventArgs e)
    {
        var expander = sender as Expander;
        var label = expander.Header as Label;
        var list = viewModel1.models;
        foreach (var item in viewModel1.models)
        {
            if (item.Synonyms == label.Text)
            {
                item.ISexpand = true;


                if (i >= 1)
                {
                    foreach (var item1 in viewModel1.models.ToList())
                    {
                        if (item1.Synonyms!= label.Text)
                        {
                            item1.ISexpand = false;

                        }
                    }
                    BindableLayout.SetItemsSource(stacklayout, viewModel1.models);
                }
            }
        }
        i++;
    }
}

输出:

https://imgur.com/4D6x1yB

这篇关于一次只有一个扩展器以 xamarin 形式扩展的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-02 23:13