How to make a transparent button on top of an image?

fred123fred123 USMember

I am trying to create an effect similar to this in xaml:

It seems like making the opacity of the button to 0.5 does not do anything to make it transparent.

Can someone lend their expertise on this how to accomplish this situation?

Best Answer

Answers

  • JohnHardmanJohnHardman GBUniversity mod

    @fred123 - Opacity should do what you want. I've just checked on UWP and it does what I would expect.

    Can you post your code?

  • fred123fred123 USMember
    edited July 2016

    Thank you for answering John;

    The following is my code, I would like to have a semi-transparent background on the button but it seems like it always come out solid gray.

    <?xml version="1.0" encoding="utf-8" ?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:local="clr-namespace:App2"
                 BackgroundImage="Pattern.png"
                 x:Class="App2.MainPage">
    
      <Button Text="Button" HorizontalOptions="Center" VerticalOptions="Center" Opacity="50" />
    
    </ContentPage>
    
  • JohnHardmanJohnHardman GBUniversity mod

    @fred123 - I don't do XAML, but I would expect Opacity to be a value from 0 to 1. Try changing your 50 to 0.5

  • fred123fred123 USMember

    @JohnHardman said:
    @fred123 - I don't do XAML, but I would expect Opacity to be a value from 0 to 1. Try changing your 50 to 0.5

    Thank you for input, I have changed it to 0.5 but it still isn't semi-transparent.

  • fred123fred123 USMember

    @JohnHardman said:
    @fred123 - I just tried it using the following XAML and it worked:

    <?xml version="1.0" encoding="utf-8" ?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ViewsUsingXamarinForms.Page1"
            BackgroundImage="Assets/Square1240x1240Logo.png">
        <Button Text="Button" HorizontalOptions="Center" VerticalOptions="Center" Opacity="0.5" BackgroundColor="Yellow"/>
    </ContentPage>
    

    Thank you John, I was able to confirm it was working after I reinstalled Visual Studio 2015. For some reason it wasn't being transparent even with opacity set to 0.5.

    All is working now, thank you again!

Sign In or Register to comment.