Confirm box

Show and Tell
1

I just developed a ux class to work as a confirm box (I’ve used some codes from fuse examples)

Here is a screenshot of how it looks:

file
hzhGiof36vgT-image-1484660807372.jpg377×719

Here is the code:

Confirm.ux

<Panel ux:Class="Confirm" ux:Name="root">
	<Panel Margin="0,0,0,0" Opacity="0" ux:Name="AddToBasketPanel" HitTestMode="None">
		<Rectangle ux:Name="addTaskButtons" Layer="Background" Margin="0,0,0,0">
			<Tapped>
				<Set root.Show="False"/>
			</Tapped>
		</Rectangle>

		<Text ux:Name="text" Value="{Property root.Text}" Alignment="Center" Color="White" Offset="0,-500" TextWrapping="Wrap" FontSize="28" />

		<StackPanel ux:Name="ButtonsPanel" Orientation="Horizontal" Alignment="HorizontalCenter" Offset="0,500" Y="60%">
			<Rectangle CornerRadius="20" Margin="10" Width="150" Color="White" Padding="10" Height="40" Fill="Red">
				<Text Alignment="Center" Font="FNT_ArialBold" Color="White">No</Text>
				<Tapped>
					<Set root.Show="False"/>
				</Tapped>
			</Rectangle>

			<Rectangle CornerRadius="20" Margin="10" Width="150" Color="White" Padding="10" Height="40" Fill="Green">
				<Text Alignment="Center" Font="FNT_ArialBold" Color="White">Yes</Text>
				<Tapped>
					<Set root.Show="False"/>
					<RaiseUserEvent EventName="Event_Handler" />
				</Tapped>
			</Rectangle>
		</StackPanel>

		<WhileTrue ux:Name="show" Value="{Property root.Show}">
			<Change text.Offset="0,0" Duration="0.2" Delay="0.2" DelayBack="0" Easing="CubicOut"/>

			<Change addTaskButtons.Color="#000d" Duration="0.15" DelayBack="0.25"/>

			<Change ButtonsPanel.Offset="0,0" Duration="0.30" Delay="0" Easing="QuinticInOut"/>

			<Change AddToBasketPanel.HitTestMode="Children"/>
			<Change AddToBasketPanel.Opacity="1" Duration="0.5" Easing="QuinticOut"/>
		</WhileTrue>

	</Panel>

	<bool ux:Property="Show" />
	<UserEvent ux:Name="Event_Handler" />
	<OnUserEvent ux:Class="Handler" EventName="Event_Handler" />
	<object ux:Property="Handler" />
	<string ux:Property="Text" />
</Panel>

Usage:

<Confirm ux:Name="confirmDelete" Show="False" Text="Clear all items in the basket?">
	<Handler Handler="{clearBasket}" />
</Confirm>
<Rectangle Width="120" Height="40">
	<SolidColor Color="#fe6c6f" />
	<Tapped>
		<Set confirmDelete.Show="True" />
	</Tapped>
</Rectangle>
2

Nice stuff!

You should host your code on Github :slight_smile: