How to select only one Toggle Switch in Listview?

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