# How to draw Two different Custom style Button?

**URL:** <https://forums.fusetools.com/t/how-to-draw-two-different-custom-style-button/6097>\
**Category:** How-to Discussions\
**Created:** [November 23, 2015, 7:01am UTC](https://forums.fusetools.com/t/how-to-draw-two-different-custom-style-button/6097 "2015-11-23T07:01:56Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kannan](https://avatars.discourse-cdn.com/v4/letter/k/7ba0ec/32.png) [@Kannan](https://forums.fusetools.com/u/Kannan)\
**Post date:** [November 23, 2015, 7:01am UTC](https://forums.fusetools.com/t/how-to-draw-two-different-custom-style-button/6097/1 "2015-11-23T07:01:56Z")

</div>

Hi,

I Need to draw Two Different Custom Style Button. But, Error Occured.

\<Fuse.BasicTheme.ButtonText TextColor="#FFF" Font=“RobotoMedium” Value="{Property self.Text}" TextAlignment=“Center”/\>

---

<div class="post-metadata">

**Author:** ![Bjorn-Olav\_Strand](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/bjorn-olav_strand/32/583_2.png) [@Bjorn-Olav\_Strand](https://forums.fusetools.com/u/Bjorn-Olav_Strand)\
**Post date:** [November 23, 2015, 8:22am UTC](https://forums.fusetools.com/t/how-to-draw-two-different-custom-style-button/6097/2 "2015-11-23T08:22:34Z")

</div>

Please post your `.ux` and the log from `uno build` or `fuse preview`

---

<div class="post-metadata">

**Author:** ![Kannan](https://avatars.discourse-cdn.com/v4/letter/k/7ba0ec/32.png) [@Kannan](https://forums.fusetools.com/u/Kannan)\
**Post date:** [November 23, 2015, 9:14am UTC](https://forums.fusetools.com/t/how-to-draw-two-different-custom-style-button/6097/3 "2015-11-23T09:14:02Z")

</div>

"

```auto
    <!-- StatusBarBG -->
    <StatusBarBackground />
    <iOS.StatusBarConfig Style="Light"/>

    <!-- Fonts -->
    <Font File="Assets/Fonts/SourceSansPro-Black.ttf" ux:Global="Bold" />
    <Font File="Assets/Fonts/SourceSansPro-Regular.ttf" ux:Global="Regular" />

    <JavaScript File="MainView.js" />

    <Panel>
        <Style>
            <Page ux:InheritStyle="False">
                <EnteringAnimation>
                    <Move X="-1" RelativeTo="ParentSize" Duration="0.1" Easing="CircularInOut" />
                </EnteringAnimation>
                <ExitingAnimation>
                    <Move X="1" RelativeTo="ParentSize" Duration="0.1" Easing="CircularInOut" />
                </ExitingAnimation>
            </Page>
            <Text Font="Regular" FontSize="14" />
            <Button ux:InheritStyle="false" ClipToBounds="false" 
                Margin="0,0,0,4" Padding="20,7,20,7" Name="self">
                <Fuse.BasicTheme.ButtonText ux:Name="buttonText" TextColor="#0A4C75" Font="Regular" 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>
        </Style>

        <HierarchicalNavigation ux:Name="nav" Duration="0.5" Easing="CubicInOut" />

        <!-- Login Page -->
        <Page ux:Name="Login" Width="100%" Margin="30,0,30,0" Alignment="Center">
            <StackPanel>
                <Image File="Assets/Images/logo.png" Width="137" Height="48" StretchMode="UniformToFill" Margin="0, 0, 0, 50" Alignment="HorizontalCenter" Opacity="1"></Image>
                <Text Value="Username" />
                <TextInput ux:Name="Username" Value=""></TextInput>
                <Text Value="Password" />
                <TextInput ux:Name="Password" IsPassword="true" />
                <Button Text="Login" Alignment="Center" ux:Name="circleButton">
                    <Clicked>
                        <NavigateTo Context="nav" Target="Dashboard" />
                    </Clicked>
                </Button>
            </StackPanel>
        </Page>

        <!-- Dashboard Page -->
        <Page ux:Name="Dashboard">
            <EdgeNavigator ux:Name="EdgeNavigator">
                <Sidebar Width="180" ux:Name="menu" EdgeNavigation.Edge="Left">
                    <ActivatingAnimation>
                        <Change mainAppTranslation.X="180" />
                        <!-- Change to cross out -->
                        <Change topMenuTranslation.Y="0" />
                        <Change bottomMenuTranslation.Y="0" />
                        <Change middleRectangle.Opacity="0" Easing="CircularOut" />
                        <Change topMenuRotation.Degrees="45" Easing="ExponentialIn" />
                        <Change bottomMenuRotation.Degrees="-45" Easing="ExponentialIn" />
                        <Change topRectangle.Width="28" />
                        <Change bottomRectangle.Width="28" />
                    </ActivatingAnimation>
                </Sidebar>
                <DockPanel>
                    <Translation ux:Name="mainAppTranslation" />
                    <StackPanel Dock="Top" Background="#0A4C75">
                        <!-- This is the top ledge -->
                        <Grid ColumnData="auto,1,1">
                            <Panel Margin="5,5,5,5" Height="32" Width="32" HitTestMode="LocalBounds">
                                <Clicked>
                                    <Set EdgeNavigator.Active="menu" />
                                </Clicked>
                                <Rectangle ux:Name="topRectangle" Height="2" Width="26" Fill="#fff">
                                    <Translation Y="-9" ux:Name="topMenuTranslation" />
                                    <Rotation ux:Name="topMenuRotation" />
                                </Rectangle>
                                <Rectangle ux:Name="middleRectangle" Height="2" Width="26" Fill="#fff" />
                                <Rectangle ux:Name="bottomRectangle" Height="2" Width="26" Fill="#fff">
                                    <Translation Y="9" ux:Name="bottomMenuTranslation" />
                                    <Rotation ux:Name="bottomMenuRotation" />
                                </Rectangle>
                            </Panel>

                            <Text FontSize="22" Alignment="VerticalCenter" TextAlignment="Left" Margin="5,0,0,0" Value="RCT Sports" TextColor="#fff" Padding="2">
                            </Text>

                            <Panel Margin="5,5,5,5" Height="32" Alignment="Right" Width="32">
                                <Button ux:Name="backButton" Alignment="Right" Width="90" IgnoreStyle="true"
                                        Padding="20,0,0,0" Height="32">
                                    <Image File="Assets/Images/team.png" Alignment="Right" Height="32" Color="#fff"/>
                                    <Clicked>
                                        <NavigateTo Context="nav" Target="TeamPractice" />
                                    </Clicked>
                                </Button>
                            </Panel>
                        </Grid>
                    </StackPanel>
                    <ScrollView>
                        <StackPanel>
                            <Text Value="Welcome to The Dashboard" FontSize="18" Margin="0,10,0,10" Alignment="Center" />
                            <Rectangle Height="1" Width="100" Margin="0,0,0,20">
                                <SolidColor Color="#eee" />
                            </Rectangle>
                            <MultiLayoutPanel ux:Name="stats" Margin="0,0,0,20">
                                <GridLayout ColumnCount="5" Rows="1"/>
                                <StackPanel ux:Name="Pos">
                                    <Stats>QB</Stats>
                                    <Relations>Position</Relations>
                                </StackPanel>
                                <Rectangle Height="40" Width="1">
                                    <SolidColor Color="#eeeeeeff" />
                                </Rectangle>
                                <StackPanel ux:Name="Hgt">
                                    <Stats>6'2</Stats>
                                    <Relations>Height</Relations>
                                </StackPanel>
                                <Rectangle Height="40" Width="1">
                                    <SolidColor Color="#eeeeeeff" />
                                </Rectangle>
                                <StackPanel ux:Name="Wgt">
                                    <Stats>209</Stats>
                                    <Relations>Weight</Relations>
                                </StackPanel>
                            </MultiLayoutPanel>
                            <Button Text="Back" Alignment="Center">
                                <Clicked>
                                    <NavigateTo Context="nav" Target="Login" />
                                </Clicked>
                            </Button>
                        </StackPanel>
                    </ScrollView>
                </DockPanel>
            </EdgeNavigator>
        </Page>

        <!-- Team and Practice Page -->
        <Page ux:Name="TeamPractice">
            <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>
            <DockPanel>
                <StackPanel Dock="Top" Background="#0A4C75">
                    <!-- This is the top ledge -->
                    <Grid ColumnData="auto,auto">
                        <Panel Margin="5,5,5,5" Height="32" Width="32" HitTestMode="LocalBounds">
                            <Clicked>
                                <NavigateTo Context="nav" Target="Dashboard" />
                            </Clicked>
                            <Rectangle ux:Name="topRectangle" Height="2" Width="15" Fill="#fff">
                                <Translation Y="-6" X="-6" ux:Name="topMenuTranslation" />
                                <Rotation Degrees="-45" ux:Name="topMenuRotation" />
                            </Rectangle>
                            <Rectangle ux:Name="middleRectangle" Height="2" Width="25" Fill="#fff" />
                            <Rectangle ux:Name="bottomRectangle" Height="2" Width="15" Fill="#fff">
                                <Translation Y="6" X="-6" ux:Name="bottomMenuTranslation" />
                                <Rotation Degrees="45" ux:Name="bottomMenuRotation" />
                            </Rectangle>
                        </Panel>
                        <Text FontSize="22" Alignment="VerticalCenter" TextAlignment="Left" Margin="5,0,0,0" Value="RCT Sports" TextColor="#fff" Padding="2">
                        </Text>
                    </Grid>
                </StackPanel>
                <StackPanel Background="#0A4C75" Dock="Top">
                    <MultiLayoutPanel Height="50" ux:Name="tabBar">
                        <GridLayout ColumnCount="2" Rows="1"/>
                        <Panel ux:Name="Teams">
                            <Placeholder>
                                <Rectangle ux:Name="indicator" Alignment="Bottom" Height="4" Opacity="0.9" Fill="#fff">
                                    <LayoutAnimation>
                                        <Move RelativeTo="LayoutChange" X="1" Duration="0.4" Easing="BackIn"/>
                                    </LayoutAnimation>
                                </Rectangle>
                            </Placeholder>
                            <Button Text="Team">
                                <Clicked>
                                    <Set navigation.Active="Team" />
                                </Clicked>
                            </Button>
                        </Panel>
                        <Panel ux:Name="Practices">
                            <Placeholder Target="indicator"/>
                            <Button Text="Practice">
                                <Clicked>
                                    <Set navigation.Active="Practice" />
                                </Clicked>
                            </Button>
                        </Panel>
                    </MultiLayoutPanel>
                </StackPanel>
                <ScrollView>
                    <PageControl ux:Name="navigation">
                        <Text ux:Class="WelcomeText" FontSize="30" Alignment="Center"/>
                        <Page ux:Name="Team" Background="#fff">
                            <WhileActive Threshold="0.5">
                                <Set tabBar.LayoutElement="Teams" />
                            </WhileActive>
                            <WelcomeText>Welcome to Team</WelcomeText>
                        </Page>
                        <Page ux:Name="Practice" Background="#fff">
                            <WhileActive Threshold="0.5">
                                <Set tabBar.LayoutElement="Practices" />
                            </WhileActive>
                            <WelcomeText>Welcome to Practice</WelcomeText>
                        </Page>
                    </PageControl>
                </ScrollView> </DockPanel>
        </Page>
    </Panel>
</DockPanel>

```

"

## Error Summary

D:\Fuse\New\RCT\RCT.build\Simulator\Local28\Cache\GeneratedCode\MainView.g.uno(243,25): E2009: Call to ‘MainView.Template2(MainView)’ has some invalid arguments (MainView.Template3)

D:\Fuse\New\RCT\RCT.build\Simulator\Local28\Cache\GeneratedCode\MainView.g.uno(244,86): E3104: MainView does not contain a member called ‘self’. Could you be missing a package reference?

---

<div class="post-metadata">

**Author:** ![Bjorn-Olav\_Strand](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/bjorn-olav_strand/32/583_2.png) [@Bjorn-Olav\_Strand](https://forums.fusetools.com/u/Bjorn-Olav_Strand)\
**Post date:** [November 23, 2015, 9:38am UTC](https://forums.fusetools.com/t/how-to-draw-two-different-custom-style-button/6097/4 "2015-11-23T09:38:19Z")

</div>

Minimal reproduction:

```auto
<App>
  <Panel>
    <Style>
      <Button ux:InheritStyle="false" 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: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>
  </Panel>
</App>

```

```auto
/.cache/GeneratedCode/MainView.g.uno(125,25): E2009: Call to 'MainView.Template(MainView)' has some invalid arguments (MainView.Template1)
/.cache/GeneratedCode/MainView.g.uno(126,86): E3104: MainView does not contain a member called 'self'. Could you be missing a package reference?

```

In short: you can’t have to templates for Button. You need one of them to have another name, or do the other button without style. I’m sure someone from Fuse can answer here how to solve this.

---

<div class="post-metadata">

**Author:** ![Kannan](https://avatars.discourse-cdn.com/v4/letter/k/7ba0ec/32.png) [@Kannan](https://forums.fusetools.com/u/Kannan)\
**Post date:** [November 23, 2015, 10:10am UTC](https://forums.fusetools.com/t/how-to-draw-two-different-custom-style-button/6097/5 "2015-11-23T10:10:54Z")

</div>

![file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/Z8Aqaj5XubRq-legacy-files-YeKt254oiBpsQxiu-iQvljxvojxnGpXq0neFlK0ee.jpg)

I need to Different Button with different Style in Single Page. How can i Draw?

Give me a code for better.

---

<div class="post-metadata">

**Author:** ![edA-qa\_mort-ora-y](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/eda-qa_mort-ora-y/32/124_2.png) [@edA-qa\_mort-ora-y](https://forums.fusetools.com/u/edA-qa_mort-ora-y)\
**Post date:** [November 23, 2015, 10:25am UTC](https://forums.fusetools.com/t/how-to-draw-two-different-custom-style-button/6097/6 "2015-11-23T10:25:52Z")

</div>

You can create two different button classes and style them differently.

```auto
<Button ux:Class="ActionButton"/>
<Button ux:Class="SpecialButton"/>

```

This creates the `ActionButton` and `SpecialButton` types. You can then use them in your code instead of just `Button`.

---

<div class="post-metadata">

**Author:** ![Remi\_Pedersen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/remi_pedersen/32/432_2.png) [@Remi\_Pedersen](https://forums.fusetools.com/u/Remi_Pedersen)\
**Post date:** [November 23, 2015, 2:54pm UTC](https://forums.fusetools.com/t/how-to-draw-two-different-custom-style-button/6097/7 "2015-11-23T14:54:34Z")

</div>

Just to expand what edA-qa said to a full example:

```auto
<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>

```

Which makes this: ![file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/3f2cMgnRQbMB-legacy-files-Al1a2jDnY0ElW95w-od_GGvX6390tpF1vpjfrIUk9.png)

---

<div class="post-metadata">

**Author:** ![Kannan](https://avatars.discourse-cdn.com/v4/letter/k/7ba0ec/32.png) [@Kannan](https://forums.fusetools.com/u/Kannan)\
**Post date:** [November 25, 2015, 7:18am UTC](https://forums.fusetools.com/t/how-to-draw-two-different-custom-style-button/6097/8 "2015-11-25T07:18:58Z")

</div>

Thank You Remi Pedersen 🙂

This code only i expect from your side.

thanks a lot:)