UWP Button pressed image

Question

I'm working on a UWP app targeted phones and tablets, and am currently implementing a feature for taking a picture with the camera.

I've put a button control on the camera preview, and used an icon to represent the button (see XAML code below).

My problem is, that when i press the button, it turns into a semi transparent grey square, which is far from the green cirle I'm using as icon.

How can I use an other icon for when the button is pressed

<Grid >
    <!--Camera preview-->
    <CaptureElement Name="PreviewControl" Stretch="Uniform"/>

    <Button Tapped="btnCancel_Tapped" Name="btnCancel" Margin="5,0,0,10" HorizontalAlignment="Left" VerticalAlignment="Bottom" Height="50" Width="65">
        <Button.Background>
            <ImageBrush ImageSource="/Assets/images/btn_cancel.png">
            </ImageBrush>
        </Button.Background>
    </Button>
    <Button HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,0,0,5" Name="btnPhoto" Tapped="btnPhoto_Tapped" IsEnabled="False" Width="70" Height="70">
        <Button.Background>
            <ImageBrush ImageSource="/Assets/Images/btn_takepicture_off.png">
            </ImageBrush>
        </Button.Background>
    </Button>

</Grid>

Answer 1

If i were you, I'd make that image inside of the Button's template. It not only will get rid of unwanted existing elements/looks of the button (such as they grey square), it will also allow you to easily give it behaviors such as what it does when you mouse-over / press it.

To do this in the most simplistic way, paste the following inside your <Button></Button>:

    <Button.Template>
        <ControlTemplate TargetType="Button">
            [[Anything you want your button to be made of goes here]]
        </ControlTemplate>
    </Button.Template>

In the area I marked "[[Anything you want your button to be made of goes here]]" you can now build exactly what you want your button to look like with anything from <Grid/> to <Image/> to simplistic parts such as <Ellipse/> or <Rectangle/>