Lessons learned from Building a Visual Studio Shell with UWP

Note: There’s a MS Dev Show Episode where @ytechie, @carlschweitzer and I are talking about UWP and the Visual Studio Shell built as part of this post. You find it here on www.msdevshow.com

UWP is the technology to build native applications for the Windows Platform. But there’s still some stuff missing that is required by a typical line-of-business application for the classic desktop: TreeView, DataGrid, Validation, SqlClient and more. Some parts like a DataGrid are available as 3rd-party controls. Other parts like the TreeView are already in development, as you can see in the Windows Dev Platform Backlog. That backlog shows that Microsoft is working on a TreeView, which is awesome! And I’m pretty sure, at some point in the future we’ll also get a DataGrid. This was the case for WPF and also for Silverlight. But let’s see, the future will tell us and for today we’ve great 3rd-party DataGrids.

But what else is required to build a classic desktop application?

To answer this question, we need to know what a classic desktop application actually is.

I think all developers agree that Visual Studio is a classic desktop application. Look at it, it has a menu, a toolbar, some panes on the left and on the right and a main-area:

Haha, did you notice that I played games with you? Sorry! :) The screenshot above is already the UWP-version of the Visual Studio Shell I’ve built. I tried to hack down the Visual Studio Shell with UWP yesterday and today in 8 hours – yeah, I know, I’m pretty awesome! ;-) No, seriously, I’ve written the code in that timeframe to see how far I can get within 8 hours. I haven’t had more time, you know, the kids are not asking at 6am when I went to bed. :) At the end of this post you’ll learn about the only pattern I’ve used for the code. But now, back to topic:

As I love the dark theme of Visual Studio, I wanted to make a dark Visual Studio Shell. And seriously, while I was building that UWP-version, I was sometimes not sure myself if I’m in the UWP-app or in the real and only Visual Studio. The UWP-app has of course no functionality to compile code etc., but it has several features:

  • A main menu with icons (Note: Icons are coming with Creators Update)
  • A toolbar (Just a horizontal WrapPanel)
  • A pinnable Solution Explorer (was easy for someone who knows the Grid-panel)
  • A treeView in the Solution Explorer (uses the offical UWP treeView sample)
  • Panes to show like Navigation, Toolbox or Live Visual Tree
  • Tab Control (which is a styled Pivot)
  • And more…

Below you see for example the Live Visual Tree Explorer that displays in this application the real visual tree of the application itself:

Below you see the File-menu. I haven’t included all menu-items of Visual Studio, just a few. And except from the “exit”-menu they’ve no functionality in this app:

While I was building the app, I was fascinated how far I got. That’s really positive. But anyway, I noticed several things that are missing in UWP for building such an app. Let’s look at these things:

No classic Menu

UWP has no classic Menu-control. It has just the hamburger-navigation-style kind of menu, but that doesn’t work for big apps like Visual Studio. Or could you imagine navigating in Visual Studio with a hamburger? :-) As there’s no Menu-control, I coded the main menu of my app with Buttons and MenuFlyouts and custom MenuFlyoutImageItems to support icons (Note that icons are coming with the Creators-Update). The File-menu is defined like this:

<Button Content="File">
  <Button.Flyout>
    <MenuFlyout>
      <MenuFlyoutSubItem Text="New">
        <controls:MenuFlyoutImageItem Text="Project" Icon="Images/Menu/NewProject.png"/>
        <controls:MenuFlyoutImageItem Text="Website" Icon="Images/Menu/NewWebsite.png"/>
      </MenuFlyoutSubItem>
      <MenuFlyoutSeparator/>
      <controls:MenuFlyoutImageItem Text="Close Solution" Icon="Images/Menu/CloseSolution.png"/>
      <MenuFlyoutSeparator/>
      <controls:MenuFlyoutImageItem Text="Save" Icon="Images/Menu/Save.png"/>
      <controls:MenuFlyoutImageItem Text="Save All" Icon="Images/Menu/SaveAll.png"/>
      <MenuFlyoutSeparator/>
      <controls:MenuFlyoutImageItem Click="Exit_Click" 
        Text="Exit" Icon="Images/Menu/CloseSolution.png"/>
    </MenuFlyout>
  </Button.Flyout>
</Button>

This works, but it lacks some features of a classic Menu:

  • you can’t use the ALT-key with a letter to open up a menu
  • When a main menuitem is open, you can’t just hover over another main menuitem to open it
  • keyboard navigation is not working as good as with a classic menu (Arrow keys etc.)
  • keyboard shortcuts are not automatically displayed on the right

Now go and vote for a classic Menu on Uservoice, then continue reading.

No Toolbar

