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

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:

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.

image image

Building your Windows Universal Four Time Zone App

Purpose

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. The accompanying video of this document can be found here:

clip_image002

clip_image004

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.

clip_image005

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*" />
        <ColumnDefinition Width="8*"/>
    </Grid.ColumnDefinitions>

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

    <Viewbox Grid.ColumnSpan="2" HorizontalAlignment="Left">
        <TextBlock Text="US 4 Time Zone Clock"/>
    </Viewbox>

    <TextBlock Grid.Row="1" HorizontalAlignment="Left" Text="EST"/>
    <TextBlock  Grid.Row="2" HorizontalAlignment="Left" Text="CST"/>
    <TextBlock Grid.Row="3" HorizontalAlignment="Left" Text="MST"/>
    <TextBlock Grid.Row="4" HorizontalAlignment="Left" Text="PST"/>

    <!--These are the column 1 defintions-->
    <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" />
        <!--<Setter Property="Padding" Value="12" />-->
    </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>

<AppBarToggleButton Name="TimeToggle" Icon="World" Label="12/24 Hour" ToolTipService.ToolTip="12 or 24 Hour Time" />

</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

clip_image006

//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();