Converting a LOB W8.1 app to W10 – Part 3

Time for more work on getting our LOB app converted to an UWP.

First thing we needed to do in order to get everything to work again was adding the various build configurations again. When migrating the projects, these were lost. (I had to add them anyways to the new PCL’s, which were created from scratch).

Automapper
There seems to be a problem with automapper after upgrading. I suddenly get a StackOverflowException… Typically, this is thrown if there’s a circular reference within the mapping. But this was working before the upgrade…
I’ve tried a few things, such as different versions of automapper. With V4.0.4, the latest, it didn’t work. I then reverted to the version we were using before the upgrade (3.3.0), no dice.

Got a suggestion from the BartMan to try 3.3.1, and this seems to work just fine.

EDIT: The day after writing this post, A new version of automapper became available (4.1.0). I’ve tried this version and it fixed this problem 🙂

XAML!
At last, time to fix all the xaml!
At the first glance, on our main hub, we can immediately see that many things have changed. Some margins are different, a gridview that is suddenly stacking horizontally instead of wrapping, and much more…

Time to go through our app one page at a time and fix it 🙂
I’m writing down some of the more generic issues here.

GridView
It seems like the default orientation of the GridView element was changed from vertical to horizontal.
This can easily be fixed by changing its ItemsPanel. Luckily we already use a base style for this element throughout our application, so all I had to do was change this style.

<Style x:Key="GridViewBaseStyle" TargetType="GridView">
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <ItemsWrapGrid Orientation="Vertical" />
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
</Style>

Another thing with the GridView: its items suddenly have a default Margin of 0.

On another page where we use a GridView, the impact was bigger.
We have a GridView that uses grouping, but for some reason the items were stacked vertically and weren’t wrapping.

It took a few tries and a lot of cursing to get the original behaviour again.
We wanted something like this:
Grouped gridview
In essence, you need to set the outer ItemsPanel to an horizontally orientated ItemsWrapGrid (or equivalent), the GroupStyle.Panel to a vertically orientated one.

After setting this, we have the intended view. However, we can’t scroll horizontally…
Setting the GridView’s ScrollViewer to:

ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.HorizontalScrollMode="Enabled"

gave us the ability to scroll with the scrollbar again. BUT, not with the scrollwheel…
Apparently, one needs to disable the vertical scrollbar to do that now…
So, our GridView looks like this: (I’ve omitted the item templating and itemsource properties)

<GridView ScrollViewer.HorizontalScrollBarVisibility="Auto"
          ScrollViewer.HorizontalScrollMode="Enabled"
          ScrollViewer.VerticalScrollMode="Disabled">
  <GridView.ItemsPanel>
    <ItemsPanelTemplate>
      <ItemsWrapGrid />
    </ItemsPanelTemplate>
  </GridView.ItemsPanel>
  <GridView.GroupStyle>
    <GroupStyle>
      <GroupStyle.HeaderTemplate>
        <DataTemplate>
          [..]
        </DataTemplate>
      </GroupStyle.HeaderTemplate>
      <GroupStyle.Panel>
        <ItemsPanelTemplate>
          <ItemsWrapGrid Orientation="Vertical" />
        </ItemsPanelTemplate>
      </GroupStyle.Panel>
    </GroupStyle>
  </GridView.GroupStyle>
</GridView>

Appbars and navigation bars
The Navigation bar (or the TopAppBar), when present, is now (by default) visible in its compact form:
navbar

We decided not to change this for our application. But, because this bar is 25px high; we had to adjust our header to its new position.

Semantic zoom
Ctrl+scrolling doesn’t work anymore. Setting the SemanticZoom’s ScrollViewer.ZoomMode to enabled does the trick 🙂
I used the following generic style in our base styles file so it’s applied to all screens

<Style TargetType="SemanticZoom">
  <Setter Property="ScrollViewer.ZoomMode" Value="Enabled" />
</Style>

I’m gonna wrap this post up with this, I’ll come back when I stumble on other things that have (drastically) changed from W8.1.

Please follow and like us:

LEAVE A COMMENT