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:

• TreeView from official Microsoft Samples
• GridSplitter and WrapPanel from UWP Community Toolkit

Have fun and let me know what you think.