Choosing NuGet package management format for new projects

The new Visual Studio 2017 comes with support for a new PackageReference package management format, which replaces the old Packages.config and project.json formats and puts the package references directly in the project file.This is bound to be the standard for NuGet in the future (or the one NuGet standard to rule them all, as they say ūüôā ), but is not supported in older versions of Visual Studio. Depending on your scenario, you might want to choose the appropriate package management format that suits your needs. Luckily, Visual Studio offers you this option via a new setting. Continue reading “Choosing NuGet package management format for new projects”

Using custom nuget.exe in VSTS build process

Soon after the release of Visual Studio 2017, the Visual Studio Team¬†Services¬†team has added a Hosted VS2017 build agent that has support for all the latest and greatest technologies. Unfortunately although the build task with Visual Studio 2017 is itself present, the newest version of NuGet wasn’t added, yet. Fortunately, it is possible to use a custom nuget.exe to circumvent this issue and be able to restore packages for project using the new csproj format with <PackageReference>. Continue reading “Using custom nuget.exe in VSTS build process”

Forcing the CommandBar to open down

The CommandBar  control is a vital component of UWP app design. It is an evolution of the AppBar  concept, which was available ever since Windows Phone 7, but with UWP is much more feature complete. One thing that is still missing however is the option to choose the direction in which the command bar opens.

Problem

The default behavior of the CommandBar¬† is to open in the up direction whenever the control is not at the very top of the window. This is an issue, because this holds true even when we define a custom title bar on Desktop, in which case the CommandBar¬† opens below the window’s minimize, maximize and close buttons which doesn’t look good at all.

The default template

The default template of the CommandBar  control defines the states of the control as a collection of VisualStates  and VisualStateTransitions . It turns out that there is always a separate visual state for down and up direction.

Inside these states you can see that the system just uses different values for some of the properties like CommandBarTemplateSettings.ContentHeight  vs CommandBarTemplateSettings.NegativeOverflowContentHeight  for the Y  property of OverflowContentRootTransform .

Solution

We cannot easily change the inner logic of the control itself, but we can make the control in up-open state look identical as it does for down-open state. This can be achieved purely by copy-pasting the Storyboards¬† from ...OpenDown¬†visual states and visual state transitions to the respective ...OpenUp¬† counterparts. Unfortunately the manual copy-pasting is the only option, because extracting the Storyboards¬† into separate resources and referencing them with {StaticResource} isn’t supported.

To get a full copy of the default control¬†style you can use either the XAML Designer (right-click the control, select Edit Template and Edit a Copy…), or search for it in C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP{version}\Generic\generic.xaml

To spare your Ctrl , C  and V  keys, I have prepared the full modified style which you can take and use in your app. You can get this style here on my GitHub along with the full sample project for this article. Beware that this style targets the Anniversary Update. I recommend doing the changes manually if you target a different version.

Summary

The CommandBar  is a great control that works as we expect most of the time. When we hit an issue however, its template is quite easy to modify.

How to add new preview devices to the XAML Designer

The Visual Studio XAML Designer for Universal Windows Platform offers design-time device previews for several different screens size and scaling combos. Unfortunately, the default selection might not be sufficient for you in some cases, especially when you want to optimize for a specific screen. Is it possible to expand the selection with more devices?

Default device offering in Visual Studio

Continue reading “How to add new preview devices to the XAML Designer”

Aligning UWP CommandBar content after Anniversary Update

The Universal Windows Platform CommandBar control has a new feature called dynamic overflow since the Anniversary Update.¬†This automatically adjusts the number of presented app bar buttons so that they fit and puts the additional commands in the secondary (overflow) menu. This addition has however¬†inadvertently caused some headaches for developers who use Content¬†property of the¬† CommandBar¬† to display additional content¬†– it turns out, that alignment of the content now doesn’t work properly.

The problem

Let’s demonstrate the issue¬†with a simple example.

We would expect, that the content of the CommandBar is aligned to the center of its available area, which indeed was the case before the Anniversary Update.

Since Anniversary 14393 SDK, the HorizontalContentAlignment  property is by default not respected.

