Multiple Buttons with Background Images

General
1

Hello again,

After getting the first button to work I tried to implement styling for another button in MainView.ux but I’m now getting an error. Is there anything in this code that stands out to you as why there might be a problem? Do I need to give unique names to certain elements?

If I comment out the BentleyButton in the MainView.ux and also in KeyStage1.ux (where the button is located) the preview runs fine. I need to have several buttons on one page though.

Thanks

<!-- ........................ BUTTON STYLING ........................... -->

<!-- ........................ AKED BUTTON STYLING ........................... -->

<Button ux:Class="AkedButton" IgnoreStyle="true" ClipToBounds="false" 
  Margin="0,0,0,4" Padding="20,7,20,7" Name="self">
  <Fuse.BasicTheme.ButtonText ux:Name="buttonText" TextColor="#FFF" 
  Value="{Property self.Text}" TextAlignment="Left"/>
  <Rectangle Layer="Background" CornerRadius="15" Width="75%" Height="70">
  <ImageFill File="assets/buttons/akedbutton.png" StretchMode="UniformToFill" ux:Name="buttonBg"/>
  </Rectangle>
  <WhileHovering>
  <Change buttonBg.Color="#0A4C75" Duration="0.3" Easing="CircularIn"/>
  <Change buttonText.TextColor="#fff" Duration="0.3" Easing="CircularIn"/>
  </WhileHovering>
  </Button> 

<!-- ........................ BENTLEY BUTTON STYLING ........................... -->

<Button ux:Class="BentleyButton" IgnoreStyle="true" ClipToBounds="false" 
  Margin="0,0,0,4" Padding="20,7,20,7" Name="self">
  <Fuse.BasicTheme.ButtonText ux:Name="buttonText" TextColor="#FFF" 
  Value="{Property self.Text}" TextAlignment="Left"/>
  <Rectangle Layer="Background" CornerRadius="15" Width="75%" Height="70">
  <ImageFill File="assets/buttons/bentleybutton.png" StretchMode="UniformToFill" ux:Name="buttonBg"/>
  </Rectangle>
  <WhileHovering>
  <Change buttonBg.Color="#0A4C75" Duration="0.3" Easing="CircularIn"/>
  <Change buttonText.TextColor="#fff" Duration="0.3" Easing="CircularIn"/>
  </WhileHovering>
  </Button>

file
bjGFvTVFPlPn-legacy-files-RCduStYsyCP0DHNx-xV4vNOi2BoU5kHeN4rcmhRta.png1396×134

2

I forgot to mention, is there a way of locking the button text to the button so it scales and stays in the same position? When I preview it on different devices it moves about.

Thanks

on iPad:

file
X4VRv2B0C0D6-legacy-files-RUVjqCpYHTqdXrdX-Ab-koVjx60LaVkJZG20QmKxT.png1432×534

3

on iPhone:

file
B9dXeWzy730Q-legacy-files-vjrTqJNEnX6QX4Qj-b30vb2WfYBGw9MVC4zSJKH8o.png710×676

4

I’ve managed to sort the code out to show multiple buttons with background images - I’m just trying to work out how to position the text based on the size of the button?

5

You might have too much Padding on your button. If the button becomes smaller than the padding you set, you might end up moving the content away from the center.

6

Can you explain your code ?