Forum Xamarin.iOS
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

Disable Material Button Select Animation when Button is in ListView

stefanhkstefanhk Member ✭✭

I have a listview in which each item has a "Delete" button (followed this post to set up the button). Because our project uses Xamarin.Forms.Material, we use a custom MaterialButtonRenderer to customize some styles:

    public class MaterialButtonCustomRenderer : MaterialButtonRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
        {
            base.OnElementChanged(e);

            if (e.OldElement != null || e.NewElement == null)
            {
                return;
            }

            Control.SetBorderColor(Element.BorderColor.ToUIColor(), UIControlState.Application);
            Control.SetBackgroundColor(Element.BackgroundColor.ToUIColor(), UIControlState.Application);
            Control.UppercaseTitle = false;
        }
    }

This allows us to have text that isn't all caps, but it looks like the border/background color is still showing up on the button when a list item is selected:

Is it possible to override that color transition? My understanding was that UIControlState.Application applied to all control states, but it doesn't seem to be working to cancel out that animation. Ideally, we'd like the row to be selectable without that button making any visual change at all.

Answers

  • LandLuLandLu Member, Xamarin Team Xamurai

    I used your renderer on my side but got a different effect:


    The row's selected effect won't affect the button.
    Moreover, I suggest using the code like:

    Control.SetBorderColor(Element.BorderColor.ToUIColor(), UIControlState.Normal);
    

    Application is not a button's state:
    https://developer.apple.com/documentation/uikit/uiapplication/state

  • stefanhkstefanhk Member ✭✭

    Thanks for your reply! It turns out that animation was caused by wrapping my button in a <Frame> element. However, taking the frame out means that I have a border shadow that I can't get rid of:

    I thought I could use Control.SetShadowColor in my custom renderer, but that had no effect. Is there another way to remove that shadow from the Material button?

  • stefanhkstefanhk Member ✭✭

    If it helps, here is my XAML:

                                                    <Button
                                                            Text="Delete" 
                                                            BackgroundColor="Transparent" 
                                                            BorderColor="Transparent" 
                                                            Padding="0" 
                                                            FontSize="12" 
                                                            CommandParameter="{Binding .}" 
                                                            Clicked="OnDeleteButtonClicked" 
                                                            TextColor="{StaticResource PrimaryColor}"/>
    
    
Sign In or Register to comment.