Customise Scroll Bar in #uwp

Controls like ListView / GridView contain a ScrollViewer which hosts scrollable content. The ScrollViewer contains two ScrollBar controls one for each scroll type (horizontal and vertical).

Getting to a control’s template can be painful.. why not just head to
Default control styles and templates and download the templates you need

If you want to do it the hard way..
You can get to control’s ScrollViewer by right clicking on it and click Edit Template > Edit a Copy
Screenshot (39)

Looking at the template you can see the ScrollViewer but there’s little you can do right now.

<ControlTemplate TargetType="ListView">
    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
        <ScrollViewer x:Name="ScrollViewer" AutomationProperties.AccessibilityView="Raw" BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}" IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" TabNavigation="{TemplateBinding TabNavigation}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
            <ItemsPresenter FooterTransitions="{TemplateBinding FooterTransitions}" FooterTemplate="{TemplateBinding FooterTemplate}" Footer="{TemplateBinding Footer}" HeaderTemplate="{TemplateBinding HeaderTemplate}" Header="{TemplateBinding Header}" HeaderTransitions="{TemplateBinding HeaderTransitions}" Padding="{TemplateBinding Padding}"/>
        </ScrollViewer>
    </Border>
</ControlTemplate>

You need to go and Edit the template for ScrollViewer next.
You can right click on the ListView, tap Esc key which then moves focus on ScrollViewer. Click control’s Border and right click > Edit Template > Edit a copy

<ControlTemplate TargetType="ScrollViewer">
    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
        <Grid Background="{TemplateBinding Background}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <ScrollContentPresenter x:Name="ScrollContentPresenter" Grid.ColumnSpan="2" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{TemplateBinding Padding}" Grid.RowSpan="2"/>
            <ScrollBar x:Name="VerticalScrollBar" Grid.Column="1" HorizontalAlignment="Right" IsTabStop="False" Maximum="{TemplateBinding ScrollableHeight}" Orientation="Vertical" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{TemplateBinding VerticalOffset}" ViewportSize="{TemplateBinding ViewportHeight}"/>
            <ScrollBar x:Name="HorizontalScrollBar" IsTabStop="False" Maximum="{TemplateBinding ScrollableWidth}" Orientation="Horizontal" Grid.Row="1" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{TemplateBinding HorizontalOffset}" ViewportSize="{TemplateBinding ViewportWidth}"/>
            <Border x:Name="ScrollBarSeparator" Background="{ThemeResource SystemControlPageBackgroundChromeLowBrush}" Grid.Column="1" Grid.Row="1"/>
        </Grid>
    </Border>
</ControlTemplate>

In one instance I needed the ScrollBar to not render over the content. You can see that the ScrollViewer ScrollViewerPresenter has both ColSpan and RowSpan set. Just get rid of it so there is no overlay.
In Another instance I needed to customise it further. I needed Horizontal ScrollBar (to be of same height as the ListView) and I needed only the Left and Right buttons. So start by Setting ColSpan / RowSpan on ScrollBar as needed
Now lets get to ScrollBar template to customise it further.

