Embedding container into canvas

Michael_Bzdega · April 27, 2015, 4:38pm

Hi,

i followed Paul’s ContainerControl-Video onYoutube, but did not get it working in my testapp.

I have a window with a container (which contains 2 other containers). I want to embed 1 of the embedded containers in a canvas to implement some vertical scrolling. How do i have to implement this to get it working?

Window(Container(Container1<- this one should be in a canvas, Container2))

Michael

Michel_Bujardet · April 27, 2015, 6:23pm

[quote=183084:@Michael Bzdega]Hi,

i followed Paul’s ContainerControl-Video onYoutube, but did not get it working in my testapp.

I have a window with a container (which contains 2 other containers). I want to embed 1 of the embedded containers in a canvas to implement some vertical scrolling. How do i have to implement this to get it working?

Window(Container(Container1<- this one should be in a canvas, Container2))
[/quote]

If you want any control to become child of a container control so it scrolls with it, just drag it over it, until you see a red border around the canvas. Then drop the control there.

Michael_Bzdega · April 27, 2015, 6:35pm

Hi Michel,

my controls are already inside my container. What i want to achieve is the following:

My app should use 1 single Window with a PagePanel inside.
On each page i want to place a container, which embeds 2 other containers (a detail-view and a listview)
The 2 containers are already filled with the needed controls.
Because a container cannot have scrollbars (i think so), i have to place a canvas in the detail-view container and add some vertical scrollbar and some scrolling code, right?
Why i embed these 2 containers inside another container? Because the outer container has the methods, events and so on i normally would place in a window. And because there are multiple pages on this PagePanel and only one Window, i don’t know where to place the methods for each page of the PagePanel.

I know, hard to understand, but even harder to describe.

Michael

Michael_Bzdega · April 27, 2015, 7:00pm

Maybe this screenshot makes it a little easier to understand.

Michael_Bzdega · April 27, 2015, 7:49pm

So what i want to learn is how to scroll a container.

Michel_Bujardet · April 27, 2015, 8:03pm

You can scroll a container content by changing the Top property of each control inside.

But as difficult is is to understand, you can scroll a container by making it child of a canvas, and scroll that canvas. You can also put all the controls within a container over a canvas, and scroll that canvas. The canvas is another sort of container, that scrolls all the children.

May I suggest you try the first example at
http://documentation.xojo.com/index.php/canvas

Which shows how to scroll a canvas.

Michael_Bzdega · April 28, 2015, 4:37pm

Sorry guys. In the last 3 days i studied all the examples and hints in the web to scroll a canvas or a container with embedded controls but didn’t get it.

Can someone please post the easiest example how to scroll a container vertical with controls on it when the window.height is to small to display all the controls?

Simple a possible (1 Window, 1 container with a few simple controls like textfields).

That would be very kind.

Why there is no scrollbar available in xojo for the container? This is what i love xojo for, that you don’t have to invent all from scratch. But this ContainerControl doesn’t like me…

Michael

Michel_Bujardet · April 28, 2015, 5:16pm

[quote=183272:@Michael Bzdega]Sorry guys. In the last 3 days i studied all the examples and hints in the web to scroll a canvas or a container with embedded controls but didn’t get it.

Can someone please post the easiest example how to scroll a container vertical with controls on it when the window.height is to small to display all the controls?

Simple a possible (1 Window, 1 container with a few simple controls like textfields).

That would be very kind.

Why there is no scrollbar available in xojo for the container? This is what i love xojo for, that you don’t have to invent all from scratch. But this ContainerControl doesn’t like me…

Michael[/quote]

Look at thee xample /Example Projects/Graphics and Multimedia/CanvasScrolling.xojo_binary_project

It will show you how to scroll a canvas. Try to place a button inside the canvas, until you see the red border around the canvas, and run the project. You will se the button scroll with the picture.

Michael_Bzdega · April 28, 2015, 6:47pm

Hi Michel,

i rebuild this example in a new test project to understand all steps.

Instead of an image (mImage in the example) i put some textfields into my canvas. The textfields scrolls nice on mouse wheel action, but it seems, that the scrollbar does not know the right value of the vertical space that is needed for the textfields. I can scroll until all textfields are scrolled out on top of the canvas. thats not good. if there is enough vertical space, there should be no scrolling.

How do i modify the code from the example in the VerticalScrollBar ValueChanged Event to scroll vertical only if there is not enough vertical space (e.g after resizing the window in height) to display all the textfields inside?

  // Calculate the delta that the scrollbar was
  // moved and scroll the image accordingly.
  
  Dim delta As Integer
  
  delta = mVerticalScrollBarLast - Me.Value
  
  delta = (delta/Me.Maximum) * mImage.Height
  
  mYScroll = mYScroll + delta
  
  canvas1.Scroll(0, delta)
  
  mVerticalScrollBarLast = Me.Value

mImage must be replaced by some value that represents the place needed by the textfields, correct?

Michael_Bzdega · April 28, 2015, 7:03pm

This is how it looks like when i scroll the canvas with the 3 textfield.

The canvas should only scroll, if the window is to small in height to display all controls.

Michel_Bujardet · April 28, 2015, 7:16pm

Put something like this at the beginning of the code :

If self.Height > 500 then return

That way the code will only execute if the window height is lower than 500 (for example).

Michael_Bzdega · April 28, 2015, 7:23pm

Ok, this prevents the canvas from scrolling.

But the scrollbar still moves on mouse wheel action. And i still can scroll the textfields out of the windows on top like you see in the 3. screenshot. In the code above, is it correct to use canvas.Height instead of mImage.Height?

Michael_Bzdega · April 28, 2015, 7:43pm

ok, managed to stop the scrollbar from moving when it should not.

Last problem is that i can scroll all controls out of the window top.