UWP doesn’t have a toolbar control. It has a CommandBar, but that one doesn’t do the classic left-to-right stacking of a classic toolbar. So, I’ve just used a horizontal WrapPanel (from the UWP Community Toolkit) and styled the Buttons and ComboBoxes a bit. But when you think about features like an overflow-panel, you have to do that on your own. It would be great if we get a classic toolbar with the platform. Beside a toolbar, a ribbon could also be a great way to navigate in an app. Neither the toolbar nor the ribbon exist in UWP.

Sorry, one more time you can vote here on Uservoice for a toolbar and here for a ribbon.

TreeView is coming, but…

As I’ve mentioned above, Microsoft is working on a TreeView. For this sample application, I’ve used the TreeView from the official UWP treeView sample, and I’ve adjusted it a bit. The TreeView is quite good, but there was one thing that I really missed: The HierachicalDataTemplate. There’s no HierarchicalDataTemplate in UWP. I hope there’ll be one when the official TreeView is released, as it makes working with hierarchical data a pleasure.

Now go and vote for the HierarchicalDataTemplate for UWP on UserVoice.

No TabControl

What, where’s your lovely TabControl from WPF? UWP doesn’t have one. You can use the Pivot-element that is available in UWP, or you could use a 3rd-party control. For my little app, I’ve used the Pivot-element. It took a bit of work to make it look like a TabControl, and now it’s ok. But I still don’t have buttons to close tab items in the tab headers, I don’t open up new tabs etc. I think a TabControl should be part of UWP. So, guess what I want you to do now?

Yeah, you’re right: Go to uservoice and vote for a TabControl.

No Layout Transform

UWP supports only render transformations. They occur after the layout process. WPF has beside render tranformations the so called layout transformations. They occur before the layout process. That means your element is still positioned by the layout panel it is inside, even if you rotate it. Of course you can manage everything with a render transform, but for the by-90°-rotated buttons on the left and right side of my Visual Studio Shell, a layout transformation would have been simpler than this render transformation:

<Grid Width="{Binding ElementName=sidebarLeft,Path=ActualHeight}">
  <StackPanel x:Name="sidebarLeft" Orientation="Horizontal" VerticalAlignment="Top">
    <StackPanel.RenderTransform>
      <CompositeTransform Rotation="90"
        TranslateX="{Binding ElementName=sidebarLeft,Path=ActualHeight}"/>
    </StackPanel.RenderTransform>
    <Button Content="Toolbox" x:Name="btnToolbox"
      Click="SidebarButton_Click" Style="{StaticResource SideBarButtonLeft}"/>
    <Button Content="Live Visual Tree" x:Name="btnLiveVisualTree"
      Click="SidebarButton_Click" Style="{StaticResource SideBarButtonLeft}"/>
  </StackPanel>
</Grid>

So, as you might guess already, you can vote for Layout Transformation in UWP on Uservoice.

No SqlClient

Ok, I didn’t want to build this into my Visual Studio Shell. But when you think that you build something like Visual Studio with UWP, you need a SqlClient, or how do you want to build the Server Explorer to browse a database? How do you support Entity Framework Code First Migrations within the tool etc.?

The world is still full of classic client-server applications that access the database directly. Many enterprises are building these kind of applications for some hundred users. They don’t create a separate Web API. Wouldn’t it be great if you could use Entity Framework Core in your UWP-app to load data directly from your SQL Server database?

If you need a SqlClient to access your database directly and not via a Web API, vote for it on UserVoice.

Summary

Overall, while building this little Visual Studio Shell, I was impressed how much is already possible with UWP to build a classic desktop app. Most of my enterprise customers are still on Windows 7, so I guess it takes a few years until they make the switch. But I’m sure, then UWP will be a fantastic platform to build line-of-business desktop applications. And at some point UWP might become a successor to WPF for desktop applications.

But today I think WPF is still the best option for building line-of-business desktop applications, as it has all the stuff mentioned in this post that is missing in UWP. And as WPF is XAML and C#, a future migration to UWP might be pretty straight forward – as far as “pretty-straight-forward” migrations can be. :)

Gimme the Code

Note that I’ve written the code in 8 hours. I just wanted to try how far I can get within that timeframe. I haven’t polished it and I’ve only used one pattern: The pragmatic pattern. It means, just be pragmatic and hack it down. :)

You can grab the full code of the Visual Studio Shell built with UWP from this Github repository:
https://github.com/thomasclaudiushuber/Uwp-Visual-Studio-Shell

3rd-party stuff used in this little project:

Have fun and let me know what you think.

Share this post

