Building Your First Windows Universal App V2 (Screencast and code)

Article
08/29/2014

Doing a second event on 9/3 with some updates (e.g. improvements) to the code from 8/27. I did an event at the Illinois Institute of Technology (IIT) where we had students from Computer Science (CS), Information Technology & Management (ITM) and some other disciplines were in attendance. The topic was building applications for Windows and Windows Phone using Windows Universal apps. Universal apps allow you to build app targeting Windows Phone and Windows 8 with the greatest amount of reuse possible.

In my talk, I introduced the basics of Visual Studio, C# and Universal Apps. I captured a few the the assets that came to together as part of the event.

Resources can be found here:

Recording of the build out of the project in Visual Studio (8/28 Event https://vimeo.com/104730243)
Snippets of code so you can easily build it out (just below the pictures of the app)
C# fundamentals for absolute beginners https://www.microsoftvirtualacademy.com/training-courses/c-fundamentals-for-absolute-beginners (Brush up on your coding skills. Register now for two training courses and we’ll throw in $25 toward your next device. https://aka.ms/Cpbz89)
What more info on Universal apps? https://dev.windows.com/en-us/develop/building-universal-Windows-apps?CTA

The purpose of this example is to allow you to easily copy and paste code to build your first Windows Universal app. This is not a sophisticated app as it’s meant to give use an easy starting point to build our first universal app. When completed the app will look like this. It provides the current time for eastern, central, mountain and Pacific Time.

Building your Windows Universal Four Time Zone App

Purpose

Setting up our UI

First we’ll define the XAML to layout our app. We’ll put this code inside the empty grid making up our app (e.g. the <Grid> and </Grid> tags.

    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
        <RowDefinition Height="260" />
    </Grid.RowDefinitions>

<TextBlock Grid.Row="1" Grid.Column="1" x:Name="txtEST"/>
    <TextBlock Grid.Row="2" Grid.Column="1" x:Name="txtCST"/>
    <TextBlock Grid.Row="3" Grid.Column="1" x:Name="txtMST" />
    <TextBlock Grid.Row="4" Grid.Column="1" x:Name="txtPST" />

</Grid>

Making all Textbox content the same size

<Page.Resources>
    <Style TargetType="TextBlock">
        <Setter Property="FontSize" Value="24" />
        <Setter Property="FontFamily" Value="Segoe UI" />
        <Setter Property="HorizontalAlignment" Value="Left" />
        <Setter Property="VerticalAlignment" Value="Center" />
        
    </Style>
</Page.Resources>

Add our helper class

// make a new class and add in the following code

public enum TimeZone
{
    // HST is 10 hours - UTC and Hawii doesn't use daylight savings time
    // AST is 9 hours - UTC
    // PST is 7 hours - UTC
    // MST is 6 hours - UTC
    // CST is 5 hours - UTC
    // EST is 4 hours - UTC

    Eastern = 4,
    Central = 5,
    Mountain = 6,
    Pacific = 7,
    Akaska = 8,
    Hawaii = 9
}

public class TimeZoneCalculator
{

string[] StandardTimeNames = { "", "", "", "", "", "EST", "CST", "MST", "PST", "AKST", "HST" };
string[] DaylightTimeNames = { "", "", "", "", "", "EDT", "CDT", "MDT", "PDT", "AKDT", "HDT" };

public string CalculateTime(TimeZone tz, string timeFormat)
{

DateTime dt = DateTime.Now.ToUniversalTime();

int timeoffset = 0;
if (dt.IsDaylightSavingTime()) timeoffset = +1;

return dt.Subtract(new TimeSpan((int)tz + timeoffset, 0, 0)).ToString(timeFormat);
}

    public string CalculateTimeZoneName(TimeZone tz)
    {
        string timeZoneName = "";

        if (!DateTime.Now.IsDaylightSavingTime())
            timeZoneName = StandardTimeNames[(int)tz];
        else
            timeZoneName = DaylightTimeNames[(int)tz];

return timeZoneName;
}

    public string GetFormattedTime(TimeZone timeZone, bool MilitaryTime)
    {
        string TimeFormat;

        if (MilitaryTime)
            TimeFormat = "HH:mm:ss";
        else
            TimeFormat = "hh:mm:ss tt";

return this.CalculateTime(timeZone, TimeFormat);
}
}

Add an instance variable

bool? militaryTime = false;

Add timer code

         DispatcherTimer dispatchTimer = new DispatcherTimer();
         dispatchTimer.Interval = TimeSpan.FromSeconds(1);
         dispatchTimer.Tick += dispatchTimer_Tick;
         dispatchTimer.Start();

Add code for timer

 void dispatchTimer_Tick(object sender, object e)
{

     UpdateTime();
}

Add code to set time

void UpdateTime()

{

DateTime dateTime = DateTime.Now.ToUniversalTime();

TimeZoneCalculator timeZoneCalc = new TimeZoneCalculator();

txtEST.Text = timeZoneCalc.GetFormattedTime(TimeZone.Eastern, militaryTime.Value);

txtCST.Text = timeZoneCalc.GetFormattedTime(TimeZone.Central, militaryTime.Value);

txtMST.Text = timeZoneCalc.GetFormattedTime(TimeZone.Mountain, militaryTime.Value);

txtPST.Text = timeZoneCalc.GetFormattedTime(TimeZone.Pacific, militaryTime.Value);

}

Add bottom app bar

<Page.BottomAppBar>

</CommandBar>

</Page.BottomAppBar>

Add code to handle the click

private void TimeToggle_Click(object sender, RoutedEventArgs e)

{

militaryTime = TimeToggle.IsChecked;

IPropertySet appData = ApplicationData.Current.RoamingSettings.Values;

//IPropertySet appData = ApplicationData.Current.LocalSettings.Values;

appData["MILITARYTIMEFORMAT"] = militaryTime;

}

Add code to read in and use settings

//Code to load app settings in MainPage_loaded just below initialize component

// Load application settings

IPropertySet appData = ApplicationData.Current.RoamingSettings.Values;

//IPropertySet appData = ApplicationData.Current.LocalSettings.Values;

if (appData.ContainsKey("MILITARYTIMEFORMAT"))

TimeToggle.IsChecked = militaryTime = (bool)appData["MILITARYTIMEFORMAT"];

else

TimeToggle.IsChecked = militaryTime = false;

UpdateTime();

Comments

Anonymous
August 31, 2014
Thanks a lot for the highly informative session. I am not able to download the windows phone emulator on my laptop. I am getting this error message "This Computer does not support the Windows phone emulator which requires a 64-bit Windows Pro or Hyper-V " Any workarounds??
Anonymous
September 03, 2014
As a student you have access to DreamSpark Premium so you should be able to download Windows 8 Pro 64. If you have a 64 system you should be able to install the Windows Phone 8.1 SDK, which should install Hyper-v as part of the install.
Anonymous
September 22, 2014
use my Sonny S. Sulit/SONNY SANTOS SULIT/Sonny S Sulit websites to get your things.
Anonymous
September 23, 2014
Why do you call your DEV environment Visual Studio any longer. It is definitely not visual it used to be with WinForm or ASP.Net Form. It is all hand written code, ton so f code, nothing Visual. Even the properties you are setting is not visual. Stop fooling people. Until you make programming Visual, you will loose the developers. You moved from VB to COM+ to DCOM to .Net to XAML, to JavaScript. Are you kidding me? Why will I invest in your technology stack any further? Why can't you keep the .Net (C# or VB.Net) and improve on it to make it the programming language of choice. Why do I have to forget the C#?

Share via