Michael_Bzdega · April 28, 2015, 8:32pm

I think it has something to do with the scrollbar.maximum. How do i calculate it so that the last control stays at the bottom of the window instead of going out of the window.top?

Michael_Bzdega · April 29, 2015, 6:53am

This is what i have so far.

I can scroll my canvas with 3 TextField controls on it. Check.
I can switch my vertical scrollbar on and off and resize the embedded control in width when no scrollbar is visible. Check.

I can scroll too far, so that the controls disappear on top of the window. I’d like to have normal scrollbar behavior, so that the last control stays at the bottom of the window.I think this has something to do with the scrollbar.maximum.

This is my code:

Canvas1 MouseWheel Event (350px is the vertical space i need to display my 3 Textfields):

  if WndMain.Height < 350 then
    VerticalScrollBar.Value = VerticalScrollBar.Value + deltaY
  end if

Canvas1 MouseWheel Event:

  if WndMain.Height < 350 then
    VerticalScrollBar.Value = VerticalScrollBar.Value + deltaY
    Return True
  end if

VerticalScrollBar MousWheel Event (same code as Canvas1 MouseWheel Event):

  if WndMain.Height < 350 then
    VerticalScrollBar.Value = VerticalScrollBar.Value + deltaY
    Return True
  end if

VerticalScrollBar ValueChanged Event:

  if self.Height > 350 then return
  
  Dim delta As Integer
  
  delta = mVerticalScrollBarLast - Me.Value
  delta = (delta/Me.Maximum) * Canvas1.Height
  
  mYScroll = mYScroll + delta
  
  Canvas1.Scroll(0, delta)
  
  mVerticalScrollBarLast = Me.Value

WndMain Open Event:

  if WndMain.Height > 350 then
    VerticalScrollBar.Visible = False
    if TextField1.Width = 245 then
      TextField1.Width = TextField1.Width + 15
      TextField2.Width = TextField2.Width + 15
      TextField3.Width = TextField3.Width + 15
      Canvas1.Refresh
    end if
  else
    VerticalScrollBar.Visible = True
    if TextField1.width = 260 then
      TextField1.Width = TextField1.Width - 15
      TextField2.Width = TextField2.Width - 15
      TextField3.Width = TextField3.Width - 15
      Canvas1.Refresh
    end if
  end if
  
  VerticalScrollBar.Maximum =  Canvas1.Height

WndMain Resized Event (same code as WndMain Open Event):

  if WndMain.Height > 350 then
    VerticalScrollBar.Visible = False
    if TextField1.Width = 245 then
      TextField1.Width = TextField1.Width + 15
      TextField2.Width = TextField2.Width + 15
      TextField3.Width = TextField3.Width + 15
      Canvas1.Refresh
    end if
  else
    VerticalScrollBar.Visible = True
    if TextField1.width = 260 then
      TextField1.Width = TextField1.Width - 15
      TextField2.Width = TextField2.Width - 15
      TextField3.Width = TextField3.Width - 15
      Canvas1.Refresh
    end if
  end if
  
  VerticalScrollBar.Maximum = Canvas1.Height

And i use 3 Integer Properties in this code:

mVerticalScrollBarLast
mXScroll
mYScroll

Thats it. There must be an error but i can’t see it.

Michael_Bzdega · April 29, 2015, 8:59am

I looked at the canvas-scrolling example in xojo again (/Example Projects/Graphics and Multimedia/CanvasScrolling.xojo_binary_project) and it show the same strange behavior. You can scroll the image in this example out of the window or canvas in both vertical and horizontal direction.

Michel_Bujardet · April 29, 2015, 9:32am

[quote=183392:@Michael Bzdega]Canvas1 MouseWheel Event (350px is the vertical space i need to display my 3 Textfields):

if WndMain.Height < 350 then
VerticalScrollBar.Value = VerticalScrollBar.Value + deltaY
end if
Canvas1 MouseWheel Event:

if WndMain.Height < 350 then
VerticalScrollBar.Value = VerticalScrollBar.Value + deltaY
Return True
end if
[/quote]

You limit the value this way :

[code]VerticalScrollBar ValueChanged Event:

Static scrolled as integer

if self.Height > 350 then return

Dim delta As Integer

delta = mVerticalScrollBarLast - Me.Value
delta = (delta/Me.Maximum) * Canvas1.Height

if scrolled < 200 and delta > 0 then
Canvas1.Scroll(0, delta)
scrolled = scrolled+delta
elseif scrolled > 0 and delta < 0 then
Canvas1.Scroll(0, delta)
scrolled = scrolled+delta
end if[/code]

There is no property that would tell you at which scroll position is your canvas. So you need to make one up, that is scrolled here. It starts at zero when declared, then each time you scroll, Scrolled gets updated. So then you check if it is not out of bound before applying it.

I just made this up and did not test, so the value of 200 is just an example. But that is the principle.

Michael_Bzdega · April 29, 2015, 9:50am

Thanks for your help, Michel.

I use your code now in the VerticalScrollBar ValueChanged Event, but now the Canvas does not scroll anymore.

  Static scrolled As Integer
  
  if self.Height > 350 then return
  
  Dim delta As Integer
  
  delta = mVerticalScrollBarLast - Me.Value
  delta = (delta/Me.Maximum) * Canvas1.Height
  
  if scrolled < 200 and delta > 0 then
    Canvas1.Scroll(0, delta)
    scrolled = scrolled + delta
  elseif scrolled > 0 and delta < 0 then
    Canvas1.Scroll(0, delta)
    scrolled = scrolled + delta
  end if

shao_sean · April 29, 2015, 10:14am

Xoxo really needs to add a scroll view type container…

Michael_Bzdega · April 29, 2015, 10:20am

+1000