The CommandBar does not respect the HorizontalContentAlignment property by default

Cause of the problem

The default control templates are stored in a XAML resource dictionary file on the following path: C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.14393.0\Generic\generic.xaml . If you search for the CommandBar  template inside this file, you will find out that it contains a new VisualStateGroup :

As you can see, when dynamic overflow is enabled, sizing of the columns in the main layout Grid of the control changes.

In the default visual state ( DynamicOverflowDisabled ) is the ContentControlColumnDefinition.Width  set to *  (star) and the PrimaryItemsControlColumnDefinition.Width  set to Auto . This means that the app bar buttons on the right take up a certain width and the remaining space is dedicated to the content.

With dynamic overflow¬†enabled, sizing of the columns is flipped. The control lets the¬†primary items¬†column take up as much space as it can (so that the available space can be used for the buttons and the number of displayable buttons can be calculated at runtime) and the content column now gets¬†only the width¬†it actually needs. Whichever alignment you set to the content doesn’t matter. The content will always seem left aligned, because its column is sized just to fit.

Since the Anniversary Update, dynamic overflow of the command bar is enabled by default.

Solution

You can disable dynamic overflow using the IsDynamicOverflowEnabledproperty. Although you have to make sure that the app bar buttons display well on all display sizes, you can also align the content as you please.

Disabling the dynamic overflow feature fixes the content alignment problem

If you want to preserve the dynamic overflow feature, you may just want to put some margin around your content to make sure it looks aligned. Of course, to support multiple different display sizes, you should adjust the margins using Adaptive Triggers.

Using custom fonts in C# UWP apps

Although the default Windows 10 font РSegoe UI Рis certainly very beautiful, you might sometimes want to give your Universal Windows Platform app a bit of uniqueness and personality using a custom font.

You can use almost any .ttf and .otf font file and include it in your application package. .woff and .eot fonts are currently not supported in C# UWP apps (but you can use them in JavaScript UWP apps).

Getting a font

Firstly find a custom font you want to use. There are many fonts you can use for free (even in commercial projects), as well as many fonts you can purchase.

Google Fonts and Font Squirrel are both great collections of countless free fonts to choose from.

After you choose the font you like, download its .ttf or .otf file and add it into your UWP app project as a Content file.

Ensure that the font is added with the Content Build Action
Ensure that the font is added with the Content Build Action

Setting the font in XAML

Each text control in XAML has a FontFamily property, which you can use to set the font. For the preinstalled fonts it is sufficient to just use the font name itself. For custom fonts we have to be more specific:

[FontFilePath] is the relative path to the font file in the project. In case you have an ArimaMadurai-Black.ttf font in the Assets/Fonts folder of your project, you will use /Assets/Fonts/ArimaMadurai-Black.ttf as the path.

[FontName] is the name of the font. Here things are a little tricky. Some fonts require the font name to include the type suffix (font weight, italics)¬†and some don’t. You¬†might need to use trial end error to find out which form is requested. The XAML designer should reflect the change immediately.

Using the property window

There is an alternative to manually setting the font family in XAML Рusing the XAML properties window. Select a text-based control and then expand the Text settings group in the property manager. Using the font dropdown, you can select not only from the installed fonts, but also from the custom fonts you have added into your project (these should be on top of the list).

Choosing a font in the properties window

Note that the properties window always adds the font type suffix to the FontFamily value. In case the font doesn’t display correctly when you apply the setting,¬†remove the font type manually.

Setting font family in code

Changing the font family in code is as easy as creating an instance of the Windows.UI.Xaml.Media.FontFamily class with the same value as in XAML passed to the constructor.

DirectWrite fonts

Windows 10 added XAML integration of DirectWrite downloadable fonts. With this feature you can set the font family of your text controls to a font that is not currently installed on the device and DirectWrite will download the font on-demand in the background. Before the font is downloaded, a fallback font will be displayed instead. Also, it should be able to download just the portions of the font that you need, which is beneficial for large fonts that support languages like Chinese, Japanese or Korean. The downloaded fonts are stored in a system font cache, so that they can be reused by any app.

