Building the HelloTouchSmart Application

The rest of this article describes how to build a basic TouchSmart enabled application. Over the next few sections, you will build a basic TouchSmart application which you can use as a template for all your TouchSmart projects.

Start by launching Visual Studio 2008 and create a new project. If you have User Account Control (UAC) enabled make sure to launch Visual Studio with Administrator privileges.

• On the File menu, select New Project
• Select WPF Application
• Name your project “HelloTouchSmart” and click OK
• For Visual Studio 2008 Professional Users, select the path to save your project. Choose “C:\TouchSmart”
• For Visual Studio 2008 Express users, you will be prompted to save when you close your project. Choose “C:\TouchSmart” as the path to save your project to.

1. After the project is created, double-click the Window1.xaml file to open it. You are now going to make some important changes to this file which make it a TouchSmart application:

• Edit the Window definition to match the XAML below. The most important aspect of this is making your application appear without a Window frame (using the combination of ShowInTaskbar, WindowStyle, and ResizeMode attributes). Additionally, it is important to position your window off screen (using the Top and Left attributes), since the TouchSmart shell will move it into the correct position as needed.
  
  

  <Window
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Name="HelloTouchSmart"
      Top="{Binding Source={x:Static SystemParameters.VirtualScreenHeight}}"
      Left="{Binding Source={x:Static SystemParameters.VirtualScreenWidth}}"
      Background="Black"
      ShowInTaskbar="False"
      WindowStyle="None"
      ResizeMode="NoResize">
      

• Now add some basic text to the window by inserting the following between the elements in the XAML file. Keep in mind text on a TouchSmart UI should be large (at least 18 point), and match the font family used by the TouchSmart shell.
  
  

  <TextBlock Text="My first TouchSmart App!" Foreground="White" FontFamily="Segoe UI" FontSize="24"/>
      

2. Select Build, then Build Solution to create the HelloTouchSmart application.

• Depending on the edition of Visual Studio you are using, the “HelloTouchSmart.exe” will be created in either the bin\Debug (Visual Studio Professional) or bin\Release (Visual Studio Express) folders
• It is important to know where the output file is located since we will be registering the application with the TouchSmart shell in the next step.

3. Create a new XML file which contains information to register the application with the TouchSmart shell

• Select Project then Add New Item
• Select XML File
• Create a file called Register.xml

4. The registration XML file needs specific attributes including the full-path to your application. Replace the contents of the file you created in the previous step with the contents below. If you have created your project in a different path make sure you correct the AppPath element below.

<AppManagementSetting>
<UserEditable>true</UserEditable>
<RunAtStartup>true</RunAtStartup>
<RemoveFromTaskbar>false</RemoveFromTaskbar>   <AppPath>C:\TouchSmart\HelloTouchSmart\HelloTouchSmart\bin\Release\HelloTouchSmart.exe
</AppPath>
<AppParameters>chromeless</AppParameters>
<AllowAttach>true</AllowAttach>
<Section>Top</Section>
<Type>InfoView</Type>
<DisplayName>HelloTouchSmart</DisplayName>
<IsVisible>true</IsVisible>
<UserDeleted>false</UserDeleted>
<InDefaultSet>false</InDefaultSet>
<IconName />
</AppManagementSetting>

5. Save the XML file. Now it will need to be registered with the TouchSmart shell for your application to start appear in the TouchSmart shell.

• Make sure the TouchSmart shell is completely closed (click Close from the TouchSmart shell main screen)
• Start a command window with Admin rights (if UAC is enabled)
• Change the working directory to C:\Program Files(x86)\Hewlett-Packard\TouchSmart\SmartCenter 2.0
• Type the following command line to register your application RegisterSmartCenterApp.exe updateconfig “C:\TouchSmart\HelloTouchSmart\HelloTouchSmart\Register.xml”
• You should receive a successful message upon installation. Note you only need to register your application once.

6. After finishing these steps you should be greeted with your first TouchSmart application. Congratulations!

Enhancing the HelloTouchSmart Application

Now that you have a basic idea of how to build a TouchSmart application, the next step is to enhance it take advantage of the three layouts in the TouchSmart shell.

Each TouchSmart application needs to support three different UI views: small, medium, and large. If the user drags an application from the bottom area to the top area, it should switch from a small layout to a medium layout. If the user then clicks on the application in the medium layout it should switch to a large layout.

The small layout typically is an image that represents your application. The artwork should be a high-quality image that blends into the TouchSmart shell as best as possible.

The medium layout typically represents a non-interactive status view of your application. If your application is designed to display content from the web, for instance, this could be recent information your application has downloaded (e.g. most recent photos).

Finally, the large view represents your application. This is where you should expose all functions and features you intend to provide to the user. In the steps below we will enhance our sample to display an icon in the small layout and two different layouts for the medium and large views.

1. Start by closing the TouchSmart shell completely (clicking the Close button in the lower right-hand corner). Currently you will also need to manually “end task” the “HelloTouchSmart.exe” from the Windows task manager, as it doesn’t get closed by the TouchSmart shell when you close it. If you don’t close the application Visual Studio will be unable to build your project.

2. Open the HelloTouchSmart project

