Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Creating the Note-Taking App Interface for Windows 8 using C#

In this article, we will learn how to make the first part i.e., creating the interface for a note-taking application for Windows 8 with the help of Visual Studio 12 and C#.

The process of making a making note-taking application for Windows 8 needs to be done by a step by step approach. In the first step, a new blank project is created. It is done by the following procedure:

  • Firstly, click on the file located at the top. In the file dialog box, click on new and then Project.
  • After clicking project, click on template and then click on Visual C#. This step declares that we will be suing C# for making this application.
  • Finally, click on Windows Store and then Blank App.

The file is named as “LittleNotes”.

Note: The important that needs to be remember here is that the user will have more than one note that he/she will be taking. So, there will be a requirement for a container with many notes.

For this, we will be using GridView which is the best option for this. The benefits of using this is that it can contain any kind of control and will automatically arrange all its content. It also provides some fading options for new controls that are added in the container. To do this, a GridView is dragged into the interface editor of the main file which is named as MainPage.xaml. The size of this is increased and till it occupies the full screen and it is named as NotesGrid.

The next step is to create new notes. For this, we will drag a button form the Toolbox to the GridView. Once that button is released inside the GridView, it will spontaneously shift to the top-left of the container. The important that is needed to be checked here is that the button is deep inside the GridView. This can be checked by looking at the XAML editor. It is resized to 250x125 so that the font gets bigger to get a better view. Finally it is named as NewNoteBtn.

Shows the image for the interface editor in which a GridView is located

Figure 1: Shows the image for the interface editor in which a GridView is located

After this, NewNoteBtn is clicked twice to create a function which will be called every time NewNoteBtn is clicked.

Listing 1: Shows the code for the function

private void NewNoteBtn_Click(object sender, RoutedEventArgs e)
{
 
}

Now the user needs to go back on the interface editor because there is a need for the field where the text can be input. For this, Textbox is used. This Textbox is dragged to the editor. In doing this, the user needs to make sure that it is just outside the GridView. The better explanation for this is that the indentation level should be the same as the GridView. This Textbox is resized in such a way that it covers the maximum part of the screen. The textbox is named as Notepad.

Note: Here the user needs to make sure that the AcceptsReturn property is set to true, so that your notes can have more than one line.

Shows the picture of the Textbox in the interface editor

Figure 2: Shows the picture of the Textbox in the interface editor

The difficulty that will arise here is that we have different controls that will be overlapping each other and the text editor should not be opened by default. To overcome this, we can hide the Notepad by changing its visibility properties to Collapsed. This can be done in two ways which are as follows:

  • The first method to change is by typing in the XAML editor.
  • The second way for changing is via properties pane on the right.

Listing 2: Shows the code for changing the visibility properties

private void NewNoteBtn_Click(object sender, RoutedEventArgs e)
{
    // Hide the menu.
    NotesGrid.Visibility = Visibility.Collapsed;
    // Reset the content of the text editor since we are starting a blank note.
    Notepad.Text = "";
    // Show text editor.
    Notepad.Visibility = Visibility.Visible;
}   

After this stage, a lot of advancement is done in the program so that it can be tested by running it.

Now, the text editor needs to be closed. This can be done by many ways. Some of them are as follows:

  • By adding a “Close” Button that shows up at the same time as Notepad.
  • The second way is to use a feature of Windows 8 called the App Bar which is usually present in most apps and is accessed by right-clicking anywhere on an app or by swiping from the bottom edge of the screen on touch devices.

The next step is to add an App Bar in the interface via the XAML editor.

Listing 3: Shows the code to add an App Bar

<Page
    x:Class="LittleNotes.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:LittleNotes"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    
    <Page.BottomAppBar>
        <AppBar>
            <!-- Content goes here -->
        </AppBar>
    </Page.BottomAppBar>
 
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <GridView x:Name="NotesGrid" HorizontalAlignment="Left" Height="768" VerticalAlignment="Top" Width="1366">
            <Button x:Name="NewNoteBtn" Content="New Note" Width="250" Height="125" FontSize="30" Click="NewNoteBtn_Click"/>
        </GridView>
        <TextBox x:Name="Notepad" Visibility="Collapsed" HorizontalAlignment="Left" Margin="32,32,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Height="704" Width="1304" AcceptsReturn="True" />
    </Grid>
</Page>

Now when the cursor is placed inside the in the XAML editor, it will be shown in the interface.

Shows the picture with the App Bar in the interface

Figure 3: Shows the picture with the App Bar in the interface

The App Bar only is not very useful. Along with it, there is a need of menu buttons inside it. For this, we will use an existing template for App Bar buttons.

Listing 4: Shows the code to be added inside the App Bar

<Button Name="SaveClose" Style="{StaticResource AppBarButtonStyle}" Content="✔" AutomationProperties.Name="Save and Close" />

Finally, after adding this we will get a new interface as shown below.

Shows the final interface

Figure 4: Shows the final interface

Conclusion

In this article on making the note-taking application for Windows 8, we created the interface which is the base for the application. In the Part-2 of this article, we will use this interface to deal with real coding which includes the process of using the notes and sharing them.



I am well versed with Computer Programming languages and possess good working knowledge on software languages such as C, Java, PHP, HTML and CSS

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login