This feature seems pretty neat, but it is unfortunately completely undocumented. The only resource regarding this functionality seems to be the XamlCloudFontIntegration sample in the Windows Universal Samples repository on Github. The sample contains three fonts that can be downloaded by DirectWrite and also a PowerShell script that lets you clear the system font cache.

You can see and try out the sample code for this post on my GitHub.

Summary of Microsoft Connect(); // 2016

From 16. 11. to 18. 11. 2016 the third year in a row the Microsoft Connect(); developer conference took place in New York and had been streamed on-line.

The team responsible for the conference promised content full of surprises, announcements and interesting sessions and I can honestly say that they did deliver.

The main keynote was traditionally led by¬†Scott Guthrie and Scott Hanselman. Let’s do a recap of the most interesting things we have learnt!

Any developer. Any app. Any platform.

This is the new mantra of Microsoft in the world of mobile and cloud development. The goal is to provide the best tools to every single developer. Whether you are building a mobile app for Windows, Android or iOS, desktop app for Windows or Mac, web app in ASP.NET or Node.js, or a cloud solution on Microsoft Azure, whether you prefer PC or Mac or Linux, Microsoft tools are at your service.

connect201616

Open-source

What a few years ago no one would predict or probably even dare to say as a joke has become a reality РMicrosoft is the most active organization on GitHub with over 16 400 contributors and has become a platinum member of the Linux Foundation.

screen-shot-2016-09-15-at-5-53-28-pmThe importance of open-source software is clear and Microsoft values the opportunity to work with the wide developer community.

The New Microsoft is open-first.

Visual Studio

The Visual Studio family of integrated development environments (IDEs) is the cornerstone of development in Microsoft technology stack and the conference therefore dedicated a substantial time showing the newest updates of the IDEs.

Visual Studio Code

Up until now the youngest member of the Visual Studio family – Code – has been able to grow up in the 18 months on market and provides a fast and lightweight developer tool for all operating systems. Because the project is fully open-source, it is improving really fast. Git, GitHub and Azure integration, smart IntelliSense and hundreds of extensions make Code an interesting alternative even to larger IDEs.

The versatility of the tool was demonstrated during the keynote by building a Node.js app using MongoDB NoSQL database on Mac. The result was then deployed as a Docker container on a Linux server hosted on Microsoft Azure. Pretty cool, if you ask me.

Debugging in Visual Studio Code
Debugging in Visual Studio Code

Visual Studio 2017

The upcoming release of Visual Studio got its name РVisual Studio 2017. The release candidate version (RC) is available now on VisualStudio.com.

The new Visual Studio has been slimmed down and with the new modular installer you can install the IDE much faster with exactly the features you actually need. It is also very easy to later add new features or remove them as you see fit.

The IDE itself is substantially faster (and fluider), in many cases by an order of magnitude compared to 2015.

Visual Studio 2017 brings many improvements across the board.

Starting with the improved start page, with easier access to active repositories and recently opened solutions.

startpage

A welcome addition is the ability to edit .csproj project files right inside Visual Studio without having to unload the project.

Navigation features were also improved. The Find All References dialog for example now offers a cleaner hieararchical  preview of all found references.

findallrerencesCode blocks are now marked with Structure Guide Lines. Hovering the mouse over them gives you a hint of which code block they belong to. This substantially improves code readability.

structure_visualizer_cs_tooltipVisual Studio Extensions dialog was updated as well and allows for batch installations and updates of extensions without multiple restarts of the environment. Built-in is also the Roaming Extension Manager, which shows you the extensions you are using on other devices, but have not installed locally, yet.

The Extension manager is now also able to alert you when some extensions are slowing Visual Studio down and you can therefore resolve performance issues much more easily.

Extremely intriguing is the new Live Unit Testing feature of Visual Studio Enterprise 2017. This allows you to display the results of unit tests and code coverage in real-time while you code. After making changes to a code snippet, Visual Studio will automatically run the related Unit Tests in the background and will show the results using indicator on the left margin of the code. As far as I know, only nUnit offered this feature up until now and it is great to see it integrated into Visual Studio.