<ControlTemplate x:Key="HorizontalIncrementTemplate" TargetType="RepeatButton">
    <Grid x:Name="Root">          
        <Grid x:Name="HorizontalRoot" IsHitTestVisible="False">
            <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Rectangle x:Name="HorizontalTrackRect"
                        Grid.ColumnSpan="5"
                        Margin="0"
                        StrokeThickness="{ThemeResource ScrollBarTrackBorderThemeThickness}"
                        Fill="{ThemeResource SystemControlPageBackgroundChromeLowBrush}"
                        Stroke="{ThemeResource SystemControlForegroundTransparentBrush}" />
            <RepeatButton x:Name="HorizontalSmallDecrease"
                        Grid.Column="0"
                        MinHeight="12"
                        IsTabStop="False"
                        Interval="50"
                        Margin="0"
                        Template="{StaticResource HorizontalDecrementTemplate}"
                        Width="12"
                        VerticalAlignment="Center" />
            <RepeatButton x:Name="HorizontalLargeDecrease"
                        Grid.Column="1"
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch"
                        IsTabStop="False"
                        Interval="50"
                        Template="{StaticResource RepeatButtonTemplate}"
                        Width="0" />
            <Thumb x:Name="HorizontalThumb"
                        Grid.Column="2"
                        Background="{ThemeResource SystemControlForegroundChromeHighBrush}"
                        Template="{StaticResource HorizontalThumbTemplate}"
                        Height="12"
                        MinWidth="12"
                        AutomationProperties.AccessibilityView="Raw" />
            <RepeatButton x:Name="HorizontalLargeIncrease"
                        Grid.Column="3"
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch"
                        IsTabStop="False"
                        Interval="50"
                        Template="{StaticResource RepeatButtonTemplate}" />
            <RepeatButton x:Name="HorizontalSmallIncrease"
                        Grid.Column="4"
                        MinHeight="12"
                        IsTabStop="False"
                        Interval="50"
                        Margin="0"
                        Template="{StaticResource HorizontalIncrementTemplate}"
                        Width="12"
                        VerticalAlignment="Center" />
        </Grid>
        <Grid x:Name="HorizontalPanningRoot" MinWidth="24">
            <Border x:Name="HorizontalPanningThumb"
                    VerticalAlignment="Bottom"
                    HorizontalAlignment="Left"
                    Background="{ThemeResource SystemControlForegroundChromeDisabledLowBrush}"
                    BorderThickness="0"
                    Height="2"
                    MinWidth="32"
                    Margin="0,2,0,2"/>
        </Grid>
        <Grid x:Name="VerticalRoot" IsHitTestVisible="False">
            <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Rectangle x:Name="VerticalTrackRect"
                        Grid.RowSpan="5"
                        Margin="0"
                        StrokeThickness="{ThemeResource ScrollBarTrackBorderThemeThickness}"
                        Fill="{ThemeResource SystemControlPageBackgroundChromeLowBrush}"
                        Stroke="{ThemeResource SystemControlForegroundTransparentBrush}" />
            <RepeatButton x:Name="VerticalSmallDecrease"
                        Height="12"
                        MinWidth="12"
                        IsTabStop="False"
                        Interval="50"
                        Margin="0"
                        Grid.Row="0"
                        Template="{StaticResource VerticalDecrementTemplate}"
                        HorizontalAlignment="Center" />
            <RepeatButton x:Name="VerticalLargeDecrease"
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch"
                        Height="0"
                        IsTabStop="False"
                        Interval="50"
                        Grid.Row="1"
                        Template="{StaticResource RepeatButtonTemplate}" />
            <Thumb x:Name="VerticalThumb"
                        Grid.Row="2"
                        Background="{ThemeResource SystemControlForegroundChromeHighBrush}"
                        Template="{StaticResource VerticalThumbTemplate}"
                        Width="12"
                        MinHeight="12"
                        AutomationProperties.AccessibilityView="Raw" />
            <RepeatButton x:Name="VerticalLargeIncrease"
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch"
                        IsTabStop="False"
                        Interval="50"
                        Grid.Row="3"
                        Template="{StaticResource RepeatButtonTemplate}" />
            <RepeatButton x:Name="VerticalSmallIncrease"
                        Height="12"
                        MinWidth="12"
                        IsTabStop="False"
                        Interval="50"
                        Margin="0"
                        Grid.Row="4"
                        Template="{StaticResource VerticalIncrementTemplate}"
                        HorizontalAlignment="Center" />
        </Grid>
        <Grid x:Name="VerticalPanningRoot" MinHeight="24">
            <Border x:Name="VerticalPanningThumb"
                    VerticalAlignment="Top"
                    HorizontalAlignment="Right"
                    Background="{ThemeResource SystemControlForegroundChromeDisabledLowBrush}"
                    BorderThickness="0"
                    Width="2"
                    MinHeight="32"
                    Margin="2,0,2,0"/>
        </Grid>
    </Grid>
</ControlTemplate>

In my case I only needed the two RepeatButton named HorizontalSmallDecrease and HorizontalSmallIncrease. Comment out the remaining controls (VerticalTrackRect, VerticalLargeDecrease, VerticalThumb, VerticalLargeIncrease)
For smoother scroll, modify RepeatButton’s Interval property, I set it to 5 rather than 50.

