Microsoft release new XAML Controls Gallery app to help developers implement Fluent Design

xalm-controls-gallery

Microsoft is hoping developers will be updating their UWP apps en masse to support their new Fluent Design language, and to help them along Microsoft has published an app in the store that demonstrates all the controls available.

XAML Controls Gallery” demonstrates all of the controls available in Fluent Design System and XAML. It’s the interactive companion to the Fluent Design System web site which can be seen here.

According to Microsoft, the new Microsoft Fluent Design System will deliver “intuitive, harmonious, responsive and inclusive cross-device experiences and interactions” for users. As for developers, the Microsoft Fluent Design System will allow them to deliver engaging experiences that work across a wide range of devices with input diversity.

The source code to the app is available on Github here and developers can download the app from the Store here.

Xamarin forms, UWP Windows 10 App, TitleBar and Status bar customization

Customize the title bar of your Universal App for Windows 10 is quite easy, but you need to write different code for PC and Mobile. The class that allows you to customize the title bar:

  • when running on a PC is called TitleBar
  • when running on a Mobile is called StatusBar

Before to call the API you first need to check if it exists (true if you are running on that platform):

//PC customization
if (ApiInformation.IsTypePresent(
                   "Windows.UI.ViewManagement.ApplicationView"))
{
    var titleBar = ApplicationView.GetForCurrentView().TitleBar;
    if (titleBar != null)
    {
        titleBar.ButtonBackgroundColor = Colors.DarkBlue;
        titleBar.ButtonForegroundColor = Colors.White;
        titleBar.BackgroundColor = Colors.Blue;
        titleBar.ForegroundColor = Colors.White;
    }
 }

//Mobile customization
if (ApiInformation.IsTypePresent("Windows.UI.ViewManagement.StatusBar"))
{

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

You could receive an error

StatusBar doesn't exist in context

You resolve it to add in the reference for UWP project Windows Mobile Extensions for the UWP and Windows Desktop Extensions for the UWP.

Extensions

Happy coding!

Introducing the UWP Community Toolkit

Recently, Microsoft released the Windows Anniversary Update and a new Windows Software Developer Kit (SDK) for Windows 10 containing tools, app templates, platform controls, Windows Runtime APIs, emulators and much more, to help create innovative and compelling Universal Windows apps.

Today, we are introducing the open-source UWP Community Toolkit, a new project that enables the developer community to collaborate and contribute new capabilities on top of the SDK.

We designed the toolkit with these goals in mind:

  1. Simplified app development: The toolkit includes new capabilities (helper functions, custom controls and app services) that simplify or demonstrate common developer tasks. Where possible, our goal is to allow app developers to get started with just one line of code.
  2. Open-Source: The toolkit (source code, issues and roadmap) will be developed as an open-source project. We welcome contributions from the .NET developer community.
  3. Alignment with SDK: The feedback from the community on this project will be reflected in future versions of the Windows SDK for Windows 10.

UWPToolkit

How to deploy an Universal Windows Project on real device mobile?

I'm trying to debbuging my app on real device (lumia 830 with windows 10 mobile 10.0.10581.0) Developer Mode is ON on both devices (mobile and PC), but when I'm deploying my app on my device I've got an error (DEP6100 and DEP6200). Howevere i can easily emulate on emulators and my PC, couldn’t understand whats the problem.

I googled a bit and I discovered how to resolve the problem.

Visual-Studio-2105-Deploy-Real-Device

  • Create a Registry Key in: [HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\SirepClient] (Probably you will need to create it)
  • Create a dword with name "DisableProtocol3" and value 00000001
  • Restart Visual Studio and try deploying the solution back again.

It's a provisional solution meanwhile a patch is included in Windows 10 mobile. We will have to consider deleting this key after that.

If you want to inspect your device, connect your device via USB and open a browser and type

https://127.0.0.1:10443

And you can watch your device in action!

Windows 10 Device – Home

Windows-10-Device-Home

Windows 10 Device – App Manager

Windows-10-Device-AppManager

Windows 10 Device – File Explorer

Windows-10-Device-FileExplorer

Windows 10 Device – Processes

Windows-10-Device-Processes

Windows 10 Device – Performances (in real time!)

Windows-10-Device-Performances

Advertsing

125X125_06

Planet Xamarin

Planet Xamarin

Calendar

<<  February 2018  >>
MonTueWedThuFriSatSun
2930311234
567891011
12131415161718
19202122232425
2627281234
567891011

View posts in large calendar

Month List