Windows 10 Universal Windows Platform – Flip Control

Step 1

Download Visual Studio Community 2015 and install it onto your computer, if it’s already downloaded and installed select Launch to start Visual Studio Community 2015 or if it has already been downloaded and installed then start the application you may also need to Enable your device for development.

10-home

Step 2

Once Visual Studio Community 2015 has started select File, then New, then Project… from the Menu.

10-file-new-project

Step 3

From the New Project window select Visual C# from Installed, Templates then select Blank App (Windows Universal) from the list, then type in the Name FlipControl and select a Location to save to before selecting Ok to create the Project.

10-new-project-flipcontrol

Step 4

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

10-project-add-new-item

Step 5

From the Add New Item window select Visual C# 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

10-add-new-item-flipcontrol

Step 6

Once in the Code View for FlipPanel.cs below the public FlipPanel() { … } the following 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);
}

It should then appear as such:

10-templated-code-flipcontrol

Step 7

Select from the Menu, Build, then Build Solution

10-build

Step 8

From the Solution Explorer select Generic.xaml

10-generic-flipcontrol

Step 9

Select from the Menu, View then Designer

10-designer

Step 10

Along with Design View will be the XAML View and in this remove the following XAML:

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

And replace 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 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 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 ToggleSwitchCurtainBackgroundThemeBrush}"/>
					<Path RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Center" VerticalAlignment="Center"
					Data="M2,3L9,10 16,3" Stroke="{ThemeResource ToggleButtonCheckedForegroundThemeBrush}" StrokeThickness="4" />
				</Grid>
			</ControlTemplate>
		</ToggleButton.Template>
		<ToggleButton.RenderTransform>
			<RotateTransform Angle="-90" x:Name="FlipButtonTransform"/>
		</ToggleButton.RenderTransform>
	</ToggleButton>
</Grid>

It should appear as such:

10-templated-xaml-flipcontrol

Step 11

Then select from the Menu, Build, then Build Solution

10-build

Step 12

From the Solution Explorer select MainPage.xaml

10-mainpage

Step 13

Select from the Menu, View then Designer

10-designer

Step 14

The Design View will be displayed along with the XAML View and in this below <Grid Background=”{ThemeResource ApplicationPageBackgroundThemeBrush}”> enter the following XAML:

<Grid Width="300" Height="300">
	<local:FlipPanel HorizontalAlignment="Center" VerticalAlignment="Center">
		<local:FlipPanel.FrontContent>
			<StackPanel>
				<TextBlock Margin="4" FontWeight="Bold" Text="Front Content" FontSize="16"/>
				<Button Margin="4" Padding="4" Content="Button One"/>
				<Button Margin="4" Padding="4" Content="Button Two"/>
				<Button Margin="4" Padding="4" Content="Button Three"/>
				<Button Margin="4" Padding="4" Content="Button Four"/>
			</StackPanel>
		</local:FlipPanel.FrontContent>
		<local:FlipPanel.BackContent>
			<StackPanel>
				<TextBlock Margin="4" FontWeight="Bold" Text="Back Content" FontSize="16"/>
				<CheckBox Margin="4" Padding="4" Content="CheckBox One"/>
				<CheckBox Margin="4" Padding="4" Content="CheckBox Two"/>
				<CheckBox Margin="4" Padding="4" Content="CheckBox Three"/>
				<CheckBox Margin="4" Padding="4" Content="CheckBox Four"/>
			</StackPanel>
		</local:FlipPanel.BackContent>
	</local:FlipPanel>
</Grid>

It should appear as such:

10-xaml-flipcontrol

Step 15

That completes the Windows Universal Application so Save the Project then select the Debug and Simulator option to run the Application

10-simulator

Step 16

Once the Simulator has started the Application should then appear with the Flip Panel displayed which can flipped when highlighted button on bottom is tapped

10-simulator-run-flipcontrol

Step 17

To Exit the application select Stop Debugging in Visual Studio Community 2015

10-stop

Step 18

Another option is to run as a Windows Phone application, select Debug and select Emulator 10.0.1.0 WVGA 4 inch 512MB option to run the Application

10-emulator

Step 19

Once the Emulator has started the Application should then appear with the Flip Panel displayed which can flipped when highlighted button on bottom is tapped

10-emulator-run-flipcontrol

Step 20

To Exit the application select Stop Debugging in Visual Studio Community 2015

10-stop

Creative Commons License

Leave a comment