How to select only one Toggle Switch in Listview?

688 Views Asked by At

I have a Listview which has toggle switches. I want to select only one item in Listview with toggle switch. When I select second toggle then first toggle must be de-active again. For example in the picture; When I select Rekorida and then I select Merchandizing , Rekorida must turn back disable. Every time only one option can be active. Is it possible to do it in Xamarin?

Example listview

My listView Code :

 <ScrollView>
                    <ListView x:Name="ShipListView" HasUnevenRows="True" SeparatorVisibility="Default" SelectionMode="Single">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <ViewCell>

                                    <Grid Margin="4, 3, 4, 3" Padding="2" BackgroundColor="White">
                                        <Grid.RowDefinitions HeightRequest="40">
                                            <RowDefinition></RowDefinition>
                                            <!--<RowDefinition Height="20"></RowDefinition>-->
                                        </Grid.RowDefinitions>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="80*"></ColumnDefinition>
                                            <ColumnDefinition Width="*"></ColumnDefinition>
                                            <ColumnDefinition Width="40*"></ColumnDefinition>
                                        </Grid.ColumnDefinitions>
                                        <Label Text="{Binding ShipName}" TextColor="DeepPink" Grid.Column="0" FontAttributes="Bold"/>
                                        <Switch  IsToggled="{Binding Selected}" Grid.Column="2" Toggled="OnShipToggled" />
                                    </Grid>

                                </ViewCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </ScrollView>

And My function

async void OnShipToggled(object sender, ToggledEventArgs e)
    {
        
        checkShipSelected = !checkShipSelected;
        if(checkShipSelected)
        {
            
            ViewCell cell = (sender as Switch).Parent.Parent as ViewCell;

            ParametersMemberShipInformation model = cell.BindingContext as ParametersMemberShipInformation;

            if (model != null)
            {
                selectedMemberShipOid = model.Oid;
            }
        }
        else
        {
            return;
        }
        

    }

I'm trying get id of selected item in listview and I do this successfully. Bu I want users can only select one item at the same time because of nice visuality and not be confused.

2

There are 2 best solutions below

3
Hammad Shabbir On BEST ANSWER

Fetch your view model in your code behind file and then filter out the selected toggle and marked rest of them as false

private YourViewModel MyViewModel { get => BindingContext as YourViewModel; }

if (model != null)
{
 selectedMemberShipOid = model.Oid;
 MyViewModel.ShipListView.Where(x=> x.Oid != 
     selectedMemberShipOid).Foreach(x=> x.Selected = false)
 
}

0
Nabil Akhlaque On

This is how I solved it. This why it doesnt trigger the event on init when binding.

ViewModel.cs

bool hasCompletedLoading = false;
    public bool HasCompletedLoading
    {
        get { return hasCompletedLoading; }
        set { SetProperty(ref hasCompletedLoading, value); }
    }

Then I set hasCompletedLoading = True after all the Items has been set.

Text.xaml

 private async void Switch_Toggled(object sender, ToggledEventArgs e)
 {
     if (_viewModel.HasCompletedLoading){
        //To somthing
     }
 }