UI Tabs/canvas enabling on demand

SITCore
1

Can i have multiple canvass

private static UIElement Elements()
{
var canvas = new Canvas();
…controls…
}

and enable the canvas I need or is there a better way to do this.

2

This is how I handle swapping screens - My UI has a persistent top bar and side bar, so it’s easier to have 50 canvases to swap in for screen content rather than create new windows. Basically, I have a master canvas, add my top bar and side bar, then add my ‘Content’ canvas as a child. To swap the screen I just do this:

 Application.Current.Dispatcher.Invoke(TimeSpan.FromMilliseconds(1), _ =>
            {
                //clear children list, rebuild 
                //this is how they did it in the demo
                ScreenPanel.Children.Clear();
                ContentPanel = scr.Content;
                if (!string.IsNullOrEmpty(scr.TitleKey))
                {
                    Elements.TopBar.UpdateTitle(FetchString(scr.TitleKey));
                }

                
                ScreenPanel.Children.Add(topBar);
                ScreenPanel.Children.Add(ContentPanel);
                ScreenPanel.Invalidate();   
                return null; 
            }, null);

THis adds a lot of memory pressure but performance seems to be pretty good, but if someone knows a better way to do this I would be happy to learn.

2 Likes
3

Exactly the same way I approach it. A frame of UI elements like battery levels, network status, time, etc., and a nested frame that gets cleared and rebuilt. Main difference though is that I don’t tend to keep the child panels around in memory, but that’s just a memory vs speed tradeoff.

1 Like
4

Thank you, I used this method and it works good.

Do you have an example of putting an image on the canvas

5 
using GHIElectronics.TinyCLR.UI.Media.Imaging;
using GHIElectronics.TinyCLR.UI.Controls; 

///// IN your class somewhere
///

class TestUIClass
{
    static void DrawImage()
    {
        Canvas TestPanel = new Canvas();

        Image image = new Image()
        {
            Source = SomeResource, //You'll have to add the image in a resource file. 
            Height = SomeResource.Height,
            Width = SomeResource.Widht,
        };

        Canvas.SetLeft(image, x);
        Canvas.SetTop(image, y);

        TestPanel.Children.Add(image); 

    }
}

You’ll have to add the image as a resource - follow the instructions in the docs here:
https://docs.ghielectronics.com/software/tinyclr/tutorials/resources.html

6

I could not figure out how to point to the image.png in Resources
Would you give me the syntax

7

I don’t think you can add PNG into resource, try jpg or bitmap,

from @sgtyar95 , he means:

Source = BitmapImage.FromGraphics(Graphics.FromImage(Resources.GetBitmap(Resources.BitmapResources.your_resource)))

Or something like that

8

using Image = GHIElectronics.TinyCLR.UI.Controls.Image;

image
image1025×407 46.5 KB

Not sure if I am using the correct libraries

9 
using System;
using System.Drawing;
using GHIElectronics.TinyCLR.UI.Input;
using GHIElectronics.TinyCLR.UI.Media;
using GHIElectronics.TinyCLR.UI.Media.Imaging;
10

Check ghi-electronics/TinyCLR-Samples: Sample projects and demos for TinyCLR OS (github.com)

CarWashExample, we use this way many time in that project

TinyCLR-Samples/SelectServiceWindow.cs at master · ghi-electronics/TinyCLR-Samples (github.com)

2 Likes
11

The example does not work with the latest environment

image
image1038×472 54.1 KB

12

It doesn’t work because you copied a piece of code to your project only, and you didn’t add visa.jpg to resource yet.

BitmapImage: need using GHIElectronics.TinyCLR.UI.Media.Imaging. You just added so the error is gone.
GetBitmap and BitmapResource are available only after you add image.

13

Thanks, did not realize that adding images generates code in the resource files.
BTW only jpeg work

14

jpg, bmp and gif they should work.