Change button styling

How-to Discussions
1

I have a DockPanel that has Styled Buttons to fit the look of tabs for my MultiLayoutPanel.

<DockPanel Visibility="{HomeVisibility}">
            <Style>
                <Button ux:InheritStyle="false" ClipToBounds="False"
                    Margin="0,0,0,4" Background="#bdc3c7" Name="self">
                    <Fuse.BasicTheme.ButtonText TextColor="#FFF" Font="RobotoMedium" Value="{Property self.Text}"
                        TextAlignment="Center"/>
                </Button>
            </Style>

If I want to re-style the buttons inside the DockPanel ,to look like the original Button style, in my PageControl how would I do this?

2

I think that you should set a class to that styled button in order that only the buttons with that class are styled. Look here for information about styling: https://www.fusetools.com/learn/guides/fuselibs-styling

3

@Casey: The easiest way to do this is to create a new Button (subclass) that you style, and use the original as is.

<Button ux:Class="NewButton">
</Button>

And then:

<Style>
<NewButton>
</Style>

And use:

<NewButton />

Look at this excellent answer from Remi: https://www.fusetools.com/community/forums/howto_discussions/how_to_draw_two_different_custom_style_button

4

Okay thankyou Juanlu and Bjorn!

5

Any Panel can act as button, if you want to style something from scratch :slight_smile:

6

That sounds good I shall try that!