How to migrate this from <Style> to ux:Class

How-to Discussions
1

Can someone help me rewrite this:

<Style>
    <Button ux:InheritStyle="false" Background="#55ACEE" Name="self"> <Fuse.BasicTheme.ButtonText TextColor="#FFF" Font="RobotoMedium" Value="{Property self.Text}" TextAlignment="Center"/></Button>
</Style>

To something like:

<Button ux:Class="CustomButton" ...>
 // stuff
</Button>

Could someone explain how this would be done, with some explanation

2

Hi!

It’s pretty straight forward. Just put all properties and inner tags from the Button in Style on the class tag instead.

You can drop ux:InheritStyle now, just delete it.

Next step is to start using CustomButton instead of Button whenever you want to use your custom class.

3

Yea I understand that part, but the style is not the same when using:

<Button ux:Class="TabButton" Name="self" Background="#55ACEE">
    <Fuse.BasicTheme.ButtonText TextColor="#FFF" Font="RobotoMedium" Value="{Property self.Text}" TextAlignment="Center"/>
</Button>

The background color of the button doesn’t change for some reason, the ux:InheritStyle="false" made that work, but its not allowed on the <Button> unless its inside a <Style> tag

4

Your code doesn’t make much sense. What are you actually trying to do here?

With this level of customization, consider just using a <Panel> as the base class, and build your control from scratch.

5

Yea that’s what I ended up doing thanks.