• Double-click on the Window1.xaml file to open it. First we are going to define the 3 UI layouts.
• We will also need an image in the project. Copy your favorite image (here we copied img35.jpg from the \Windows\Web\Wallpaper folder which is present on every installation of Windows Vista) into the project folder.
• Add the image to your project by selecting Project->Add Existing Item. Change the file filter to “Image Files” then select the image file from your project folder.

3. You can define your layout using any of the WPF container elements; however for this example we are going to use the DockPanel.

• Remove the TextBlock we defined in the section above.
• Define three new sections between the as follows:
  
  

  <DockPanel Name="SmallUI" Background="Black">
      <Image Stretch="UniformToFill" Source="img35.jpg"/>
      </DockPanel>
      <DockPanel Name="MediumUI" Background="Black">
      <TextBlock Text="Medium UI" Foreground="White" FontFamily="Segoe UI"
      FontSize="24"/>
      </DockPanel>
      <DockPanel Name="LargeUI" Background="Black">
      <TextBlock Text="Large UI" Foreground="White" FontFamily="Segoe UI"
      FontSize="96"/>
      </DockPanel>
      

4. Compile the application then launch the TouchSmart shell.

• There may be cases where the TouchSmart shell won’t re-launch your application properly.
• If your application doesn’t appear for any reason (or appears without a UI), click Personalize, find the HelloTouchSmart tile, de-activate it and click OK.
• Click Personalize again, find the HelloTouchSmart tile, activate it and click OK.
• The TouchSmart shell should now launch your application.
  
  

5. As you can see our application appears but is only showing the large view. Close the TouchSmart shell and switch back to Visual Studio – we’ll fix this issue now.

• Remember to “end task” HelloTouchSmart.exe from the Windows task manager

6. We are now going to add some code to Window1.xaml.cs to handle the resizing and show the appropriate controls.

• Double-click on the Window1.xaml.cs file to open it. We will add code to show and hide our three DockPanels based on the size of the UI.
• The size ratios below were derived from the HP TouchSmart Application Development Guidelines.
  
  

  public Window1()
      {
      InitializeComponent();
      SizeChanged += new SizeChangedEventHandler(Window1_SizeChanged);
      }
      void Window1_SizeChanged(object sender, SizeChangedEventArgs e)
      {
      double ratio = Math.Max(this.ActualWidth, this.ActualHeight) /
      Math.Max(SystemParameters.PrimaryScreenWidth,
      SystemParameters.PrimaryScreenHeight);
      if (ratio >= 0.68295) //Large
      {
      SmallUI.Visibility = Visibility.Collapsed;
      MediumUI.Visibility = Visibility.Collapsed;
      LargeUI.Visibility = Visibility.Visible;
      }
      else if (ratio <= 0.18) //Small
      {
      SmallUI.Visibility = Visibility.Visible;
      MediumUI.Visibility = Visibility.Collapsed;
      LargeUI.Visibility = Visibility.Collapsed;
      }
      else //Medium
      {
      SmallUI.Visibility = Visibility.Collapsed;
      MediumUI.Visibility = Visibility.Visible;
      LargeUI.Visibility = Visibility.Collapsed;
      }
      }
      

• Seasoned WPF developers might see a better way to hide/show the panels but for the sake of being clear and concise we are keeping this code fairly simple. Feel free to create your own mechanism that suits your particular need.
• Since the TouchSmart shell simply resizes and positions your window according to its needs you can use any WPF standard event handling and perform necessary adjustments to your user interface.

7. One final change is to prevent the application from being accidentally launched by a user. Since the application’s window appears initially off-screen it is important we only allow the application to be started by the TouchSmart shell.

• Change the Window1 constructor to the following:
  
  

  public Window1()
      {
      bool okToRun = false;
      foreach (string str in Environment.GetCommandLineArgs())
      {
      if (str.CompareTo("chromeless") == 0)
      {
      okToRun = true;
      }
      }
      if (!okToRun)
      {
      Application.Current.Shutdown();
      }
      else
      {
      InitializeComponent();
      SizeChanged += new SizeChangedEventHandler(Window1_SizeChanged);
      }
      }
      

• The parameter being checked (chromeless) was actually provided in the registration XML file created in the first part of this article. The TouchSmart shell will pass this parameter to your application on launch.

8. Compile and run your application as done in step four. You should now see your application display three distinct user interfaces depending on its placement in the TouchSmart shell.

You might have noticed the application at this point does not have an icon in the shell. To fix this issue create a compressed “Windows Vista style”256x256 PNG icon and embed it in the application executable by selecting Project->Properties and select your icon from the Application tab. There are several 3rd party tools for creating this specialized type of icon available since the standard version of Visual Studio does not support compressed PNG icons.

Tips for Debugging

If you would like to debug your application with the Visual Studio debugger we recommend you attach to the running process by selecting Debug->Attach to Process. This only works for the Professional Edition of Visual Studio.

To debug with the Express edition, you must change your window style to run as a normal Windows application and remove the check for “chromeless” above.

Summary

You should now be familiar with how a basic TouchSmart application is put together and have a good starting point for your future projects. Some other important items not covered (but are outlined in the HP TouchSmart Application Development Guidelines) include application skinning and UI notifications. These advanced topics will be covered in a follow-up article, however for now please refer to the HP developer document for more detailed information.