Comments (7)

  • Noemata Reply

    If the UWPCommunityToolkit had been steered in the right direction, most of your UWP issues would already be resolved. In the good old days, there was the WpfToolkit, which was much more aligned with real world requirements. UWPCommunityToolkit could be the way to get UWP over its LOB hump, but not until it gets folks like yourself on board (hint).

    UWP is so close, yet so far when it comes to LOB. We need to speed things along a bit else a lot of LOB grapes will die on the UWP vine.

    Lastly, I would also add FlowDocument to your list of major missing requirements. I really miss it and am baffled that Microsoft does not support it’s native XPS format with UWP. Had we gotten a XAML render tree version of PDF, that might have been a cool alternative, but UWP’s PDF API just gives us bitmaps.

    February 24, 2017 at 4:11 pm
    • Thomas Claudius Huber Reply

      Hi Noemeta, thanks for your great comment. Yes, the WpfToolkit was indeed fantastic, I liked it as well.

      I don’t think the UWPCommunityToolkit goes in a wrong direction, as there are not just Line-of-Business-apps. :) But yes, it’s true that it is not focusing on LOB-apps. But I think it’s ok.

      Most enterprises I’m working for are still using Windows 7, and not Windows 10. So, UWP is not a technology they could use to build their LOB-apps. For them the best approach is to use WPF, as it makes migration to UWP with XAML and C# smooth.

      Windows 7 support runs till January 2020. With that timeframe on my mind, I think within the next 3 years we’ll see that UWP will get more and more powerful and it will be ready for LOB-apps within that timeframe. Microsoft bets on UWP: Several parts in Windows itself like the lookscreen or for example the Microsoft Edge browser are built as UWP-app.

      February 26, 2017 at 8:24 pm
  • Matthias B Reply

    Hello Thomas,
    thank you for your presentation at Basta in Frankfurt. I am impressed of your VisualStudio-UWP Port. It was a nice idea and presentation what is possible with UWP. Personally i am struggling with that technology a little bit because everything seems so “big” to me, because it is (like Windows 8 Store apps) optimized for different screens and touch.
    I will give it a try in a personal play-project, when i install Win10 :)
    Have a nice week

    March 6, 2017 at 5:05 pm
    • Thomas Claudius Huber Reply

      Hi Matthias,

      thanks for your feedback. Great to hear you liked the presentation at BASTA! in Frankfurt.

      Yes, UWP is made for keyboard, mouse and touch. The latter is the reason why several things like a TreeView are bigger than in classic desktop applications. But this is just styling. You can style the TreeView and everything else in such a way that it doesn’t look too big for a desktop app. :)

      A personal play-project is always a good start to get familiar with a technology. :) And UWP is great, I really like it. I’m sure it will get much more powerful within the next years. Have fun and have a nice week, too!

      Thanks,
      Thomas

      March 6, 2017 at 5:46 pm
  • Building a Classic Tabbed and Databound Desktop Application with UWP and MVVM – Thomas Claudius Huber Reply

    […] spiking (=prototyping) the Visual Studio Shell I wanted to go deeper into building a tabbed user interface with UWP, of course databound with […]

    March 10, 2017 at 2:29 pm
  • William Reply

    When you state that WPF is still more suitable for projects such as this, that should be patently obvious. UWP was never intended for this this sort of thing, and I don’t want it to become bastardized so that it is.

    Tell me, what am I going to with tab controls and menu bars on the Xbox One? What about tablets and phones? if you can’t answer these questions, you’re wrong to suggest they be added. UWP is for multi device apps. WPF is for desktop applications.

    To be clear, the problem isn’t that you did this fun project. It’s that you’re encouraging others to see UWP for something it’s not.

    May 30, 2017 at 1:49 am
    • Thomas Claudius Huber Reply

      Hi William,

      great comment, thanks. Of course you might not need a TabControl and menu bars on Xbox, tablets and phones. But does that mean that I am wrong? Why shouldn’t UWP be used for the desktop? It is already used there, like for example with Microsoft Edge and other parts of Windows 10. Also Windows Centennial brings desktop apps to UWP, so why shouldn’t UWP natively support these kind of apps? I think in the long term, UWP will be “the” technology to develop any kind of application for Windows 10. Today and in the years to come, WPF is the best choice for classic desktop apps running on Windows. Visual Studio itself is also built with WPF. But maybe one day Visual Studio will be built with UWP. :) Let’s see, everything could be possible. And if there are some controls that are great for desktop, you don’t have to use them at all if Xbox or tablets/phones are your main focus.

      Also take a look at this interesting article from Daniel Rubino: https://www.windowscentral.com/microsoft-repositioning-uwp-desktop

      May 30, 2017 at 8:09 am

Leave a Reply

Your email address will not be published. Required fields are marked *

*