Universal Windows Platform – Flip Control

Flip Control demonstrates how to create a Flip Panel Control

Step 1

If not already, follow Setup and Start on how to Install and get Started with Visual Studio 2017 or in Windows 10 choose Start, and then from the Start Menu find and select Visual Studio 2017.

vs2017

Step 2

Once Visual Studio Community 2017 has started, from the Menu choose File, then New then Project…

vs2017-file-new-project

Step 3

From New Project choose Visual C# from Installed, Templates then choose Blank App (Universal Windows) and then type in the Name as FlipControl and select a Location and then select Ok to create the Project
vs2017-new-project-flip-control

Step 4

Then in New Universal Windows Project you need to select the Target Version this should be at least the Windows 10 Fall Creators Update (10.0; Build 16299) and the Minimum Version to be the same.

vs2017-target-platform

The Target Version will control what features your application can use in Windows 10 so by picking the most recent version you’ll be able to take advantage of those features. To make sure you always have the most recent version, in Visual Studio 2017 select Tools Extensions and Updates… then and then see if there are any Updates

Step 5

Once done select from the Menu, Project, then Add New Item…

vs2017-project-add-new-item

Step 6

From the Add New Item window select Visual C#, then XAML from Installed then select Templated Control from the list, then type in the Name as FlipPanel.cs before selecting Add to add the file to the Project

vs2017-add-new-item-flip-control

Step 7

Once in the Code View for Dial.cs below the end of public FlipPanel() { … } the following Code should be entered:

public static readonly DependencyProperty FrontContentProperty =
DependencyProperty.Register("FrontContent", typeof(object),
typeof(FlipPanel), null);

public static readonly DependencyProperty BackContentProperty =
DependencyProperty.Register("BackContent", typeof(object),
typeof(FlipPanel), null);

public static readonly DependencyProperty IsFlippedProperty =
DependencyProperty.Register("IsFlipped", typeof(bool),
typeof(FlipPanel), new PropertyMetadata(true));

public static readonly DependencyProperty CornerRadiusProperty =
DependencyProperty.Register("CornerRadius", typeof(CornerRadius),
typeof(FlipPanel), null);

public object FrontContent
{
	get { return GetValue(FrontContentProperty); }
	set { SetValue(FrontContentProperty, value); }
}

public object BackContent
{
	get { return GetValue(BackContentProperty); }
	set { SetValue(BackContentProperty, value); }
}

public bool IsFlipped
{
	get { return (bool)GetValue(IsFlippedProperty); }
	set { SetValue(IsFlippedProperty, value); }
}

public CornerRadius CornerRadius
{
	get { return (CornerRadius)GetValue(CornerRadiusProperty); }
	set { SetValue(CornerRadiusProperty, value); }
}

private void ChangeVisualState(bool useTransitions)
{
	if (IsFlipped)
	{
		VisualStateManager.GoToState(this, "Normal", useTransitions);
	}
	else
	{
		VisualStateManager.GoToState(this, "Flipped", useTransitions);
	}
}

protected override void OnApplyTemplate()
{
	base.OnApplyTemplate();
	Windows.UI.Xaml.Controls.Primitives.ToggleButton flipButton =
		(Windows.UI.Xaml.Controls.Primitives.ToggleButton)GetTemplateChild("FlipButton");
	if (flipButton != null)
	{
		flipButton.Click += (object sender, RoutedEventArgs e) =>
		{
			IsFlipped = !IsFlipped;
			ChangeVisualState(true);
		};
	}
	Windows.UI.Xaml.Controls.Primitives.ToggleButton flipButtonAlt =
		(Windows.UI.Xaml.Controls.Primitives.ToggleButton)GetTemplateChild("FlipButtonAlternative");
	if (flipButtonAlt != null)
	{
		flipButtonAlt.Click += (object sender, RoutedEventArgs e) =>
		{
			IsFlipped = !IsFlipped;
			ChangeVisualState(true);
		};
	}
	ChangeVisualState(false);
}

