如何将开关控件与每行中的自定义列表视图中的其他控件绑定,以便我可以将状态从只读 false 更改为 true 以及周围的方法

问题描述 投票:0回答:1

我在一行中有一个自定义列表视图,其中有标签、条目标签、开关、按钮。在编辑时,我会得到以下效果,如下面的链接所示。我不知道如何用开关编辑行,如下面的电影所示。

https://drive.google.com/file/d/1U4Ggy36F9ft6nrM8iwXcrjrGISS0tP_M/view?usp=drive_link

   `<ListView
     x:Name="ExpiryProductsData"
     SelectionMode="Single"
     ItemSelected="ExpiryProductsData_ItemSelected"
    SeparatorColor="LightGray"
    SeparatorVisibility="Default">
    <ListView.ItemTemplate>
       <DataTemplate>
            <ViewCell>
               <StackLayout
                   Orientation="Horizontal"
                   VerticalOptions="Center">
                  <Label
                     Text="{Binding Description}"
                     TextColor="Black"
                     VerticalOptions="Center"
                     />
                  <Label
                     Text="{Binding DateExpiry}"
                     TextColor="Black"
                     VerticalOptions="Center"
                     />
                  <Label
                         Text="{Binding LeftToExpiry}"
                     TextColor="Black"
                        VerticalOptions="Center"
                     />
                     <StackLayout
                         Orientation="Horizontal"
                         HorizontalOptions="EndAndExpand">
                         <Switch
                          x:Name="EditData"
                         Toggled="EditData_Toggled"
                          />
                         </StackLayout>
                       </StackLayout>
                   </ViewCell>
                </DataTemplate>
          </ListView.ItemTemplate>
     </ListView>

`

我的看法型号:

           `class ViewModel
       {
           public string LotNumber { get; set; }
            public string Description { get; set; }
           public string ExpiryDate { get; set; }
          public string LeftToExpiry { get; set; }
       }`

如何按照我在电影中展示的方式使用开关编辑数据

xamarin.forms
1个回答
0
投票

.您可以使用 MVVM 和

Switch.Behaviors
来实现这一点。

我根据你的代码,新建了一个demo并实现了这个功能,你可以参考以下步骤:

1.在 Item 模型中添加一个 bool 变量(假设其名称为

Item.cs
)并将其绑定到
Switch
。并为此实现接口
INotifyPropertyChanged
Item.cs

public class Item: INotifyPropertyChanged
{
    public string LotNumber { get; set; }
    public string Description { get; set; }
    public string ExpiryDate { get; set; }
    public string LeftToExpiry { get; set; }

    private bool _isSwitched;
    public bool IsSwitched
    {
        get { return _isSwitched; }
        set
        {
            SetProperty(ref _isSwitched, value);
        }
    }

    bool SetProperty<T>(ref T storage, T value, [CallerMemberName] string propertyName = null)
    {
        if (Object.Equals(storage, value))
            return false;
        storage = value;
        OnPropertyChanged(propertyName);
        return true;
    }
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
    public event PropertyChangedEventHandler PropertyChanged;
}

2.创建视图模型(

MyViewModel.cs
)

public class MyViewModel
{
    public ObservableCollection<Item> Items { get; set; }

    public Command ToggledCommand { get; set; }

    public MyViewModel() {
   
       Items = new ObservableCollection<Item>();
       Items.Add(new Item { LotNumber = "01", Description="description_1", ExpiryDate="2024.8", LeftToExpiry ="23" });
       Items.Add(new Item { LotNumber = "02", Description="description_2", ExpiryDate="2024.8", LeftToExpiry ="23" });
       Items.Add(new Item { LotNumber = "03", Description="description_3", ExpiryDate="2024.8", LeftToExpiry ="23" });

       ToggledCommand = new Command((s) => ExecuteToggledCommand(s as Item));
    }
    private void ExecuteToggledCommand(Item s)
    {
        if (s != null)
        {
            // add your code here
            System.Diagnostics.Debug.WriteLine("---->"+ s.LotNumber );
        }

    }
}

3.使用示例:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:viewmodels="clr-namespace:ListViewApp0207.ViewModels"
             xmlns:behaviors="clr-namespace:ListViewApp0207.EventToCommandBehavior"
             x:Class="ListViewApp0207.MainPage"
             x:Name="myPage" >
    <ContentPage.BindingContext>
        <viewmodels:MyViewModel></viewmodels:MyViewModel>
    </ContentPage.BindingContext>

    <ListView ItemsSource="{Binding Items}"
     x:Name="ExpiryProductsData"
     SelectionMode="Single"
    SeparatorColor="LightGray"
    SeparatorVisibility="Default">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <StackLayout
                   Orientation="Horizontal"
                   VerticalOptions="Center">
                        <Label
                     Text="{Binding Description}"
                     TextColor="Black"
                     VerticalOptions="Center"

                     />
                        <Label
                     Text="{Binding DateExpiry}"
                     TextColor="Black"
                     VerticalOptions="Center"
                     />
                        <Label
                         Text="{Binding LeftToExpiry}"
                     TextColor="Black"
                        VerticalOptions="Center"
                     />
                        <StackLayout
                         Orientation="Horizontal"
                         HorizontalOptions="EndAndExpand">
                            <Switch
                              x:Name="EditData" IsToggled="{Binding IsSwitched}">
                                <Switch.Behaviors>
                                    <behaviors:EventToCommandBehavior
                              EventName="Toggled"
                             Command="{Binding   Path=BindingContext.ToggledCommand,
                                                    Source={x:Reference
                                                   Name=myPage}}"
                              CommandParameter="{Binding .}"
                             />
                                </Switch.Behaviors>

                            </Switch>
                        </StackLayout>
                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</ContentPage>

注:

对于

EventToCommandBehavior.cs
,可以参考官方示例中的EventToCommandBehavior.csBehaviorBase.cs

© www.soinside.com 2019 - 2024. All rights reserved.