How do I reuse a component, while also styling inner elements of the component differently, depending on where I place it?

How-to Discussions
1

Tricky one to explain, so here’s an example:

PillButton.ux

<DockPanel ux:Class="PillButton">
    <Rectangle Layer="Background" CornerRadius="25">
        <SolidColor ux:Name="pillBackgroundColour" Color="#fff"/>
        <Stroke Width="1" ux:Name="pillOutlinecolour" Brush="#ccc"/>
    </Rectangle>
</DockPanel>
<Text ux:Class="PillButtonText" TextColor="#fff" FontSize="12" Margin="7,3" />

PageStyles.ux

<!-- Page 1 is red, so give it a red pill style -->
<Style ux:Class="Page1Style">
    <PillButton>
        <SolidColor ux:Name="pillBackgroundColour" Color="#f00"/>
        <Stroke Width="1" ux:Name="pillOutlinecolour" Brush="#f00"/>
    </PillButton>
    <!-- Yellow text because yellow, amirite? -->
    <!-- also, yes, I know, this is wrong. It's pseudo-code. :) -->
    <Set PillButtonText TextColor="#ff0" />
</Style>

<!-- Page 2 is blue, so give it a blue pill style -->
<Style ux:Class="Page2Style">
    <PillButton>
        <SolidColor ux:Name="pillBackgroundColour" Color="#00f"/>
        <!-- yellow outline, because yellow. -->
        <Stroke Width="1" ux:Name="pillOutlinecolour" Brush="#ff0"/>
    </PillButton>
    <!-- Green text. -->
    <Set PillButtonText TextColor="#0f0" />
</Style>

MainView.ux

<PageControl>
    <Page1Style>
        <Page ux:Name="page1">
            <PillButton>
                <PillButtonText Value="This is yellow text, on red background" />
            </PillButton>
        </Page>
    </Page1Style>
    <Page2Style>
        <Page ux:Name="page2">
            <PillButton>
                <PillButtonText Value="This is green text, on blue background, with a yellow outline around the pill" />
            </PillButton>
        </Page>
    </Page2Style>
</PageControl>

I’m sure I’m missing something simple here, as I’ve only just started with Fuse, but is this sort of thing even possible at the moment? My aim is to use a CSS-style approach, so as not to redefine entire structures just to change the colour scheme of inner elements.

Cheers, Dan

2

Hi!

As you seem to be aware of the errors in your PageStyles.ux code, im just gonna comment on the main error i see here.

In your MainView.ux, you should just add instances of your styles to the node whos sub-tree you want the style to be applied to.

<Page ux:Name="page1" >
    <Page1Style /> <!-- Page1Style is applied to the subtree og page1 -->
    <PillButton>
        <PillButtonText Value="This is yellow text, on red background" />
    </PillButton>
</Page>

<Page ux:Name="page2" >
    <Page2Style /> <!-- Page2Style is applied to the subtree og page2 -->
    <PillButton>
        <PillButtonText Value="This is green text, on blue background, with a yellow outline around the pill" />
    </PillButton>
</Page>

Adding children to the Page1Style/Page2Style instances, will just add more styling. That is why you are probably not seeing anything. :slight_smile:

I hope this helps