Exception handling was also substantially improved. The new dialog window offers more useful information about the exception.

exceptionhelper0

For the full list of changes in Visual Studio 2017 RC see the Release Notes on the Visual Studio website.

Visual Studio for Mac

One of the biggest surprises of this year’s Connect(); (well, at least¬†if you hadn’t seen the leaked announcement on a Microsoft blog ūüôā ) was the special version of Visual Studio for macOS.

Visual Studio for Mac brings developers the best IDE for Xamarin iOS and Android app development and ASP.NET Code web app development on Mac.

1_screen-shot-561x2

Preview version is available for you to try out now. Final release of the product will be free as part of the Visual Studio subscription. A free Community edition will also be available.

Xamarin

With Xamarin developers can build native mobile apps in C#. The platform is used by thousands of developers and companies all over the world. Thanks to the Microsoft’s acquisition of Xamarin in February both companies have been now working even closer together.

The open-source Xamarin.Forms framework is getting a lot of attention. This frameworks allows you to build cross-platform apps, which share not only the business logic in C#, but also the user interface (UI) in XAML.

In Visual Studio 2017 you will find the long awaited Xamarin Forms Previewer, which provides live rendering of XAML interface. You will no longer have to enter the¬†inconvenient “change-and-run” loop and you will get¬†immediate feedback on your edits.

xamarinpreviewerWith the new Xamarin Inspector you can browse and edit XAML hierarchy of a running app. The tool can display a 3D model of the layers the app consists of. Every change can be persisted to the source code as well.

xamarininspectorRemote iOS Simulator for Visual Studio Enterprise is now stable. You can now easily test your iOS apps without leaving Visual Studio on Windows. This puts an end to the endless spinning between PC and Mac. Your chair will be grateful ūüôā .

simulatorNew tools also offer easier ways to debug your app and the backend simultaneously.

Many developers will also be pleased to know that Samsung is now contributing to Xamarin and has announced support of .NET Core for Tizen. This open-source operating system is built on Linux and runs on more than 50 million connected devices ranging from wearables, through home appliances to TVs. Xamarin.Forms now contains experimental support of Tizen, including the Visual Studio emulator.

Universal Windows Platform

UWP apps were not left behind with the Visual Studio 2017 update and got quite a few nifty improvements.

The .NET Native compiler received over 600 bug-fixes and improvements and brings even better performance and optimizations to UWP apps.

Application Manifest Designer now has a completely redone Visual Assets page. The new layout gives you an option to automatically generate image assets of all sizes based on one single image file. This is much easier than to manually create the appropriate sizes with the right padding around the image.

manifestvisualassetgeneratorNew diagnostic tool UI Analysis helps you identify XAML problems that could lead to hindered performance and usability of the application.

XAML Designer offers a color theme and high-contrast options for its preview. Also, the new Edit & Continue feature allows you to tweak XAML markup while the app is running. The changes are not only displayed live in the app, but can also be persisted.

editandcontinue

IntelliSense is now also finally able to offer suggestions with the {x:Bind} syntax and can add missing namespaces automatically.

intellisense_without%20namespaceIf you use Appium, you can take advantage of improved UI testing of UWP apps. Using the Windows Application Driver can the test project launch and interact with your UWP app and perform your defined tests.

Visual Studio Mobile Center

Building a great mobile app requires in addition to its development also testing, distribution and monitoring. The new Visual Studio Mobile Center aims to help you with these tasks.

visual-studio-mobile-center2This cloud service, now available as a invite-only preview covers the whole mobile app lifecycle.

Currently the following features are present:

  • Build – continuous integration and release management
  • Test – automatic testing on real devices (using Xamarin Test Cloud)
  • Crash reporting – crash analytics in real time
  • Distribution – deployment to users and testers
  • Analytics – business and usage metrics
  • Authentication – integration with different authentication providers
  • EasyTables – easy cloud data storage

visual-studio-mobile-centerThe service supports Android and iOS apps written in Objective-C, Swift, Java, Xamarin and React Native. Support of UWP and Cordova apps is planned in the near future.

