Button Background Image

How-to Discussions
1

Hello,

I’ve been playing around with this code I found in the forum but I’m struggling with implementing an image as a button background rather than a colour. Is it possible to do and also to include text over the image on the button?

Also do I need to change ux:Class to ux:Global, include it in my MainView.ux and be able to use “ActionButton” to apply the styling to any button in the app?

Thanks in advance

<App>
  <Panel>
  <Button ux:Class="ActionButton" IgnoreStyle="true" ClipToBounds="false" 
  Margin="0,0,0,4" Padding="20,7,20,7" Name="self">
  <Fuse.BasicTheme.ButtonText ux:Name="buttonText" TextColor="#0A4C75" 
  Value="{Property self.Text}" TextAlignment="Center"/>
  <Rectangle Layer="Background" CornerRadius="25">
    <SolidColor ux:Name="buttonBg" Color="#fff"/>
    <Stroke Width="1" ux:Name="buttonStroke" Brush="#0A4C75"/>
  </Rectangle>
  <WhileHovering>
    <Change buttonStroke.Width="1" Duration="0.3" Easing="CircularIn"/>
    <Change buttonBg.Color="#0A4C75" Duration="0.3" Easing="CircularIn"/>
    <Change buttonText.TextColor="#fff" Duration="0.3" Easing="CircularIn"/>
  </WhileHovering>
  </Button>

  <Button ux:Class="SpecialButton" IgnoreStyle="true" ClipToBounds="False" 
  Margin="0,0,0,4" Background="#bdc3c7" Name="sself">
    <Fuse.BasicTheme.ButtonText TextColor="#FFF" Font="RobotoMedium" 
    Value="{Property sself.Text}" TextAlignment="Center"/>
  </Button>

  <Grid ColumnCount="2" Alignment="VerticalCenter">
    <ActionButton Text="Login"/>
    <SpecialButton Text="Button"/>
  </Grid>
  </Panel>
</App>
2

Hi Paul!

You can use an ImageFill instead of a SolidColor in your background Rectangle. Something like this:

<Rectangle Layer="Background" CornerRadius="25">
    <ImageFill File="yourImage" ux:Name="buttonBg"/>
    <Stroke Width="1" ux:Name="buttonStroke" Brush="#0A4C75"/>
</Rectangle>
3

Thanks, I’ll give it a try.

Cheers Kristian