In the FlipPanel.cs there are Properties for FrontContent, BackContent, IsFlipped and CornerRadius for styling of the Control. ChangeVisualState is used to change the Control state between Normal and Flipped and is used by OnApplyTemplate to toggle between the states of the Control by responding to a Button that can “flip” the control between the front and back of the Control.

Step 8

Once done select from the Menu, Build, then Build Solution

vs2017-build-build-solution

Step 9

From Solution Explorer select Generic.xaml

vs2017-generic-flip-control

Step 10

From the Menu choose View and then Designer

vs2017-view-designer

Step 11

The XAML View will be displayed and in this remove the following XAML:

<Border
	Background="{TemplateBinding Background}"
	BorderBrush="{TemplateBinding BorderBrush}"
	BorderThickness="{TemplateBinding BorderThickness}">
</Border>

And replace it with the following XAML:

<Grid>
	<VisualStateManager.VisualStateGroups>
		<VisualStateGroup x:Name="ViewStates">
			<VisualStateGroup.Transitions>
				<VisualTransition To="Normal" From="Flipped" GeneratedDuration="0:0:0.5">
					<Storyboard>
						<DoubleAnimation Storyboard.TargetName="BackContentProjection"
						Storyboard.TargetProperty="RotationY" To="-90" Duration="0:0:0.5"/>
						<DoubleAnimation Storyboard.TargetName="FrontContentProjection"
						Storyboard.TargetProperty="RotationY" To="0" BeginTime="0:0:0.5" Duration="0:0:0.5"/>
					</Storyboard>
				</VisualTransition>
				<VisualTransition To="Flipped" From="Normal" GeneratedDuration="0:0:0.5">
					<Storyboard>
						<DoubleAnimation Storyboard.TargetName="FrontContentProjection"
						Storyboard.TargetProperty="RotationY" To="90" Duration="0:0:0.5"/>
						<DoubleAnimation Storyboard.TargetName="BackContentProjection"
						Storyboard.TargetProperty="RotationY" To="0" BeginTime="0:0:0.5" Duration="0:0:0.5"/>
					</Storyboard>
				</VisualTransition>
			</VisualStateGroup.Transitions>
			<VisualState x:Name="Normal">
				<Storyboard>
					<DoubleAnimation Storyboard.TargetName="BackContentProjection"
					Storyboard.TargetProperty="RotationY" To="-90" Duration="0"/>
				</Storyboard>
			</VisualState>
			<VisualState x:Name="Flipped">
				<Storyboard>
					<DoubleAnimation Storyboard.TargetName="FrontContentProjection"
					Storyboard.TargetProperty="RotationY" To="90" Duration="0"/>
					<DoubleAnimation Storyboard.TargetName="FlipButtonTransform"
					Storyboard.TargetProperty="Angle" To="90" Duration="0"/>
				</Storyboard>
			</VisualState>
		</VisualStateGroup>
	</VisualStateManager.VisualStateGroups>
	<Grid.RowDefinitions>
		<RowDefinition Height="Auto"/>
		<RowDefinition Height="Auto"/>
	</Grid.RowDefinitions>
	<Border Grid.Row="0"  BorderBrush="{TemplateBinding BorderBrush}"
		BorderThickness="{TemplateBinding BorderThickness}"
		CornerRadius="{TemplateBinding CornerRadius}"
		Background="{TemplateBinding Background}">
		<ContentPresenter Content="{TemplateBinding FrontContent}"/>
		<Border.Projection>
			<PlaneProjection x:Name="FrontContentProjection"/>
		</Border.Projection>
	</Border>
	<Border Grid.Row="0" BorderBrush="{TemplateBinding BorderBrush}"
		BorderThickness="{TemplateBinding BorderThickness}"
		CornerRadius="{TemplateBinding CornerRadius}"
		Background="{TemplateBinding Background}">
		<ContentPresenter Content="{TemplateBinding BackContent}"/>
		<Border.Projection>
			<PlaneProjection x:Name="BackContentProjection"/>
		</Border.Projection>
	</Border>
	<ToggleButton Grid.Row="1" RenderTransformOrigin="0.5,0.5" Margin="0,10,0,0" HorizontalAlignment="Center" x:Name="FlipButton">
		<ToggleButton.Template>
			<ControlTemplate>
				<Grid>
					<Ellipse Width="50" Height="50" Fill="{ThemeResource SystemControlHighlightAccentBrush}"/>
					<Path RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Center" VerticalAlignment="Center"
					Data="M2,3L9,10 16,3" Stroke="{ThemeResource SystemControlBackgroundAltHighBrush}" StrokeThickness="4" />
				</Grid>
			</ControlTemplate>
		</ToggleButton.Template>
		<ToggleButton.RenderTransform>
			<RotateTransform Angle="-90" x:Name="FlipButtonTransform"/>
		</ToggleButton.RenderTransform>
	</ToggleButton>
