一次只有一个扩展器以 xamarin 形式扩展答案

【问题标题】：At a time only one expander expand on xamarin form一次只有一个扩展器以 xamarin 形式扩展
【发布时间】：2021-08-10 07:35:17
【问题描述】：

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

enter image description here

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

【问题讨论】：

4 个扩展器是什么意思？你想做多层次的事情吗？请检查我之前完成的链接。 stackoverflow.com/questions/67559174/…
我的页面上有 4 种不同的扩展器，我想一次扩展一个
能否为您的模型和视图模型提供错误消息？
我没有任何错误消息，我在这张图片中有一个添加一个图片链接我已经显示了我的输出，在这个输出中有一个 3 扩展器视图。问题是这个扩展器单击时展开，但我想一次只显示一个打开的展开器，其他应该折叠
您将需要一个事件处理程序，在打开一个扩展器时关闭所有其他扩展器。没有自动化的方法可以做到这一点，您需要自己编写代码。

标签： xamarin xamarin.forms xamarin.ios expandablelistview

【解决方案1】：

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

我做一个简单的例子供你参考。

型号：

  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},
        };
    }

}

Xaml：

 <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

【讨论】：