Thursday, May 23, 2013

Barcode Wallet for Windows 8

About Barcode Wallet for Windows 8

Save space in your wallet by digitizing the barcodes of any loyalty or memberships cards that you carry around.


  • See your most used barcodes at a glance
  • Tap a card to quickly bring up the barcode ready for scanning.
  • Pin your most used cards to the start screen.
  • Scan a barcode directly from a video feed, photo, or saved image.
  • Share generated barcodes with other apps
  • Backup and restore barcodes to Skydrive. Works with the companion Windows Phone app.
  • Pin barcodes for quick access from the start screen
  • Search for barcodes by name, including close match recommendations
  • Read barcodes directly from content shared from other apps

Report an issue or bug

You can submit any issues, bugs or feature requests here.

Tips and FAQ

Scanning Barcodes in

  • Ensure that the complete barcode can be seen clearly in the photo
  • Try to avoid the flash or external light source over saturating the barcode
  • Orientate the barcode to match the devices orientation
  • Check that the barcode format is supported by the app.
  • If you are having issues with a particular barcode try sending an image of it to an online reader. I've found the ClearImage Free Online Barcode Reader / Decoder to work well and provide back useful information, such as the barcode type as well as the data.

Scanning barcodes directly from the computers screen

Unfortunately not all types of barcode scanner are capable of reading barcodes directly from a screen. The major factor is the type of scanner being used.

A laser scanner sends out beams of light and uses the reflected light to read the light and dark bars. White bars reflect back the majority of the light. Black bars absorb the majority of light and reflect back very little. Therein lies the issue for scanning a barcode from a cellphone screen. Firstly, The glass and other layers of a cellphone screen are more reflective than a printed barcode. The excess light they reflect back will prevent the scanner from clearly seeing the difference between light and dark portions of the barcode. Secondly, a cellphone screen does not appear white because it is reflecting light. Rather, it is emitting light from a number of other colours to create white (typically red, green and blue pixels). These multiple pixels emitting light together won't reflect light in the way that a printed white does. For these reasons a laser scanner cannot read a barcode from a phones screen.

Another type of scanner is an imager or CCD Barcode scanner. These work more like a digital camera and will see the light emitted from the screen. CCD scanners can read a barcode from a cellphone screen.

See also:

  • POSGuys - Can I scan barcodes directly from a cell phone or similar device?
  • POSGuys - What is the difference between laser barcode scanners and imagers, also known as CCD barcode scanners?

Barcode Wallet

Barcode Wallet Privacy Policy

Barcode Wallet does not collect or publish any personal information.

This app is supported by ads from Microsoft Advertising. Learn more about Microsoft’s privacy practices and your choices. Learn more link:

Friday, May 3, 2013

Windows 8 Simple Toast Notifications from running app

I wanted to add a very basic toast notification for an actively running windows 8 app to indicate that a long running process has been completed. At the most basic level I needed to build up some XML and use it to create a ToastNotification that is shown via the ToastNotifier. E.g.

    using Windows.UI.Notifications;


    Windows.Data.Xml.Dom.XmlDocument toastDOM = new Windows.Data.Xml.Dom.XmlDocument();
      Body text that wraps over three lines

    ToastNotification toast = new ToastNotification(toastDOM);

    ToastNotifier tn = ToastNotificationManager.CreateToastNotifier();

However, when run, the ToastNotifier has the Setting value "DisabledByManifest". So somewhere in the Package.appxmanifest I need to enable toast notifications. Apparently it is "in the Notifications section of the Application UI tab" (Source).

I couldn't see it initially. After a bit of hunting I found it under "All Image Assets".

Thursday, May 2, 2013

Custom TopAppBarButtonStyle to mimic the Windows 8 Weather app TopAppBar

The Windows 8 Weather app uses a top app bar for flat (rather than hierarchical) navigation between Home, Places, and World Weather pages. It appears at the top of the page and uses square controls rather than the rounded ones used by the bottom app bar for commands.

With a C# and XAML project you can get started with the bottom app bar pretty quickly using the Styles derived from

in the /Common/StandardStyles.xaml that comes with most new projects. There isn't however an equivalent style for TopAppBarButtonStyle that can be used in the TopAppBar.

I've started down the path of defining my own style, but didn't complete it as I decided against used the navigation bar with an otherwise hierarchical app. It is still very much a work in progress, but placed here for when I need it again.

In StandardStyles.xaml

    <Style x:Key="TopAppBarButtonStyle" TargetType="Button">
        <Setter Property="Width" Value="150"/>
        <Setter Property="Height" Value="100"/>
        <Setter Property="Background" Value="#FF3F3F3F" />
        <Setter Property="BorderBrush" Value="#FF3F3F3F" />
        <Setter Property="FontFamily" Value="Segoe UI Symbol"/>
        <Setter Property="FontWeight" Value="Normal"/>
        <Setter Property="FontSize" Value="28"/>
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="Template">

                <ControlTemplate TargetType="Button">
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="PointerOver">
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="Background">
                                            <!--<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPointerOverBackgroundThemeBrush}" />-->
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="#FF242424" />
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPointerOverForegroundThemeBrush}" />
                                            <!--<DiscreteObjectKeyFrame KeyTime="0" Value="#FF242424" />-->
                                <VisualState x:Name="Pressed">
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPressedBackgroundThemeBrush}" />
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPressedForegroundThemeBrush}" />
                                <VisualState x:Name="Disabled">
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledBackgroundThemeBrush}" />
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledBorderThemeBrush}" />
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledForegroundThemeBrush}" />
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused">
                                        <DoubleAnimation Storyboard.TargetName="FocusVisualWhite" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
                                        <DoubleAnimation Storyboard.TargetName="FocusVisualBlack" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
                                <VisualState x:Name="Unfocused" />
                                <VisualState x:Name="PointerFocused" />
                        <Border x:Name="Border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Margin="3" Padding="0,10,0,0">
                            <StackPanel HorizontalAlignment="Left" Width="140" Margin="10,0">
                                <ContentPresenter x:Name="ContentPresenter" Content="{TemplateBinding Content}" ContentTransitions="{TemplateBinding ContentTransitions}" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                                    Text="{TemplateBinding AutomationProperties.Name}"
                                    Foreground="{StaticResource AppBarItemForegroundThemeBrush}"
                                    Style="{StaticResource BasicTextStyle}"/>
                        <Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False" Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}" StrokeEndLineCap="Square" StrokeDashArray="1,1" Opacity="0" StrokeDashOffset="1.5" />
                        <Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" StrokeEndLineCap="Square" StrokeDashArray="1,1" Opacity="0" StrokeDashOffset="0.5" />

    <Style x:Key="HomeTopAppBarButtonStyle" TargetType="Button" BasedOn="{StaticResource TopAppBarButtonStyle}">
        <Setter Property="AutomationProperties.AutomationId" Value="HomeTopAppBarButtonStyle"/>
        <Setter Property="AutomationProperties.Name" Value="Home"/>
        <Setter Property="Content" Value=""/>

In the page:

        <AppBar Height="150">
            <StackPanel  Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Left">

                <Button x:Name="homePageButton" 
                     Style="{StaticResource HomeTopAppBarButtonStyle}"/>

See Also: