Transparency Using Opacity in Windows Store App

Introduction

In this article we will see the transparency in a Metro Style application with the help of Opacity. Opacity is nothing more than an element attribute that manages their appearance on the screen. The Opacity attribute contains a decimal value ranging from 0 to 1. The default value of opacity is 1, which means no opacity or no transparency.

The purpose of the opacity attribute is to make visible more than one image in the same place to adjust their opacity attributes. You have often seen general examples of the opacity attribute when you click on a link of a web site and a new window appears on the existing window and the opacity of the old window is lower compared to the newer window. 

Step 1 : First of all you will create a new Metro Style Application. Let us see the description with images of how you will create it.

•  Open Visual Studio 2011
•  File -> New -> Project
• Choose Template -> Visual C# ->Metro Style Application
• Rename this Application

Step 2 : In the Solution Explorer there are two files that we will primarily work with; BlankPage.xaml and BlankPage.xaml.cs files.

Step 3 : The BlankPage.xaml file is as in the following code:

Code :

<Page
x:Class="Application20.BlankPage"     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
          mc:Ignorable="d"
          d:DesignHeight="768" d:DesignWidth="1366">
    <Page.Resources>
        <Style x:Key="BaseStatusStyle" TargetType="TextBlock">
            <Setter Property="FontFamily" Value="Segoe UI Semilight"/>
            <Setter Property="FontSize" Value="14.667"/>
            <Setter Property="Margin" Value="0,0,0,5"/>
        </Style>
        <Style x:Key="StatusStyle" BasedOn="{StaticResource BaseStatusStyle}" TargetType="TextBlock">
            <Setter Property="Foreground" Value="Green"/>
        </Style>
        <Style x:Key="ErrorStyle" BasedOn="{StaticResource BaseStatusStyle}" TargetType="TextBlock">
            <Setter Property="Foreground" Value="Blue"/>
        </Style>
    </Page.Resources>
   <Grid x:Name="LayoutRoot" Background="White">

         <!--App Orientation States-->

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="OrientationStates">
                <VisualState x:Name="FullScreenLandscapeScale100Percent"/>
                <VisualState x:Name="FilledScale100Percent">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="ContentRoot">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Thickness>40,20,40,20</Thickness>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(StackPanel.Orientation)" Storyboard.TargetName="InputPanel">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Orientation>Horizontal</Orientation>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.MaxWidth)" Storyboard.TargetName="ScenarioInput">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="700">
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="FullScreenPortraitScale100Percent">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="ContentRoot">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Thickness>40,20,40,20</Thickness>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.MaxWidth)" Storyboard.TargetName="ScenarioInput">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="400">
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="SnappedScale100Percent">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="ContentRoot">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Thickness>20,20,20,20</Thickness>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(StackPanel.Orientation)" Storyboard.TargetName="InputPanel">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Orientation>Vertical</Orientation>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.MaxWidth)" Storyboard.TargetName="ScenarioInput">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="250">
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="LegalPanel">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Thickness>0,0,10,0</Thickness>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="FullScreenLandscapeScale140Percent">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="ContentRoot">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Thickness>40,20,40,20</Thickness>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(StackPanel.Orientation)" Storyboard.TargetName="InputPanel">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Orientation>Horizontal</Orientation>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.MaxWidth)" Storyboard.TargetName="ScenarioInput">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="600">
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="FilledScale140Percent"/>
                <VisualState x:Name="FullScreenPortraitScale140Percent">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="ContentRoot">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Thickness>40,20,40,20</Thickness>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.MaxWidth)" Storyboard.TargetName="ScenarioInput">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="250">
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="SnappedScale140Percent"/>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Grid x:Name="ContentRoot" Background="YellowGreen" Margin="100,20,100,20">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <!-- Content -->

            <Grid HorizontalAlignment="Center" VerticalAlignment="Center" Margin="100,50,100,50">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
               </Grid.RowDefinitions>

                 <!--TextBlock with text-->

                <TextBlock Text="ITORIAN.COM/ABOUT" FontSize="50"/>

                <!--6 rectangles with partially transparent background-->

                <Rectangle Width="80" Height="100" Fill="#FFFF0000" Opacity="0.1" VerticalAlignment="Top" HorizontalAlignment="Left" />
                <Rectangle Width="80" Height="100" Fill="#FFFF0000" Opacity="0.3" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="104,0,0,0"/>
                <Rectangle Width="80" Height="100" Fill="#FFFF0000" Opacity="0.5" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="206,0,0,0"/>
                <Rectangle Width="80" Height="100" Fill="#FFFF0000" Opacity="0.7" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="310,0,250,0"/>
                <Rectangle Width="80" Height="100" Fill="#FFFF0000" Opacity="0.9" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="415,0,0,0"/>
                <Rectangle Width="80" Height="100" Fill="#FFFF0000" Opacity="1" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="520,0,0,0"/>
            </Grid>
        </Grid>
    </Grid>
</Page>

 Step 4 : After running this code the output look like this: