Windows 10 Universal Windows Platform – Expand 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.

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 ExpandControl 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 ExpandPanel.cs before selecting Add to add the file to the Project

Step 6

Once in the Code View for ExpandPanel.cs replace Control in public sealed class ExpandPanel : Control with ContentControl then below the public ExpandPanel() { … } the following should be entered:

private bool _useTransitions = true;
private VisualState _collapsedState;
private Windows.UI.Xaml.Controls.Primitives.ToggleButton toggleExpander;
private FrameworkElement contentElement;

public static readonly DependencyProperty HeaderContentProperty =
DependencyProperty.Register("HeaderContent", typeof(object),
typeof(ExpandPanel), null);

public static readonly DependencyProperty IsExpandedProperty =
DependencyProperty.Register("IsExpanded", typeof(bool),
typeof(ExpandPanel), new PropertyMetadata(true));

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

public object HeaderContent
{
	get { return GetValue(HeaderContentProperty); }
	set { SetValue(HeaderContentProperty, value); }
}

public bool IsExpanded
{
	get { return (bool)GetValue(IsExpandedProperty); }
	set { SetValue(IsExpandedProperty, value); }
}

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

private void changeVisualState(bool useTransitions)
{
	if (IsExpanded)
	{
		if (contentElement != null)
		{
			contentElement.Visibility = Visibility.Visible;
		}
		VisualStateManager.GoToState(this, "Expanded", useTransitions);
	}
	else
	{
		VisualStateManager.GoToState(this, "Collapsed", useTransitions);
		_collapsedState = (VisualState)GetTemplateChild("Collapsed");
		if (_collapsedState == null)
		{
			if (contentElement != null)
			{
				contentElement.Visibility = Visibility.Collapsed;
			}
		}
	}
}

protected override void OnApplyTemplate()
{
	base.OnApplyTemplate();
	toggleExpander = (Windows.UI.Xaml.Controls.Primitives.ToggleButton)
		GetTemplateChild("ExpandCollapseButton");
	if (toggleExpander != null)
	{
		toggleExpander.Click += (object sender, RoutedEventArgs e) =>
		{
			IsExpanded = !IsExpanded;
			toggleExpander.IsChecked = IsExpanded;
			changeVisualState(_useTransitions);
		};
	}
	contentElement = (FrameworkElement)GetTemplateChild("Content");
	if (contentElement != null)
	{
		_collapsedState = (VisualState)GetTemplateChild("Collapsed");
		if ((_collapsedState != null) && (_collapsedState.Storyboard != null))
		{
			_collapsedState.Storyboard.Completed += (object sender, object e) =>
			{
				contentElement.Visibility = Visibility.Collapsed;
			};
		}
	}
	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 GeneratedDuration="0:0:0.5"/>
			</VisualStateGroup.Transitions>
			<VisualState x:Name="Expanded">
				<Storyboard>
					<DoubleAnimation Storyboard.TargetName="ContentScaleTransform"
					Storyboard.TargetProperty="ScaleY" To="1" Duration="0"/>
					<DoubleAnimation Storyboard.TargetName="RotateButtonTransform"
					Storyboard.TargetProperty="Angle" To="180" Duration="0"/>
				</Storyboard>
			</VisualState>
			<VisualState x:Name="Collapsed">
				<Storyboard>
					<DoubleAnimation Storyboard.TargetName="ContentScaleTransform"
					Storyboard.TargetProperty="ScaleY" To="0" Duration="0"/>
					<DoubleAnimation Storyboard.TargetName="RotateButtonTransform"
					Storyboard.TargetProperty="Angle" To="0" Duration="0"/>
				</Storyboard>
			</VisualState>
		</VisualStateGroup>
	</VisualStateManager.VisualStateGroups>
	<Border BorderBrush="{TemplateBinding BorderBrush}"
	BorderThickness="{TemplateBinding BorderThickness}"
	CornerRadius="{TemplateBinding CornerRadius}"
	Background="{TemplateBinding Background}">
		<Grid>
			<Grid.RowDefinitions>
				<RowDefinition Height="Auto"/>
				<RowDefinition Height="*"/>
			</Grid.RowDefinitions>
			<Grid Margin="3">
				<Grid.ColumnDefinitions>
					<ColumnDefinition Width="*"/>
					<ColumnDefinition Width="Auto"/>
				</Grid.ColumnDefinitions>
				<ContentPresenter Grid.Column="0" VerticalAlignment="Center" Content="{TemplateBinding HeaderContent}" FontSize="16"/>
				<ToggleButton Grid.Column="1" RenderTransformOrigin="0.5,0.5" x:Name="ExpandCollapseButton">
					<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 x:Name="RotateButtonTransform"/>
					</ToggleButton.RenderTransform>
				</ToggleButton>
			</Grid>
			<ContentPresenter Grid.Row="1" Margin="5" Content="{TemplateBinding Content}" x:Name="Content">
				<ContentPresenter.RenderTransform>
					<ScaleTransform x:Name="ContentScaleTransform"/>
				</ContentPresenter.RenderTransform>
			</ContentPresenter>
		</Grid>
	</Border>
</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:ExpandPanel HeaderContent="Expander">
		<local:ExpandPanel.Content>
			<StackPanel>
				<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:ExpandPanel.Content>
	</local:ExpandPanel>
</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 be expanded or contracted when highlighted button on top 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 be expanded or contracted when highlighted button on top is tapped

Step 20

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