For further customisation I even created Attached Property that resizes the RepeatButton (the visibility is controlled by the ScrollBar so setting width while a hack works well.

public static class ScrollBarHelper
{
    static double InitialWidth = Double.MinValue;

    public static readonly DependencyProperty DCustomiseScrollBehaviourProperty =
    DependencyProperty.RegisterAttached("CustomiseScrollBehaviour", typeof(bool),
    typeof(ScrollBarHelper), new PropertyMetadata(false, OnCustomiseScrollBehaviourPropertyChanged));

    public static void SetCustomiseScrollBehaviour(DependencyObject d, bool value)
    {
        d.SetValue(DCustomiseScrollBehaviourProperty, value);
    }

    public static bool GetCustomiseScrollBehaviour(DependencyObject d)
    {
        return (bool)d.GetValue(DCustomiseScrollBehaviourProperty);
    }

    private static void OnCustomiseScrollBehaviourPropertyChanged(DependencyObject d,
        DependencyPropertyChangedEventArgs e)
    {
        if (!(bool)e.NewValue)
            return;

        var control = d as ScrollBar;
        if (control != null)
        {
            Observable.FromEventPattern<RoutedEventArgs>(control, "Loaded")
                .SubscribeOn(TaskPoolScheduler.Default)
                .ObserveOn(CoreDispatcherScheduler.Current)
                .Subscribe(args =>
                {
                    ProcessPosition(args.Sender);
                });

            Observable.FromEventPattern<ScrollEventArgs>(control, "Scroll")
                .Throttle(TimeSpan.FromMilliseconds(50))
                .SubscribeOn(TaskPoolScheduler.Default)
                .ObserveOn(CoreDispatcherScheduler.Current)
                .Subscribe(args =>
                {
                    ProcessPosition(args.Sender);
                });
        }
    }

    private static void ProcessPosition(object sender)
    {
        ScrollBar sb = (sender as ScrollBar);

        RepeatButton rbLeft = (RepeatButton)sb.FindDescendantByName("HorizontalSmallDecrease");
        RepeatButton rbRight = (RepeatButton)sb.FindDescendantByName("HorizontalSmallIncrease");

        if (rbLeft == null || rbRight == null)
            return;

        double pos = sb.Value;

        if (pos == 0 && InitialWidth == Double.MinValue)
        {
            InitialWidth = rbLeft.Width;
        }

        if (Math.Abs(pos - sb.Minimum) <= 15)
        {
            // hide the left scroll button
            rbLeft.Width = 0;
        }
        else if (Math.Abs(pos - sb.Maximum) <= 15)
        {
            // hide right scroll button
            rbRight.Width = 0;
        }
        else
        {
            rbLeft.Width = rbRight.Width = InitialWidth;
        }
    }
}

You could directly attached to ScrollBar’s Loaded / Scroll events but I used Reactive Extensions to throttle scroll changes as I wanted scroll experience to not degrade. The result.. not perfect but close to what I needed

GeoFence and #WinRT API

For some reason I find myself doing some Windows Phone 8.1 development in Silverlight.. I know its a dead end and all the rest but I am working on a small app and Silverlight API was more mature at least for Windows Phone 8.1. One of the things I was adding was GeoFencing. GeoFencing was introduced to Windows Phone 8.1 WinRT API and some of it was exposed to Silverlight API (whoever made the decision on what APIs were available in WinRT and what in Silverlight needs to be shot.. at least made to feel real pain.

The way you set it up is you create GeoFence instances and add them.. System managed associated with your app. The app can access it from foreground or background.. nice right ? The constructor for GeoFence states that it requires IGeoshape along with an identifier at the very least.. IGeoshape is an enum which has possible values of Point, Circle, BoundingBox and Path. The constructor for GeoFence explicitly states now and again that the IGeoshape has to be a valid GeoCircle.. I know documentation can be wrong.. I mean why would you go through the hassle of create an Interface and passing it again if you enforce explicit type ?

I was wrong.. I tried it both the Silverlight and through WinRT API.. nope documentation is correct.. the API though designed well has shite implementation😐 So what next ?

Well DIY. Here is my implementation.. Create a Rect instance with NorthWest X1, Y1 and SouthEast and X2 Y2 and monitor the change in geo position. Check if the new point is within Rect or not.. easy peasy.. well it works too.. Here is my implementation.

 

public class GeoMonitoringService
{
    Geolocator _locator = null;
    Dictionary<GeoSite, Rect> _locationRectangles = null;

    DataService _dataService = null;

    public event RoutedPropertyChangedEventHandler<GeomonitorStateChangedEventArgs> GeomonitorStateChanged;
    public bool lastState = false;

    public void Initialise(DataService dataService)
    {
        _locator = new Geolocator();
        _locator.DesiredAccuracy = PositionAccuracy.High;
        _locator.MovementThreshold = 1;
        _locator.ReportInterval = Convert.ToUInt32(TimeSpan.FromSeconds(5).TotalMilliseconds);

        this._locationRectangles = new Dictionary<GeoSite, Rect>();

        this._dataService = dataService;

        if (this._dataService?.SiteDictionary?.Count > 0)
        {
            foreach (var site in this._dataService.SiteDictionary.Values)
            {
                Rect r = new Rect(new Point(site.Latitude1, site.Longitude1), new Point(site.Latitude2, site.Longitude2));
                this._locationRectangles.Add(site, r);
            }
        }

        _locator.PositionChanged += GPSPositionChanged;
    }

    private void GPSPositionChanged(Geolocator sender, PositionChangedEventArgs args)
    {
        var geoPoint = args.Position.Coordinate.Point;
        Point p = new Point(geoPoint.Position.Latitude, geoPoint.Position.Longitude);

        KeyValuePair<GeoSite, Rect>? matchKVP = null;
        foreach (var entry in this._locationRectangles)
        {
            if (entry.Value.Contains(p))
            {
                matchKVP = entry;
                break;
            }
        }

        if (matchKVP.HasValue)
        {
            if (!lastState)
            {
                lastState = true;
                this.GeomonitorStateChanged?.Invoke(this, new RoutedPropertyChangedEventArgs<GeomonitorStateChangedEventArgs>(null, new GeomonitorStateChangedEventArgs(true, matchKVP.Value.Key)));
            }
        }
        else
        {
            if (lastState)
            {
                lastState = false;
                this.GeomonitorStateChanged?.Invoke(this, new RoutedPropertyChangedEventArgs<GeomonitorStateChangedEventArgs>(null, new GeomonitorStateChangedEventArgs(false, null)));
            }
        }
    }
}

What to do when your Surface devices don’t sleep

Starting Windows 8 Microsoft introduced a sleep state called Connected Standby (CS). Think of this sleep as your smartphone when its screen is off, the device is still running, connected to the mobile networks, capable of receiving notifications and wakeup calls etc.

In early days this feature was supported only on WOA… you know it as Windows RT.. yes something many wouldn’t care to remember.. Windows x86 / x64 SKU officially support CS starting with Haswell processor. Haswell introduced a sleep state S0. This keeps part of the device sufficiently awake to receive notifications etc while in low power state.

It never truly worked for me. I had one of the first engineering models from Intel delivered in June 2013 and the device refused to wake up properly. I tried just about everything and while things have gotten better, for people like myself, battery life is more important than notification (which I already get on my phones). A few times SP4 in CS has had around 50 – 90% drain in few hours ( 2 – 4).

The solution is easy – unless CS is something you rather than instead of longer battery life, you should force system to hibernate rather than go into connected standby.

Switching to hibernate:

  • press Start Menu and type power options
  • open Power Options from Control Panel.
  • tweak Choose what power buttons do option – enable hibernation and set desired settings
  • tweak Change when the computer sleeps – I prefer a short sleep
  • next click Change advanced power settings
  • Navigate to Sleep > Hibernate After > Ensure duration is correct.
  • Click  Ok and close all power options.

Screenshorts

Screenshot (26)

Screenshot (27)

Screenshot (28)

Screenshot (29)

Windows Universal or Universal Windows – Part 2 #uwp #wpdev

Great minds think alike… its unlikely that you read the Part 1 its a bit TL;DR; to be frank.

Assuming you have a Windows Universal project or are starting there and are also interested in targeting Windows 10. Here is me creating a blank Windows 8.1 Universal project using Blank template.

WindowsUniversal1WindowsUniversal2

This is what Windows Universal Project looks like… You have the Windows head (that’s what they called it), the Windows Phone head and the Shared head.

Whatever is in the shared head is copied to Windows & WindowsPhone head as the first step of compiling the project. Its a neater version of sharing a file by adding a file reference (Add existing file > Add link).

All shared stuff goes in Shared head. Anything specific to either head goes in Windows or WindowsPhone heads. Shared head usually includes all the Models, ViewModels, Services, Helpers, Behaviours and whatever stuff you don’t what to put in PCL (not everyone uses PCLs)

Lets add Windows 10 project to the solution

Screenshot (22) WindowsUniversal3

We need a few minor adjustments before Windows 10 project becomes a part of Windows Universal and thinks the same way. Lets delete the App.xaml and App.xaml.cs to start with.

Next right click unload Windows head and then right click and choose Edit

Scroll all the way down until you see something like this

WindowsUniversal4

Copy this line.

Now unload and edit the Windows 10 project. Scroll to the bottom to the exact same spot and paste the line without any changes.

Save and close. Reload both Windows head and Windows 10 project and that’s it. The Windows 10 universal project is now a part of Windows Universal project. The circle is complete.

All items in shared head are now a part of Windows 10 head and all you need to do is add Windows 10 head specific bits like you have for Windows 8.1 and Windows Phone 8.1

You build for store like you build before.

You have appx / appxbundle for

Windows (x86 / x64 / ARM)

WindowsPhone (ARM)

Windows 10 (x86 / x64 / ARM) compiled to Native

 

Windows Universal or Universal Windows – Part 1 #uwp #wpdev

Did I just say Windows Universal ? Sure that came and went with Windows 8.1.. If I am still talking about it… I mostly likely do not have anything useful to add. I am going to any ways.. Haters are gonna hate.

If you are contemplating a brand new Windows 10 app targeting Windows 10 device families like Windows.Desktop / Windows.Mobile etc you most likely have a Windows 8.1 or Windows Phone 8.1 app or both (or Windows Universal). If you don’t then you like many have been attracted by the idea of massive growth in Windows 10 install base since launch in August.

Yes Windows 10 will make it and your app will finally have a big big market however that day isn’t today. Windows Phone 8.1 still constitutes 90% of Windows on Mobile devices. Windows 10 on desktops is same as Windows 8.1 out there today. Yes a big chunk of them will eventually convert – maybe but they still haven’t.

App usage is important and growth is important and for that reason if nothing else you shouldn’t leave existing Windows 8.1 (phone included) out of this equation. Let me give you a personal example.

We (me working along with my employer) released our official app on Windows 10 Mobile to coincide with launch of Lumia 950 and Lumia 950XL on the 2nd of December. We started getting installs and reviews from around the world. I had left out Windows Phone 8.1 version because of a bug I couldn’t put my hand on. After a few days of messing around, we released Windows Phone 8.1 app on 15th December (17:00 hours). By end of day of 17th Windows Phone 8.1 accounted for 62.2% of the users and exceeded 70% on 18th.

Less than 3 days and 70% user base – don’t make them wait. Serve one serve them all.

Our app available on Windows Phone 8.1 and Windows 10 devices and can be downloaded Windows Store

All said and done I am hoping to follow my own advice about Window 8.1 users soon.

 

Windows Platform New App Versioning style #wpdev #uwp

Windows Store unification started a few days before the release of Windows 10. On 29th, I pushed an update out while waiting for Windows 10 upgrade – I had reserved by copy of Windows 10. While waiting, I continued with updates and having lost all patience, forced an update on the 30th.

I continued development using newly install VS 2015 and wanted to make an install I suddenly got this error “The version attribute of the Identity element must have a higher version number than ‘2015.729.2036.5893’

WTF ?? I tweeted angrily asking @VisualStudio what the heck was being added to StoreAssociation file..

Later that day, I reset my device and went back to VS 2013..nope it wouldn’t have any of it.. would still give me the same error as VS 2015. Who knows what the heck was happening.. I had little time and I haven’t heard from anyone so I continued with whatever it suggested.

On 1st August I encountered yet another problem with store.. this time.. “MakeAppx failed to open the package”. This time I asked on of the Microsofties to pull a few strings. They fixed that issue (AnyCPU was being read as ARM and ARM package wasn’t found so it failed) and in the thank you note, I mentioned that store was forcing timestamp based version. Non of those on the list commented so I assumed it was a cockup on my app since SL based 1Shot has no such issues.

store version error

Fast forward yesterday. I pushed 1.1.0.1 on a new beta on a newly created store account. Today I wanted to update it and it fails with a similar message. I find support pages and chat with one of the support people. What am I told.. yes Timestamp based versioning is the new way in unified store. Sorry it wasn’t communicated and don’t know why it doesn’t hit SL apps but its all fine.

So it any of you lot develop with WinRT (many do I presume, you will face this issue soon).. just don’t format your machine like I did🙂

Why can’t they just inform the developers ?? they find enough time to write boat loads of blogs about various things..

Coding4Fun Toolkit 2.1.1 released #wpdev #uwp

Coding4Fun toolkit 2.1.1 is now available for download.

Changes include

  • WinRT version of David Anson’s PlaceImage control
  • ToastPrompt control for Windows 8.1
  • Added SL 8 binaries though no new functionality is added

SL lib was added purely to just provide backward compat and to stop nuget manager from updating to latest version and removing support for it. Annoyed myself a few times already!

Happy coding

Edit: @Scottisafool the creator of SuperImage pointed out that it was built on top of PlaceImage and for that reason I have removed PlaceImage for now.