How To Create A Master Page And Inherit Pages With It

Master Page

Master Page Is The Template Or Theme Of Our Website Which Is Design With Different client side Languages Like HTML, CSS, JavaScript & AJAX etc. Once We Design The Master Page We Can Inherit Multiple Web Pages From It.

A Web Page Basically Divide Into Main Three Parts:

• Header
• Main Body
• Footer

Header Consist Of  Most Upper Portion Of Website Which Consist Of Main Headings & Drop down Links Of Website E.g:

Main Content Is The Central Part Of The Website Where Data Is Dynamically Changed With Different Pages. Every page has its own Main Content Like E.g: 

Footer Is The Most Lower Part Of Website which Contains the Publishing Details and Links Of References E.g:

Now We Just Design The Master Page and Make A Main Content Place Holder Empty Because Every Page Put Their Own Content In According to their Concern.

Open Visual Studio 2015:

Step 1:

Create A New Project in Web

Step 2:

Choose  Empty Form and click ok

Step 3:

There will be a empty project open & Now Add A Master Page By Right Click on Project And Add New Item.

Step 4:

Now select the Master Page 

Step 5:

Now open Master Page

Step 6:

There Are Two ContentPlaceHolders In The Master Page By Default First For Header And Second For Main Content.

Now Customize Your Page I Take the Kidengarden Templete..

Copy the files and paste into your project

Step 7:

Now Files Are Added In Your Project

Step 8:

Now Add ContentPlaceHolders Where You Want To Change Data Dynamically In Every Page From Inherited Master Page

Step 9:

Now Inherit Page Named Index.aspx Which Have Slider And Main Content Data..

Step 10:

See Its Design...

Step 11:

Now Add Another Page Named Contact.Aspx.....

Step 12:

Design Of Contact Page Here....

In This Way You Can Create Multiple pages Inherit From Master Page...

How To Create Simple Login Form And Nevigate to Registeration Form

Step 1:

Create a New Universal Windows Platform Project and Write Name According to your Project.

Step 2:

Now pick the MainPage.xaml file

Step 3:

Now Inside Main Grid you can make the design According to your Application like this...




<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="0.15*"/>
            <RowDefinition Height="0.85*"/>
        </Grid.RowDefinitions>
        <Border Grid.Row="0" Background="LightBlue">
        <TextBlock Name="Login" Text="Login Form" TextAlignment="Center" FontSize="30" FontStyle="Italic" FontWeight="ExtraBlack"></TextBlock>
        </Border>
        <StackPanel x:Name="stackone" Grid.Row="1" >
            <TextBox PlaceholderText="Enter Email" Width="300" Margin="0,50,0,0"></TextBox>
            <TextBox PlaceholderText="Enter Password" Width="300" Margin="0,10,0,0"></TextBox>
            <RelativePanel HorizontalAlignment="Center" Margin="0,10,0,0">
                <Button x:Name="loginbtn" Content="Login" Height="35" Width="65" Click="loginbtn_Click"></Button>
                <Button x:Name="cancelbtn" Content="Cancel" Height="35" Width="65" Margin="10,0,0,0" RelativePanel.RightOf="loginbtn" Click="cancelbtn_Click"></Button>
            </RelativePanel>
         
        </StackPanel>
    </Grid>
</Page>




 Step 4:

Actually Design is here of the code right above...

Step 5:

Now Do This Step Create a New Form Here In This Example I Make Registration Form...

Step 6:

Now make Registration Form Design According to your Application like..



 <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="0.15*" ></RowDefinition>
            <RowDefinition Height="0.85*"></RowDefinition>
        </Grid.RowDefinitions>
        <Border Grid.Row="0" Background="Gainsboro">
            <TextBlock Name="Reg" Text="Registration Form" TextAlignment="Center" VerticalAlignment="Center" FontSize="30" FontWeight="Black" FontStyle="Italic"></TextBlock>
        </Border>
        <StackPanel Grid.Row="1">
            <TextBox PlaceholderText="Enter First Name" Width="300" Margin="0,50,0,0"></TextBox>
            <TextBox PlaceholderText="Enter Last Name" Width="300" Margin="0,10,0,0"></TextBox>
            <TextBox PlaceholderText="Enter Email" Width="300" Margin="0,10,0,0"></TextBox>
            <TextBox PlaceholderText="Enter Address" Width="300" Margin="0,10,0,0"></TextBox>
            <RelativePanel x:Name="inside" Grid.Row="1" HorizontalAlignment="Center" Margin="0,20,0,0">
                <Button x:Name="savebtn" Content="Save" Height="50" Width="70"></Button>
                <Button x:Name="cancelbtn" Content="Cancel" Height="50" Width="70" RelativePanel.RightOf="savebtn" Margin="10,0,0,0"></Button>
            </RelativePanel>
        </StackPanel>
     
    </Grid>
</Page>


Step 7:

Actually Design of this Above code is here...

Step 8:

Now We Want To Click On Login and Show Next Page of Registration...
For This Purpose We Go To In MainPage.Xaml .CS File and behind the Login button Event We Add this Line Of Code...



 private void loginbtn_Click(object sender, RoutedEventArgs e)
        {
            this.Frame.Navigate(typeof(Registration));
        }


Step 9:



Now Run The Application and See Your Application and Splash Screen..

Step 10:

Now Login Appear and Click On Button Its Takes You On Registration Form

Click On Login Button...