More on #UWPCommunityToolkit CacheBase #uwpdev

In the first version of UWP Community Toolkit, we only had ImageCache which had its origin in Windows App Studio. A few issues were raised to optimise it and one mentioned extensible cache that can be used to create any case.

FileCache, ImageCache, VideoCache, JsonCache.. you name it.. Yesterday I mentioned CacheBase. FileCache and ImageCache that ship with UWP Community Toolkit are implementations of CacheBase by giving it a specific type.

Today I had to implement ability to pull configuration settings from our server. I tried using current prod version of FileCache but my implementation was somewhat wrong there. It would try to create File from Stream and return null and then fail internally (fixed in current dev branch) however I needed something today. Enter ConfigCache.. well JsonCache really

public class ConfigCache : CacheBase<ConfigurationSetting>
{
    JsonSerializer jsonSerializer = new JsonSerializer();

    /// <summary>
    /// Private singleton field.
    /// </summary>
    private static ConfigCache _instance;

    /// <summary>
    /// Gets public singleton property.
    /// </summary>
    public static ConfigCache Instance => _instance ?? (_instance = new ConfigCache() { MaintainContext = false });

    protected override async Task<ConfigurationSetting> InitializeTypeAsync(StorageFile baseFile)
    {
        using (var stream = await baseFile.OpenStreamForReadAsync())
        {
            return InitializeTypeAsync(stream);
        }
    }

    protected override Task<ConfigurationSetting> InitializeTypeAsync(IRandomAccessStream stream)
    {
        var config = InitializeTypeAsync(stream.AsStream());
        return Task.FromResult<ConfigurationSetting>(config);
    }

    private ConfigurationSetting InitializeTypeAsync(Stream stream)
    {
        var reader = new StreamReader(stream);

        using (var jsonReader = new JsonTextReader(reader))
        {
            return jsonSerializer.Deserialize<ConfigurationSetting>(jsonReader);
        }
    }
}

In this case I am using a specific type to deserialise json to. How do I use it ?

ConfigCache.Instance.CacheDuration = TimeSpan.FromDays(1);

this.ConfigurationSettings = await ConfigCache.Instance.GetFromCacheAsync(new Uri(urlPath));

This would ensure that if configuration is older than a day, it will be downloaded again. Either way the caller will get deserialised data.

Advertisements

Customise Scroll Bar in #uwp

Update (20th April 2017):

Sample app with horizontal scrollbar customisation can be found at https://github.com/hermitdave/ScrollBarCustomisation

 

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