In The Hand Ltd

Blog

  • Windows Phone: App Accent Color

    The last post showed how to get the current app’s tile colour in Windows 8. What about Windows Phone? There isn’t the concept of a tile colour – you provide a full image for your app icon and tiles and this can be whatever colour you choose or transparent in which case the user’s accent colour is used. In terms of a theme colour for phone apps the application icon is probably a better place to start. The vast majority of apps use a solid colour background, this is seldom the case with games but since this post focusses on apps let’s not worry about that.

    The Charming ApplicationModel library contains a more complete implementation of the Windows.ApplicationModel.Package class for reading app metadata at runtime – on Windows Phone most of the properties are not implemented. This has been updated with a number of new Windows 8.1 properties such as Logo which returns a Uri to the application logo file within your package. We can then use a WriteableBitmap to read an individual pixel from the image and create a solid colour brush to be used inside the app. This allows you to change the appearance of your app without any code or XAML changes, and is also useful for custom controls where the code might reside separately from the application itself. Below is the equivalent code to the Win8 version posted before. This creates a resource “AppAccentBrush” which can be used within the app UI.

    System.Windows.Resources.StreamResourceInfo sri = Application.GetResourceStream(InTheHand.ApplicationModel.Package.Current.Logo);

    System.Windows.Media.Imaging.BitmapImage img = new System.Windows.Media.Imaging.BitmapImage();
    img.SetSource(sri.Stream);

    System.Windows.Media.Imaging.WriteableBitmap wb = new System.Windows.Media.Imaging.WriteableBitmap(img);
    int rgb = wb.Pixels[0];
               
    byte r, g, b;
    r = (byte)((rgb & 0xFF0000) >> 16);
    g = (byte)((rgb & 0xFF00) >> 8);
    b = (byte)(rgb & 0xFF);
    System.Windows.Media.Color c = System.Windows.Media.Color.FromArgb(0xff, r, g, b);
    Application.Current.Resources.Add(“AppAccentBrush”, new System.Windows.Media.SolidColorBrush(c));

    There is currently no check here for transparent backgrounds as we’d probably want to default to a solid colour in this case (perhaps fall back to PhoneAccentBrush). I’m looking at improving this code and integrating it into the charming libraries, to provide customisation to some of the UI such as the settings screens. You can grab the Charming libraries from GitHub (https://github.com/inthehand/Pontoon) or NuGet (https://www.nuget.org/profiles/InTheHand).

  • Windows Store Apps: Application Tile Colour Within an App

    When you define your package manifest for a Windows Store app you can specify the background colour used for your tile. Chances are this is a brand colour which you want to use throughout your app. You could specify it twice – once in the manifest and once in a XAML resource. However imagine the scenario where you are creating a custom control and need to use this colour without actually having access to the executing app code. The solution is quite simple and involves reading the compiled manifest from within your executing app package. The file in question is called AppxManifest.xml. We can use an XmlReader to locate the specific attribute we need. I wouldn’t poke around for too many things in this file as most of this information is accessible through the Windows.ApplicationModel.Package class. The code below (error checking removed for clarity) shows the steps to open the file for reading, locating the required Element and reading the “BackgroundColor” attribute. This string contains an RGB value in HEX notation so we can extract the Red, Green and Blue values and save to a Color. I’ve saved this to the apps Resources dictionary with the name “AppAccentBrush”.

    Stream s = await Windows.ApplicationModel.Package.Current.InstalledLocation.OpenStreamForReadAsync("AppxManifest.xml");
System.Xml.XmlReader reader = System.Xml.XmlReader.Create(s);
reader.ReadToDescendant(<"VisualElements", "http://schemas.microsoft.com/appx/2013/manifest");
string attr = reader.GetAttribute("BackgroundColor");
byte r, g, b;
r = byte.Parse(attr.Substring(1, 2), System.Globalization.NumberStyles.HexNumber);
g = byte.Parse(attr.Substring(3, 2), System.Globalization.NumberStyles.HexNumber);
b = byte.Parse(attr.Substring(5, 2), System.Globalization.NumberStyles.HexNumber);
    accentColor = Windows.UI.Color.FromArgb(0xff, r, g, b);
this.Resources.Add("AppAccentBrush", new SolidColorBrush(accentColor));

    What else might you want to use this for? Well one feature we found annoying was that regardless of your colour scheme the indeterminate progress bar uses a default colour. As it turns out this is defined in the ProgressBarIndeterminateForegroundThemeBrush resource. You can access this Brush and modify its colour to match your tile colour.

    if(this.Resources.ContainsKey("ProgressBarIndeterminateForegroundThemeBrush")) 
{
 var brush = this.Resources["ProgressBarIndeterminateForegroundThemeBrush"] as SolidColorBrush;
 brush.Color = accentColor;
}

  • From Isolated Storage to LocalFolder – Getting Folder Size

    If you want to determine the space used for a particular folder in Isolated Storage you have to work recursively through the files in the folder (and sub-folders) and determine their sizes. In the Windows API the StorageFolder gives the indication that you can get the BasicProperties for a folder and use this to get its size. Unfortunately this just returns zero for folders. Therefore you have to use the same basic approach but modified for the new API (and async code). Below is an example of a method to do that. Simply pass in the StorageFolder of interest and it will return the size e.g.

    ulong size = await GetFolderSize( await Windows.Storage.ApplicationData.Current.LocalFolder.GetFolderAsync(“cheese”));

    The method looks like this:-

    public async System.Threading.Tasks.Task<ulong> GetFolderSize(Windows.Storage.StorageFolder folder)
    {
        ulong size = 0;

        foreach (Windows.Storage.StorageFolder thisFolder in await folder.GetFoldersAsync())
        {
           size += await GetFolderSize(thisFolder);
        }

        foreach (Windows.Storage.StorageFile thisFile in await folder.GetFilesAsync())
        {
           Windows.Storage.FileProperties.BasicProperties props = await thisFile.GetBasicPropertiesAsync();
           size += props.Size;
        }

        return size;
    }

    You can use this across both Windows Phone 8 and Windows Store projects.

  • Build Windows Phone Apps Without Any Code

    Microsoft have today announced Windows Phone App Studio Beta (https://apps.windowsstore.com/default.htm). This is a web based tool which allows you to build your own app by putting together data sources and customising the look and feel. The instructions list just four basic steps and there is a library of templates to start from. This might not be of huge interest to hardcore developers but it does allow non-developers to build and test apps and get a feel for what the platform is capable of. One of the interesting features is that once you’ve created your app you can download the source code as a Visual Studio solution and then customise it however you see fit.

    To investigate this I picked a couple of the Charming libraries (http://charming.codeplex.com) to add Search and Sharing functionality to a ready-made app. I’ll be following up with a detailed step-by-step approach of adding Search support to a generated app.

  • Charming ApplicationModel

    My previous couple of posts have been related to the Sharing functionality provided by the Charming libraries. This one looks at a smaller (but no less exciting) component. For Windows Phone development if you want to retrieve the app information at runtime you have to read the WMAppManifest.xml file included in the package. In Windows 8 an API was provided (Windows.ApplicationModel.Package and related classes) to provide a strongly typed API around the Windows Store metadata. Although these classes are present in Windows Phone projects they aren’t all implemented and you can waste a lot of time getting exceptions assuming that the functionality will work.

    Enter Charming ApplicationModel. This replicates the same object model you see for Windows Store apps but in a way which actually works and reads information from the xap. In addition to this there is an added property – Capabilities which returns the combination of capabilities requested by your package. This has been especially useful in developing the other Charming libraries as it makes it possible to add functionality only when certain capabilities are added in the consuming app. For example you won’t get any nasty surprises if you add the Share library and not the Proximity capability – the library won’t include the “Tap+Share” option.

    Beyond the other Charming libraries you can use this library yourself – for example write a generic About page which is populated at runtime by the app metadata. The library is tiny, you won’t need to mess about with XML parsing and it gives you the potential of sharing more code between Phone and Store projects.

    ApplicationModel is the only one of the Charming libraries which doesn’t expose any UI. As already stated it is used by Charming Share, and also Charming Settings and as of 8.1 it will also be used by Charming Search but more of that in the next post…

  • A Trip Around Charming Share

    The Charming libraries for Windows Phone are a set of (currently) six components for Windows Phone development with the mission of providing more code consistency with Windows 8. Following on from the NFC component, this post will cover its cousin the Share component.

    Windows Phone provides a number of classes in the Windows.ApplicationModel.DataTransfer namespace but there is no Share charm or sharing functionality here. The Charming Share library replicates this functionality with a sharing component which can be called in the same way as on Windows 8 and yet exposes the various platform sharing mechanisms. Because this is not an OS feature it is not possible to create share targets and share data with other apps. I am looking at the possibility of making the providers extensible so that you can add items to the list of targets.

    You can currently share three types of object – Text, Uri and Image. The available targets will vary depending on the data you pass. Image is a special case as it uses the ShareMediaTask which means you have access to all the system targets including other apps registered as Photo Extras. This also means you can share an image via Email which is not possible with the EmailComposeTask. The table below shows the supported targets based on data type:-

     

    Text

    Uri

    Image

    Tap+Send

     

    Yes

    Yes

    Bluetooth

     

     

    Yes

    Messaging

    Yes

    Yes

    Yes

    Email

    Yes

    Yes

    Yes (Individually Listed)

    Social Networks

    Yes

    Yes

    Yes (Individually Listed)

    Photo Extras

     

     

    Yes

     The Tap+Send functionality for Uris is provided by the separate Charming NFC Share component. It will only appear in the list if you add the NFC library as a reference in your project (and add the Proximity capability). The share dialog shown when passing a Uri is designed to look familiar and uses page transitions from the Phone Toolkit:-

    I’m working on localised resources for these components so that they will be supported in all Windows Phone 8 languages. Because the Image sharing dialog is system provided this is already localised into the device language. In early testing the NFC and Share components are looking good with localised text and supporting LeftToRight and RightToLeft layouts.

    If other formats can be supported I’m looking at the possibility of adding a Bluetooth provider to beam files using OBEX, again trying to stick as closely to the system provided Bluetooth sharing for images. Another possible target is a Clipboard provider for Text or Uri, the source code is in there but the provider is not currently used.

  • Introducing Charming NFC Share

    In my talk this week I demonstrated a simple library for sharing a single Uri over NFC. I’ve now completed packaging it up and it is available on NuGet – https://www.nuget.org/packages/InTheHand.Phone.Nfc/

    This is a very simple component to use in your app requiring just three lines of code to call. It requires the Windows Phone Toolkit from which it uses page transitions, if you don’t already have this in your project NuGet will add it for you. It also requires you to add the Proximity capability in your app metadata. The Windows Phone Emulator exposes a null NFC device so it is possible to interact with this feature on the emulator (it just won’t send anything). The look and feel of the task has been designed to match the platform so it will look instantly familiar and supports both the light and dark themes.

    To share a Uri from your app you’ll need to execute the following:-

    Add the InTheHand.Phone.Nfc package via NuGet

    Add the ID_CAP_PROXIMITY capability to your WMAppManifest.xml

    Add the following code when you want to share a Uri:-

    InTheHand.Phone.Tasks.ShareNfcLinkTask snlt = new InTheHand.Phone.Tasks.ShareNfcLinkTask();

    snlt.LinkUri = new Uri(“http://peterfoot.net“);

    snlt.Show();

    

    Obviously setting the LinkUri to whatever URI you want to share. This could be a web link or a custom URI which performs some task in your app.
    

    At the moment the resources in the library are not localised beyond English although I hope to add this soon.
    

    This is the first in a set of related “Charming” libraries for Windows Phone. I’ll be adding more to NuGet shortly. Hopefully the reason for the name will become clearer too…
    

    

    
			
    
		
    
		
	
  • 
		
		
    
			
			
    Resources from Bluetooth and NFC for Windows Phone and Beyond
    
			
    As promised here are the resources from yesterday’s session on Bluetooth and NFC. I’ve begun uploading the slides and code to this SkyDrive folder:-
    

    http://sdrv.ms/143OZD7
    

    I have a few finishing touches to put on the sharing library for NFC – it will be up on NuGet and CodePlex shortly.
    

     
    

    
			
    
		
    
		
	
  • 
		
		
    
			
			
    Page Header Styles
    
			
    The page header is the small text you see across the top of most apps, often in all uppercase. When you create a new Windows Phone app from the default templates you’ll get something like this created in your MainPage.xaml
    

    <TextBlock Text=”MY APPLICATION” Style=”{StaticResource PhoneTextNormalStyle}” Margin=”12,0″/>
    

    

    The annoying thing about this is this is not the same format as built-in apps. The font size is wrong and so is the weight. Rather than manually fixing up every instance I define the following style in the App.xaml:
    

    <Style x:Name=”PhoneTextPageHeaderStyle” BasedOn=”{StaticResource PhoneTextNormalStyle}” TargetType=”TextBlock”>
       <Setter Property=”FontSize” Value=”{StaticResource PhoneFontSizeMedium}”/>
       <Setter Property=”FontFamily” Value=”{StaticResource PhoneFontFamilySemiBold}”/>
    </Style>
    

    Then my page XAML becomes:-
    

    <TextBlock Text=”MY APPLICATION” Style=”{StaticResource PhoneTextPageHeaderStyle}”/>
    

    My app is now consistent with built-in apps!
    

    [Updated with simplified Style XAML removing hard-coded font size]
    

    
			
    
		
    
		
	
  • 
		
		
    
			
			
    Update to 32feet.NET for Windows Phone
    
			
    Version 8.1 of 32feet.NET for Windows Phone is now available via NuGet. This package adds some helper functionality for Bluetooth development. In particular this version includes the RfCommServiceId (designed to match the Windows 8.1 API) to provide information about various standard RfComm profiles. You can use this when connecting a StreamSocket or to filter devices in the BluetoothDevicePicker.
    

    Speaking of which the BluetoothDevicePicker has been updated to more closely follow the appearance of the dialog displayed when you use the built in Bluetooth photo sharing feature. Currently the library is built with localized resources in mind but has only English text. If you are interested in providing localized text in your own language please contact me.
    

    The CodePlex project contains the source and the Serial sample app. I’m working on some additional sample apps which will be added soon.