In addition to the website interface you can access all features of VSMC using its powerful REST API.

Microsoft Azure

Microsoft is trying to achieve maximum flexibility for customers with its cloud offerings. Azure has now 38 regions over the world (which is more than Google and AWS combined), more than 100 datacenters and is the only certified cloud offering in China. 90% of Fortune 500 companies is now using Microsoft Cloud and Azure adds 120 000 users monthly.

Docker is getting first-class support in Azure and Visual Studio. Services like Azure App Service can be easily integrated with Docker. Developers will be pleased to know that creating, testing and deployment of apps in Docker containers is just a few clicks away with the Visual Studio Tools for Docker. Visual Studio even allows debugging of code in multiple containers at the same time. Finally, Docker is now supported in Visual Studio Team Services continuous integration.

image_8220c68d-c750-43a9-9fd6-21af02268cadAzure Application Insights (web app analytics) and Team Foundation Server 2017 reached General availability (GA).

Azure Functions is a new Azure service, which allows you run code based on events (not only Azure-based, but also from third-party services or on-premise systems). The whole infrastructure is fully abstract, so your only job is to select an event you want to respond to and write the code that should be executed. You can write your event handler in JavaScript, C#, Python and PHP or use Bash, Batch or PowerShell scripting. The service scales automatically based on the incoming traffic and you pay only for the actual processing time.

azurefunctionsSQL Server 2016 is now for the sixth year in a row the safest database system. It offers advanced business intelligence (BI) analytical tools at a fraction of the price of competition. With the announced Service Pack 1 are these analytical features added to all editions of SQL Server Рincluding the free-of-charge Express edition. A preview of SQL Server for Linux was also announced at Connect();, with Docker support, of course.

Azure Bot Service, now in GA, offers cloud-based Conversations-as-a-platform functionality. The services gives you the opportunity to build intelligent conversational bots for Skype, Slack, Facebook Messenger, Microsoft Teams and more. Everything is scaled automatically based on traffic.

Azure Data Lake Services are a new enterprise-grade service in GA, which offers effective storage and processing of enormous amounts of data.

.NET

Two years ago, .NET became open-source on GitHub and its community has been incredibly active and vibrant since then. Over 60% contributions to .NET Core has come from community.

Independent .NET Foundation organization supporting the open development and collaboration in the .NET ecosystem currently maintains over 400 repositories on GitHub and its Technical Steering Group consists of companies like RedHat, Samsung, JetBrains and Unity (and Microsoft, of course). What no one expected however – Google is now also becoming a member of .NET Foundation.

.NET Core 1.1 was released. It includes over 1 300 new APIs, better Azure integration and many performance enhancements. These are most prominently aparent in ASP.NET Core, which is now the tenth fastest web framework in the plain-text test from TechEmpower and was able to handle 1 822 366 requests per second. This is 850 times more than ASP.NET two years ago Рan unbelievable achievement.

aspnetcoreperformance_techempower-f46b4c14f6f3bbaeNew version of MSBuild supports new version of the .csproj format, which is much simpler and more readable. Not a single GUID is required and the source-code files can be included in the project automatically using wildcard characters. This means the end of the oh-so-hated project file source control merge conflicts.

TL;DR

Connect(); //2016 was clearly the biggest yet. Whatever you are building, the new tools from Microsoft are here to help you do more and achieve more.

Visual Studio 2017, Visual Studio for Mac and Visual Studio Code bring the best IDEs for every opportunity and users on any operating system. With Xamarin it is the best place for mobile app development. Hand in hand with the Visual Studio Mobile Center cloud service you get the best means to cover the whole mobile application lifecycle.

Azure does keeps getting better with Docker, new Azure Functions, Azure Bot Service and Azure Data Lake Services.

Open .NET Core has sparked the interest of Google and Microsoft has become a platinum member of the Linux Foundation.

If you haven’t had a chance to watch Connect(); //2016 live, be sure to check out the on demand sessions, available at Channel9 and try out all the cool stuff that was announced.

Happy coding!