Image enhancements

[ichan-mb]

• Lazy-load on Image component and ImageFill. Introduce the AutoLoad bool property to control when we fetch the image data. The default value is true which means it automatically load the image data and display it whenever it rooted. Set it to false to make it lazy-load and using the new LoadImage trigger action to actually load the image. You can also change the value to true to load the image

• Added LoadImage trigger action to load image data for Image or ImageFill

• Added TargetSize property on HttpImageSource and FileImageSource to resize the image resolution before display. Works on iOS and Android only

Example:

<App>
    <ClientPanel Background="#eee">     
        <ScrollView AllowedScrollDirections="Vertical" LayoutMode="PreserveVisual">
            <StackPanel Padding="10">
                <Panel Height="50">
                    <Text Value="Eager Load" Font="Bold" Alignment="VerticalCenter" />
                </Panel>
                <Image Height="200">
                    <HttpImageSource Url="https://freepngimg.com/download/bridge/31948-5-bridge-hd.png"
                        TargetSize="400,200" />
                </Image>
                <Rectangle StrokeColor="Black" StrokeWidth="1" CornerRadius="20" Height="200">
                    <ImageFill
                        Url="https://randomwordgenerator.com/img/picture-generator/54e7d04a4855a914f1dc8460962e33791c3ad6e04e507440722d72d5914bc6_640.jpg" />
                </Rectangle>
                <Panel Height="50">
                    <Text Value="Lazy Load" Font="Bold" Alignment="VerticalCenter" />
                </Panel>
                <Image ux:Name="img" Url="https://picsum.photos/600/300" AutoLoad="false" Height="200" />
                <Button Text="Load Image">
                    <Clicked>
                        <LoadImage Image="img" />
                    </Clicked>
                </Button>
                <Rectangle StrokeColor="Black" StrokeWidth="1" CornerRadius="20" Height="200">
                    <ImageFill ux:Name="img2"
                        Url="https://randomwordgenerator.com/img/picture-generator/55e3d1444b52ae14f1dc8460962e33791c3ad6e04e5074417c2f7dd59e4cc6_640.jpg"
                        AutoLoad="false" />
                </Rectangle>
                <Button Text="Load Image">
                    <Clicked>
                        <LoadImage ImageFill="img2" />
                    </Clicked>
                </Button>
            </StackPanel>
        </ScrollView>
    </ClientPanel>
</App>

This PR contains:

• [x] Changelog
• [x] Documentation
• [ ] Tests

[ichan-mb]

but, still have to fix the tests on the CI

[mortend]

P.S. Please also squash commits into one for the final version. :)

[mortend]

Maybe you've noticed already, but tests are failing on AppVeyor due to failing to load images. https://ci.appveyor.com/project/fusetools/fuselibs-public/builds/38382999#L896

         Exception was thrown: FuseTest.DiagnosticException: InternalError: ImageSource error: 'Loading image from file failed. Could not find a part of the path 'C:\projects\fuselibs-public\Source\Fuse.Elements\Tests\build\dotnet\test\UX\Assets\200x100.png'.': Could not find a part of the path 'C:\projects\fuselibs-public\Source\Fuse.Elements\Tests\build\dotnet\test\UX\Assets\200x100.png'.
    In: Fuse.Resources.FileImageSourceImpl
    Fuse: C:\projects\fuselibs-public\Source\build\Fuse.Elements\2.0.0-beta.7\Resources\ImageSource.uno:111 ---> System.IO.DirectoryNotFoundException: Could not find a part of the path 'C:\projects\fuselibs-public\Source\Fuse.Elements\Tests\build\dotnet\test\UX\Assets\200x100.png'.
   at System.IO.__Error.WinIOError(Int32 errorCode, String maybeFullPath)
   at System.IO.FileStream.Init(String path, FileMode mode, FileAccess access, Int32 rights, Boolean useRights, FileShare share, Int32 bufferSize, FileOptions options, SECURITY_ATTRIBUTES secAttrs, String msgPath, Boolean bFromProxy, Boolean useLongPath, Boolean checkHost)
   at System.IO.FileStream..ctor(String path, FileMode mode, FileAccess access, FileShare share, Int32 bufferSize, FileOptions options, String msgPath, Boolean bFromProxy, Boolean useLongPath, Boolean checkHost)
   at System.IO.File.InternalReadAllBytes(String path, Boolean checkHost)
   at Fuse.Resources.ImageBackgroundLoad.RunTask() in C:\projects\fuselibs-public\Source\build\Fuse.Elements\2.0.0-beta.7\Resources\ImageBackgroundLoad.uno:line 53
   --- End of inner exception stack trace ---
   at FuseTest.TestBase.OnDiagnosticReported(Diagnostic d) in C:\projects\fuselibs-public\Source\Fuse.Common\Tests\FuseTest\TestBase.uno:line 94
   at FuseTest.TestBase.DispatchDiagnostic(Diagnostic d) in C:\projects\fuselibs-public\Source\Fuse.Common\Tests\FuseTest\TestBase.uno:line 85
   at Fuse.Diagnostics.Report(Diagnostic d) in C:\projects\fuselibs-public\Source\build\Fuse.Common\2.0.0-beta.7\Diagnostics.uno:line 180
   at Fuse.Diagnostics.UnknownException(String msg, Exception ex, Object obj, String filePath, Int32 lineNumber, String memberName) in C:\projects\fuselibs-public\Source\build\Fuse.Common\2.0.0-beta.7\Diagnostics.uno:line 301
   at Fuse.Resources.ImageSource.OnError(String msg, Exception e) in C:\projects\fuselibs-public\Source\build\Fuse.Elements\2.0.0-beta.7\Resources\ImageSource.uno:line 112
   at Fuse.Resources.FileImageSourceImpl.FailureCallback(Exception e) in C:\projects\fuselibs-public\Source\build\Fuse.Elements\2.0.0-beta.7\Resources\FileImageSource.uno:line 251
   at Fuse.Resources.ImageBackgroundLoad.UIFailCallback() in C:\projects\fuselibs-public\Source\build\Fuse.Elements\2.0.0-beta.7\Resources\ImageBackgroundLoad.uno:line 80
   at Fuse.UpdateListener.Invoke() in C:\projects\fuselibs-public\Source\build\Fuse.Common\2.0.0-beta.7\UpdateManager.uno:line 61
   at Fuse.UpdateManager.ProcessOnces(Stage stage, List`1& _exceptions) in C:\projects\fuselibs-public\Source\build\Fuse.Common\2.0.0-beta.7\UpdateManager.uno:line 369

[ichan-mb]

Yes, still working on it.

[mortend]

• [x] https://travis-ci.org/github/fuse-open/fuselibs/builds/765710383