Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to disable highlight on ListView in Xamarin.Forms

I'm working with Xamarin.Forms and XAML, and I'm trying to create an application that stores a list of products. I put my list of products in a ListView. This works fine. Here is my XAML:

<ListView x:Name="listSushi"
        ItemsSource="{x:Static local:myListSushi.All}"
        SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
        RowHeight="{StaticResource rowHeight}"
        >
<ListView.ItemTemplate>
  <DataTemplate>
    <ViewCell>
      <ViewCell.View>
        <StackLayout Padding="5, 5, 0, 5"
                     Orientation="Horizontal"
                     Spacing="15">
          <StackLayout>
            <Image Source="{Binding ImageSource}" />
          </StackLayout>

          <StackLayout Padding="0, 0, 0, 0"
                       VerticalOptions="Center"
                       HorizontalOptions="FillAndExpand">                
                <Label Text="{Binding Name}"
                   Font="Bold, Medium" />
                <Label Text="{Binding Description}" 
                    Font="Small"/>
          </StackLayout>

          <StackLayout Orientation="Horizontal"
                        Padding="0, 0, 10, 0">
            <Button Text=" - " 
                    HorizontalOptions="EndAndExpand"
                    VerticalOptions="FillAndExpand"
                    Command="{Binding DeleteSushiCommand}"
                    CommandParameter="{Binding Name}"
                    />
            <Label VerticalOptions="Center" 
                   Text="{Binding Number,StringFormat='{0}'}"
                   TextColor="Black"/>
            <Button Text=" + " 
                    HorizontalOptions="EndAndExpand"
                    VerticalOptions="FillAndExpand" 
                    Command="{Binding AddSushiCommand}"
                    CommandParameter="{Binding Name}"
                    />
            </StackLayout>
        </StackLayout>
      </ViewCell.View>
    </ViewCell>
  </DataTemplate>
</ListView.ItemTemplate>

I've just the problem that if I click on a cell of my listView, the cell is highlight, and stay highlight. I've try to disable it with this code in the xaml.cs

listSushi.ItemSelected+= (object sender, SelectedItemChangedEventArgs e) => {
    // don't do anything if we just de-selected the row
    if (e.SelectedItem == null) return; 
    // do something with e.SelectedItem
    ((ListView)sender).SelectedItem = null; // de-select the row
};

But when I touch a cell, now my list is scrolling automatically. It's very strange.

Does anyone know if this is a bug, or know a fix, like if there is a property where I can disable the highlight?

like image 429
dpfauwadel Avatar asked Oct 30 '14 16:10

dpfauwadel


3 Answers

You might try using the ItemTapped event instead, i.e.

listSushi.ItemTapped += (object sender, ItemTappedEventArgs e) => {
    // don't do anything if we just de-selected the row.
    if (e.Item == null) return;

    // Optionally pause a bit to allow the preselect hint.
    Task.Delay(500);

    // Deselect the item.
    if (sender is ListView lv) lv.SelectedItem = null;

    // Do something with the selection.
    ...
};

I have tested this on a ListView (on an Android device) that has enough items to bring scrolling into the mix. I see no auto-scroll behavior, and your idea to set SelectedItem null to defeat the highlight works great.

like image 83
Mark Larter Avatar answered Oct 13 '22 20:10

Mark Larter


Current we can set ListView.SelectionMode to None to do this. https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/listview/interactivity

like image 23
Jesse Jiang Avatar answered Oct 13 '22 21:10

Jesse Jiang


I just found another method to disable the highlight effect. And i would like to share this with other users.

You can do it directly at xaml. But this method not only disable the highlight effect, it will also disable the click event.

You can set the IsEnabled attribute of ViewCell to false.

<ViewCell IsEnabled="false">
    //Your Item Layout Coding
</ViewCell>

In addition, you can also disable/enable each item highlight effect by binding:

<ViewCell IsEnabled="{Binding IsHighlightEnabled}">
    //Your Item Layout Coding
</ViewCell>

Hope that helps, thanks.

like image 18
Sonny Ng Avatar answered Oct 13 '22 19:10

Sonny Ng