Partager via

Deep Dive: Windows App Studio NuGet packages for Windows 10 Apps

  • Article

Hello everyone!  We hope you've been having a great November.  It's so exciting to see how much everyone has been using and enjoying the new Windows 10 features in Windows App Studio that were released as a part of the update at the beginning of the month.  

Today we want to get a bit technical and dig into one of the aspects of Windows App Studio that's designed to help when extending your app in Visual Studio, which is the use of NuGet packages.  NuGet allows for the easy production and consumption of packages, so it can help speed things up when developing apps.

We currently have two published NuGet packages that Windows App Studio uses to generate the code for Windows 10 Apps:

  • Windows App Studio UWP Controls: This library contains the UWP/XAML controls used in Windows App Studio to create responsive Windows 10 apps. This library encapsulates different XAML controls used to represent information in the apps as well as other base application services like caching, navigation and commands.
  • Windows App Studio Data Providers: This library enables the applications to retrieve information from several Internet services (aka data sources), define the schema of the information, handle the data parsing, and manages the complexity of the authorization for those data sources that require it.

The packages are published under the Windows App Studio account in NuGet. All source code is available in the team GitHub account, under the open source waslibs repo. That repo contains the source code for the libraries as well as for the samples and tests. We are totally open to the community so feel free to fork the source code and propose changes by making a pull request.

Windows App Studio UWP Controls

As mentioned before, this library is used in the Windows 10 apps generated with Windows App Studio. The library implements common patterns used in UWP applications as well as provides some user interface controls that help the developers to create responsive apps that adapt to different form factors. The library contains different namespaces, and the following are the most relevant:

  • Actions: Generalizes the way the developers add commands by providing a list of actions that are automatically added to the app command bar.
  • Cache: Provides a caching service that can be used to store information locally, thereby not requiring access external data every time a page renders information.
  • Commands: Contains the definition of different commands based on the Relay Command pattern.
  • Controls: Contains the XAML controls used to present information, of which the most notable are:
    • ReadingWebView: XAML control based on the WebView control to render HTML content in the pages.
    • ResponsiveGridView: Responsive control to present information within a GridView. It reacts to changes in the layout as well as the content so it can adapt to different form factors automatically. The number and the width of items are calculated based on the screen resolution in order to fully leverage the available screen space.
    • SectionList: A responsive control that renders the information from sections vertically, it is used to create the home page for Windows App Studio apps.
    • VisualBreakPoints: Enables the definition of different visual breakpoints for a certain layout as well as modifies the properties of child controls based on the defined breakpoints. The main advantage over the platform “Visual State Manager” control is that all the visual breakpoints can be defined in a centralized JSON file and allows for the modification of properties inside one or more DataTemplates.
    • Navigation: Provides the navigation service for the app, simplifying the management and improving the handling.

We recommend heading over to UWP code samples on GitHub for detailed usage and documentation of these controls and services.

Windows App Studio Data Providers

Within the Data Providers library, we concentrate the code that enables our generated apps to access data from different data sources. For Windows App Studio, a data source is any source that returns elements to be displayed within the app.

Any Data Provider for Windows App Studio app is created based in four pillars:

  • Configuration: This is the configuration necessary to access the data source. It would be as simple as a URI for a RSS data source or a bit more complex as the APIKEY and the hashtag for a Twitter data source.
  • Schema: Contains the definition of columns for each element returned by the data source. The schema is used by the layouts to finally display the information.
  • Parser: Contains the implementation to convert the raw information returned by the data source to the resulting elements according to the defined Schema.
  • Provider: The is the implementation of how to retrieve the requested data for a concrete source. For example, given an RSS data source, we implement a simple http request, for a Twitter data source we need to ensure the authorization policies to be able to access the Twitter REST API

Windows App Studio Data Providers library contains the implementation to retrieve information from several sources, thereby hiding the complexity of dealing with each concrete implementation. We currently support some of the most popular sources of information on the Internet, such as: Twitter, Facebook, Flickr, Instagram YouTube, Bing and generic RSS.

Since all the information in Windows App Studio generated apps is for data sources, we also have Data Providers (which follow the same rules) for: HTML sections, Menus, Local Storage (aka Static Collections), and Dynamic Storage (aka Dynamic Collections).

For more information and references, access our Data Providers sample code on GitHub.

Comments

  • Anonymous
    November 25, 2015
    I have proposed one pull request on GitHub, but you didn't accepted it. It is OK, but can you give more details on how I can edit the app by myself in VS... I want to edit some things about Youtube datasource, but don't know how to do that. Can you tell me how to edit those Data Providers for Youtube and include those changes into my app???

  • Anonymous
    November 30, 2015
    Can I use SQL Server with this app builder?

    • Anonymous
      March 22, 2016
      You can use SQL Server but with json services :-)

  • Anonymous
    November 30, 2015
    Hi Brady, You can extend the apps in Visual Studio and then use SQL Server. To extend the apps in VS you can download the source code and open it in VS and then make code level changes to the app. Thanks.

  • Anonymous
    December 23, 2015
    Great news !! I like all but I;m making the App visual studio online and is the way very easy to make app windows 10 Universal and i would  the button search  in the visual studio online please i let my picture sorry my english is poor fdzeta.com/.../MisXF.png

    • Anonymous
      March 22, 2016
      You can use Template 10 by JerryNixon and DarenMay, there is so many function to implement :-)

  • Anonymous
    January 28, 2016
    Hi from germay, my question: How can I get a Menu-Section in den Nav-Pan. It just doesn´t Show up there although it Shows "Show the section in nav pan"...