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”/>
Please post your .ux and the log from uno build or fuse preview
"
<!-- 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?
Minimal reproduction:
<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>
/.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.
I need to Different Button with different Style in Single Page. How can i Draw?
Give me a code for better.
You can create two different button classes and style them differently.
<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.
Just to expand what edA-qa said to a full example:
<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: 
Thank You Remi Pedersen 
This code only i expect from your side.
thanks a lot:)