Forum› Xamarin.iOS

Disable Material Button Select Animation when Button is in ListView

stefanhkstefanhk Member ✭✭
in Xamarin.iOS

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.

Tagged:

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.