</Grid>

The block of XAML that needs to be removed is a Border that isn’t needed for the FlipPanel so it is replaced with a Grid which contains the VisualTransition and Storyboard for the animationes between states for the Control for Normal and Flipped plus there are also the VisualState themselves for each of those too. There’s a ContentPresenter for the front and back parts of the Control with a ToggleButton used to trigger each of the states.

Step 12

Once done select from the Menu, Build, then Build Solution

vs2017-build-build-solution

Step 13

In the Solution Explorer select MainPage.xaml

vs2017-mainpage

Step 14

From the Menu choose View and then Designer

vs2017-view-designer

Step 15

The Design View will be displayed along with the XAML View and in this between the Grid and /Grid elements, enter the following XAML:

<local:FlipPanel HorizontalAlignment="Center" VerticalAlignment="Center">
	<local:FlipPanel.FrontContent>
		<StackPanel>
			<TextBlock Margin="4" FontWeight="Bold" Text="Front Content" FontSize="16"/>
			<Rectangle Width="50" Height="50" Margin="10" Fill="Black"/>
			<Rectangle Width="50" Height="50" Margin="10" Fill="Gray"/>
			<Rectangle Width="50" Height="50" Margin="10" Fill="Red"/>
			<Rectangle Width="50" Height="50" Margin="10" Fill="Orange"/>
			<Rectangle Width="50" Height="50" Margin="10" Fill="Yellow"/>
		</StackPanel>
	</local:FlipPanel.FrontContent>
	<local:FlipPanel.BackContent>
		<StackPanel>
			<TextBlock Margin="4" FontWeight="Bold" Text="Back Content" FontSize="16"/>
			<Rectangle Width="50" Height="50" Margin="10" Fill="Green"/>
			<Rectangle Width="50" Height="50" Margin="10" Fill="Cyan"/>
			<Rectangle Width="50" Height="50" Margin="10" Fill="Blue"/>
			<Rectangle Width="50" Height="50" Margin="10" Fill="Magenta"/>
			<Rectangle Width="50" Height="50" Margin="10" Fill="Purple"/>
		</StackPanel>
	</local:FlipPanel.BackContent>
</local:FlipPanel>

The block of XAML represents the FlipPanel with the FrontContent set to a StackPanel containing some Rectangle Controls for the FrontContent and the same but in different colours for the BackContent.

Step 16

That completes the Universal Windows Platform Application so Save the Project then in Visual Studio select the Local Machine to run the Application

vs2017-local-machine

Step 17

After the Application has started running it should then appear with the Flip Panel displayed which can flipped when the ToggleButton on the bottom is tapped.

ran-flip-control

Step 18

To Exit the Application select the Close button in the top right of the Application

vs2017-close

Creative Commons License

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s