Windows 10 UWP – Template 10 Mobile Status Bar

Windows-Dev

Template 10 is a set of Visual Studio project templates for Windows 10 XAML / C# apps.

In my previous post I set the app theme to Light and found that the status bar was completely white on Windows 10 Mobile. The status icons were no longer visible.

Before we can make changes to the status bar we first need to add Windows Mobile Extensions for the UWP  to our references:

In the Solution Explorer right click on References and then click Add Reference. In the left pane select Universal Windows and then Extensions from the drop down menu. In the right hand pane select Windows Mobile Extensions for the UWP and click OK.

Now we can customize the status bar by adding the highlighted code to App.xaml.cs.

public override async Task OnStartAsync(StartKind startKind, IActivatedEventArgs args)
        {
            // TODO: add your long-running task here
            await NavigationService.NavigateAsync(typeof(Views.MainPage));
           
            //Set StatusBar background and foreground colors
            if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.UI.ViewManagement.StatusBar"))

            {
                var statusBar = StatusBar.GetForCurrentView();
                if (statusBar != null)
                {
                    statusBar.BackgroundOpacity = 1;
                    statusBar.BackgroundColor = Colors.Orange;
                    statusBar.ForegroundColor = Colors.White;
                }

Next just add the required using statements as prompted by Visual Studio.

As you can see I set the background color to orange and the text to white:

uwp-status-bar

Sources:

View story at Medium.com

https://stenobot.wordpress.com/2015/07/08/uwp-app-development-styling-the-mobile-status-bar/

https://blogs.msdn.microsoft.com/gianlucb/2015/10/08/uwp-windows-10-app-titlebar-and-status-bar-customization/

Windows Phone Dev – Changing the rootFrame Background Color

Windows8-Phone-Logo

In my Windows Phone 8 Runtime app I wanted to change the rootFrame background color from the default (black) to a custom color.

Here is the solution highlighted in my App.xaml.cs:

if (rootFrame == null)
{
    // Create a Frame to act as the navigation context and navigate to the first page
    rootFrame = new Frame();

    SolidColorBrush color = new SolidColorBrush();
    color.Color = (Windows.UI.ColorHelper.FromArgb(0xFF, 44, 50, 50));
    rootFrame.Background = color;

As you can see I used Windows.UI.Color.Helper.FromArgb to specify a custom color. If you want to use a predefined color just use color.Color = Windows.UI.Colors.Black; with the color of your choice on line 72.

Sources: https://social.msdn.microsoft.com/Forums/windowsapps/en-US/eae51ff6-6cb4-46a5-bfe7-7a97b8d3a17c/windows-phone-81-runtime-application-default-theme-override-not-applying-to-page-transitions?forum=wpdevelop

Windows Phone Dev – Making the Status Bar blend with your App

Windows8-Phone-Logo

I’m working on a WinRT app for Windows Phone 8.1 and I wanted the app to blend in with the Status Bar more.

For this example I have added the highlighted code to my MainPage.xaml.cs:

        public MainPage()
        {
            this.InitializeComponent();

            this.navigationHelper = new NavigationHelper(this);
            this.navigationHelper.LoadState += navigationHelper_LoadState;

            // Make Status Bar part of the screen

            ApplicationView.GetForCurrentView().
            SetDesiredBoundsMode(ApplicationViewBoundsMode.UseCoreWindow);

        }

In my MainPage.xaml I have simply specified a border background around my first stackpanel:

<!-- TitlePanel -->
        <Border Background="#0050EF">
            <StackPanel Grid.Row="0"
                        Margin="30,0,0,28">
                <TextBlock x:Uid="RegionsPageHeader"
                           FontSize="32"
                           Text="index"
                           Margin="0,40,0,-16"
                           Style="{StaticResource TitleTextBlockStyle}"
                           SelectionChanged="TextBlock_SelectionChanged" />
            </StackPanel>
        </Border>

As you can see from the screenshot the Status bar and my textblock now share the same color.

blennd

Sources: http://blogs.msdn.com/b/johnkenn/archive/2014/04/16/hiding-the-status-bar-in-windows-phone-8-1-apps-or-not.aspx

Windows Phone Dev – Character Escape Sequences

Windows8-Phone-Logo

I recently stumbled upon a list of c# character escape sequences here.

Escape sequences are needed because certain characters have special meanings within a literal string (and so cannot be used directly). For example, a single quote would need to be written as follows: \'

So I took a quick look at the list to see which ones would be useful working within a basic data-bound Windows Phone app sample.

The following escape sequences all functioned the same (which was expected):

  • \f – Form feed
  • \n – New line
  • \r – Carriage return

I have been in the habit of using \r\n in my apps for a new paragraph, but any combination of the above works.

The double quote escape sequence \" did not work but this special character sequence works fine instead: "

The escape sequence that I liked the most was \t which is used for a horizontal tab. I wish I had known about this one a while back.

The other interesting one is \u for Unicode characters. With this you can, for example, open up Character Map, select any character and enter the four digit hex code for that character. \u00E6 will display a Latin small letter Ae. Very useful!

Windows 8.x Phone Dev – Windows Phone Toolkit Toggleswitch Control

Windows8-Phone-Logo

I’m just starting work on a little Silverlight app for Windows Phone 8.x and want to use the ToggleSwitch control on the settings page.

The ToggleSwitch is one of many useful controls that are part of the Windows Phone Toolkit – so the first step is to install the toolkit.

In Visual Studio click the Tools menu, Nuget Package Manager and then Package Manager Console. At the Package Manager prompt type the following:

install-package wptoolkit

Next add the toolkit namespace prefix to the page you are working on:

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

Adding toolkit controls in XAML is straightforward:

<toolkit:control-name>

IntelliSense will give a full list of the toolkit controls for you.

<toolkit:ToggleSwitch x:Name="toastToggle"
                      Header="Enable Toast Notifications"
                      Grid.Row="1"
                      Margin="9,0,0,0"
                      Checked="toastToggle_Checked"
                      Unchecked="toastToggle_Unchecked">
</toolkit:ToggleSwitch>

Above is the basic code that I used for my ToggleSwitch:

ToggleSwitch

I haven’t finalized the behavior in the code behind for the ToggleSwitch but there are two events to show “On” and “Off” when the control is checked or unchecked:

private void toastToggle_Checked(object sender, RoutedEventArgs e)
        {
            toastToggle.Content = "On";
        }

private void toastToggle_Unchecked(object sender, RoutedEventArgs e)
        {
            toastToggle.Content = "Off";
        }

There are plenty of other controls worth looking at – I already have my eyes on the DatePicker and the TimePicker for this app!

Happy coding!

Windows Phone 8 Dev – Localizing the AppBar

Windows8-Phone-Logo

In my previous post I looked at the basics of app localization (supporting other languages). If you are not familiar with setting up the Name and Value pairs in the AppResources.resx files then you will need to refer to that post before proceeding.

Before I looked at localizing my app I had my App Bar setup on my MainPage.xaml like this:

<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar Mode="Minimized"
                              Opacity="1.0"
                              IsMenuEnabled="True"
                              IsVisible="True">

            <shell:ApplicationBarIconButton Click="about_Click"
                                            IconUri="Assets/Images/appbar.information.circle.png"
                                            Text="about" />
       </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

As I could not find a solution for binding to my XAML appbar I decided to do it in C# instead. So I commented out my XAML App Bar (MainPage.xaml) and the Click event in MainPage.xaml.cs.

This is my App Bar setup in MainPage.xaml.cs:

public MainPage()
        {
            InitializeComponent();

                // Set the page's ApplicationBar to a new instance of ApplicationBar.
                ApplicationBar = new ApplicationBar();
                ApplicationBar.Mode = ApplicationBarMode.Minimized;
                ApplicationBar.Opacity = 1.0;
                ApplicationBar.IsVisible = true;
                ApplicationBar.IsMenuEnabled = true;

                // Create a new button and set the text value to the localized string from AppResources.
                ApplicationBarIconButton appBarButton = new ApplicationBarIconButton(new Uri("/Assets/Images/appbar.information.circle.png", UriKind.Relative));
                appBarButton.Text = AppResources.AppBarButtonText;
                ApplicationBar.Buttons.Add(appBarButton);
                appBarButton.Click += new EventHandler(appBarButton_Click);

                //// Create a new menu item with the localized string from AppResources.
                //ApplicationBarMenuItem appBarMenuItem = new ApplicationBarMenuItem(AppResources.AppBarMenuItemText);
                //ApplicationBar.MenuItems.Add(appBarMenuItem);

        }

As you can see the App Bar Button has a binding to AppBarButtonText (which is defined in my AppResouces.resx files).

Here is the Click event for the button:

        private void appBarButton_Click(object sender, EventArgs e)
        {
            NavigationService.Navigate(new Uri("/YourLastAboutDialog;component/AboutPage.xaml", UriKind.Relative));
        }

And there is my localized App Bar button.

about spanish

Happy coding!

Sources:

http://msdn.microsoft.com/en-us/library/windows/apps/ff431786%28v=vs.105%29.aspx

Windows Phone 8 Dev – Landscape & Portrait Supported Page Orientation C#

Windows8-Phone-Logo

Just a quick note to remind myself how to enable rotation between portrait and landscape orientations in Windows 8 Phone.

Simply add the highlighted code to the code behind page of each page that should rotate:

public DetailsPage()
    {
        InitializeComponent();
        this.SupportedOrientations = SupportedPageOrientation.Portrait | SupportedPageOrientation.Landscape;

The Status bar and the command bar get rotated as you can see and the Command bar is no longer minimized.

landscape-orientation

I think that this is a nice addition for the user for certain apps. Some layouts benefit from this option and it can help with the readability of some content (even though some vertical space is lost).

Sources:

http://blogs.windows.com/buildingapps/2010/04/08/automatic-rotation-support-or-automatic-multi-orientation-layout-support-for-windows-phone/