How can I do buttons with transparent background and with feedback when they are clicked?

JonAlzaJonAlza ESMember ✭✭

I have some buttons with transparent background and I realised that I don't see clicked feedback. Is it normal? Is it posible somehow to get feedback with transparent background?

My button:
<Button Image="search.png" Clicked="ButtonClicked" BackgroundColor="#00000000" BorderRadius="0" BorderColor="#00000000" BorderWidth="0"/>

Tagged:

Best Answers

Answers

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭

    You Couldn change the icon in Clicked event..

  • JonAlzaJonAlza ESMember ✭✭

    If I set Opacity to 0.0 (I want transparen background) the image disappears.

  • JonAlzaJonAlza ESMember ✭✭

    @AlessandroCaliaro said:
    You Couldn change the icon in Clicked event..

    Maybe is better to change the background color, but I don't know how to implement this change and undone it after 1 second.

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭
    edited September 2016

    I can tell you for fact that a button with transparent color DOES receive click event. I do it in several places.
    I'll also say that an Image button just doesn't work as advertised.
    I always just make a grid, place an image, then drop a button on top of it to take the handler.
    Keep in mind the Z-order of things. The button has to be on top if you want it to receive gestures.

                <!--#region Back button-->
                <!--
                    Button.Image property is screwed up in Xamarin so I stack a
                    transparent button on top of my image inside a grid so everything
                    just auto-sizes to the available space
                -->
                <Grid IsVisible="{Binding ShowNavBack}">
                    <Image BackgroundColor="Transparent"
                           IsOpaque="True"
                           Source="{Binding AppVM.BackButton}" />
                    <Button BackgroundColor="Transparent"
                            Command="{Binding AppVM.NavBackCommand}" />
                </Grid>
                <!--#endregion Back button-->
    
  • JohnHardmanJohnHardman GBUniversity mod
    edited September 2016

    @JonAlza - it depends what you mean by "I don't see clicked feedback". Do you mean that you don't visually see anything happen, or do you mean that the click handler or command does not get triggered?

    Also, which platforms are you targeting?

    I have many buttons built in a similar way to that described by @ClintStLaurent above, which although effectively invisible, do trigger click and command handlers.

    If using Opacity, be aware that setting it to 0 may prevent the Button being rendered (depends which platform you are on), so use 0.02 instead of 0 if you find it necessary. At 0.02 the human eye won't see it, but the Button will be rendered.

    If you want additional visual feedback, you can scale the button briefly using ScaleTo first with an argument of say 1.2, then call it again with an argument of 1.

  • JonAlzaJonAlza ESMember ✭✭

    @ClintStLaurent , @JohnHardman Than you for your answers.

    I'm going to show you my xaml with more details. The styles:

    <ContentPage.Resources>
      <ResourceDictionary>
        <Style x:Key="transparentButtonStyle" TargetType="Button">
          <Setter Property="HorizontalOptions" Value="Center"/>
          <Setter Property="VerticalOptions" Value="Center"/>
          <Setter Property="WidthRequest" Value="40"/>
          <Setter Property="HeightRequest" Value="40"/>
    
          <Setter Property="BackgroundColor" Value="Transparent"/>
          <Setter Property="BorderColor" Value="Transparent"/>
          <Setter Property="BorderRadius" Value="0"/>
          <Setter Property="BorderWidth" Value="0"/>
        </Style>
    
        <Style x:Key="searchButtonStyle" BasedOn="{StaticResource transparentButtonStyle}" TargetType="Button">
          <Setter Property="Image" Value="search.png"/>
        </Style>
    
        <Style x:Key="removeButtonStyle" BasedOn="{StaticResource transparentButtonStyle}" TargetType="Button">
          <Setter Property="Image" Value="delete.png"/>
        </Style>
      </ResourceDictionary>
    </ContentPage.Resources>
    

    Then I have 5 search buttons y 5 remove buttons in a StackLayout with Clicked events and Commands:

    <!-- Some viwes -->
    <Button Grid.Column="1" Style="{StaticResource searchButtonStyle}" Clicked="SearchContactButtonClicked"
            Command="{Binding SelectContactIdCommand}" CommandParameter="1"/>
    <Button Grid.Column="2" Style="{StaticResource removeButtonStyle}"
            Command="{Binding RemoveContactCommand}" CommandParameter="1"/>
    <!-- More views -->
    <Button Grid.Column="1" Style="{StaticResource searchButtonStyle}" Clicked="SearchContactButtonClicked"
            Command="{Binding SelectContactIdCommand}" CommandParameter="2"/>
    <Button Grid.Column="2" Style="{StaticResource removeButtonStyle}"
            Command="{Binding RemoveContactCommand}" CommandParameter="2"/>
    <!-- And more views -->
    <Button Grid.Column="1" Style="{StaticResource searchButtonStyle}" Clicked="SearchContactButtonClicked"
            Command="{Binding SelectContactIdCommand}" CommandParameter="5"/>
    <Button Grid.Column="2" Style="{StaticResource removeButtonStyle}"
            Command="{Binding RemoveContactCommand}" CommandParameter="5"/>
    

    As you can see the CommandParameter value is changing in each pair of buttons (from 1 to 5). Clicked event and Command are handled correctly. But when I press the button there is no "feedback" (I mean "visual feedback"). If I set the background to gray, when I press the button the background color changes to black for a miliseconds. I'm working only in Android and background changing is the standard for this visual feedback, so scale the button isn't an option. And change the Opacity is discarted, the image disappears. I'm new in Xamarin and Android behaviour and I don't want to do "strange" things.

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    You're attaching both Clicked event handler AND commands, to each button?
    I guess that's programmatically legal, but I've never seen anyone do that.

    there is no "feedback" (I mean "visual feedback"). If I set the background to gray, when I press the button the background color changes to black for a miliseconds.

    That sounds like visual feedback to me: The color changes when you click it.
    Instead of saying "I don't see what I expect" how about telling us what you do expect as visual feedback? What do you think should happen visually, that isn't?

  • JonAlzaJonAlza ESMember ✭✭

    @ClintStLaurent said:
    You're attaching both Clicked event handler AND commands, to each button?
    I guess that's programmatically legal, but I've never seen anyone do that.

    The command is to bound to the app's logic (ViewModel) and and Clicked event is only for navigate to another page (View):

    private async void SearchButtonClicked(object sender, EventArgs e)
    {
        await this.Navigation.PushAsync(new SearchPage());
    }
    

    Is it posible to navigate to another page from the ViewModel? But do changes in the View from the ViewModel isn't appropriate.

    there is no "feedback" (I mean "visual feedback"). If I set the background to gray, when I press the button the background color changes to black for a miliseconds.

    That sounds like visual feedback to me: The color changes when you click it.
    Instead of saying "I don't see what I expect" how about telling us what you do expect as visual feedback? What do you think should happen visually, that isn't?

    In Xamarin.Forms if you set de BackgroundColor property the visual feedback is this: the color goes darker (this is what I expect). If button's background color is transparent when you click on it nothing happens.

    Check this example:

    <StackLayout BackgroundColor="Gray" Padding="5">
        <Button Text="Red button" BackgroundColor="Red"/>
        <Button Text="Yellow button" BackgroundColor="Yellow"/>
        <Button Text="Gray button" BackgroundColor="Gray"/>
        <Button Text="Transparent button" BackgroundColor="Transparent"/>
        <Button Text="Green button" BackgroundColor="Green"/>
        <Button Text="Blue button" BackgroundColor="Blue"/>
        <Button Text="Purple button" BackgroundColor="Purple"/>
    </StackLayout>
    

    This is what I expect with transparent button: the same behaviour like gray button. But without having to set the background color of the StackLayout.

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    In Xamarin.Forms if you set de BackgroundColor property the visual feedback is this: the color goes darker (this is what I expect). If button's background color is transparent when you click on it nothing happens.

    What would a darker version of transparent be? I can't imagine what that could be. Working through the math of tinting the RGB values... Zero times anything is still zero.

  • JonAlzaJonAlza ESMember ✭✭

    Thank you again.

Sign In or Register to comment.