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.
Step 2
Once Visual Studio Community 2015 has started select File, then New, then Project… from the Menu.
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.
Step 4
Once done select from the Menu, Project, then 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
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:
Step 7
Select from the Menu, Build, then Build Solution
Step 8
From the Solution Explorer select Generic.xaml
Step 9
Select from the Menu, View then 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:
Step 11
Then select from the Menu, Build, then Build Solution
Step 12
From the Solution Explorer select MainPage.xaml
Step 13
Select from the Menu, View then 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:
Step 15
That completes the Windows Universal Application so Save the Project then select the Debug and Simulator option to run the Application
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
Step 17
To Exit the application select Stop Debugging in Visual Studio Community 2015
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
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
Step 20
To Exit the application select Stop Debugging in Visual Studio Community 2015