Replacement--Rectangle: TopLeftColor/BottomRightColor

General
1

Is there any way to replace this functionality of API 1 Rectangle control? Having a different color for TopLeft and BottomRight using the API2 DesktopRectangle?

Perhaps forget the simple DesktopRectangle control and use a Canvas instead. But that brings a certain level of complexity.

2

I threw together a quick Canvas-based rectangle replacement with custom borders (all 4) and custom background with user-defined border-width to get you started. Take a peek and see if it can’t help you arrive at your solution. :grinning:

CustomRectangle
CustomRectangle939Ă—572 37.8 KB

1 Like
3

Thanks Matthew. I think that will work.

1 Like
4

Anytime :slight_smile: Glad to help! Have a great rest of the week Robert.

5

I have found problems with the exact approach that Matthew suggested. His original code has the background extending out a little beyond the right and bottom.

211207_1635CornerExtend

g.PenSize = BorderWidth
//Background
g.DrawingColor = BackgroundColor
g.FillRectangle(0,0,g.Width,g.Height)

//Borders
g.DrawingColor = BorderTopColor
g.DrawLine(0,0,g.Width -(1+ BorderWidth),0)

g.DrawingColor = BorderLeft
g.DrawLine(0,0,0, (g.Height - (1 + BorderWidth)))

g.DrawingColor = BorderBottom
g.DrawLine(1,g.Height - (1 + BorderWidth),g.Width - (1 + BorderWidth),g.Height - (1 + BorderWidth))

g.DrawingColor = BorderRight
g.DrawLine(g.Width - (1 + BorderWidth),1,g.Width - (1 + BorderWidth),g.Height - (1 + BorderWidth))
  
  g.DrawingColor = BorderLeft
  g.FillRectangle(0, BorderWidth, BorderWidth, g.Height)
  
  g.DrawingColor = BorderBottom
  g.FillRectangle(BorderWidth, g.Height - BorderWidth, g.Width, g.Height - 1)
  
  g.DrawingColor = BorderRight
  g.FillRectangle(g.Width - BorderWidth, 0, g.Width - 1, g.Height - BorderWidth)
End

As an alternative, I have used FillRectangle as my basic tool to create the border. The corners are treated differently. There are various ways to treat the corners that can be obtained by tweaking the code.

If BorderWidth > 0 Then
  g.DrawingColor = BorderTopColor
  g.FillRectangle(0, 0, g.Width, BorderWidth)
  
  g.DrawingColor = BorderLeft
  g.FillRectangle(0, BorderWidth, BorderWidth, g.Height)
  
  g.DrawingColor = BorderBottom
  g.FillRectangle(BorderWidth, g.Height - BorderWidth, g.Width, g.Height - 1)
  
  g.DrawingColor = BorderRight
  g.FillRectangle(g.Width - BorderWidth, 0, g.Width - 1, g.Height - BorderWidth)
End
6

If you want the more blended corners that Matthew’s approach provides, I offer the slightly modified code:

If BorderWidth > 0 Then
  g.PenSize = BorderWidth
  //Background
  g.DrawingColor = BackgroundColor
  g.FillRectangle(0, 0, g.Width, g.Height)
  
  //Borders
  g.DrawingColor = BorderBottom
  g.DrawLine(0, g.Height - BorderWidth, g.Width - BorderWidth, g.Height - BorderWidth)
  
  g.DrawingColor = BorderRight
  g.DrawLine(g.Width - BorderWidth, 0, g.Width - BorderWidth, g.Height - BorderWidth)
  
  g.DrawingColor = BorderLeft
  g.DrawLine(0, 0, 0, g.Height - BorderWidth)
  
  g.DrawingColor = BorderTopColor
  g.DrawLine(0, 0, g.Width - BorderWidth, 0)
End If
1 Like
7

There is a bug for Windows platforms in Xojo, that I forgot to mention. The additional one pixel, compensates the issue for Windows, and is not needed for Linux, nor Mac. The additional pixel was by design :slight_smile: (for Windows platforms)

8

What bug is that? Do you happen to have a feedback ticket number for it?

9

I don’t recall the feedback number and cannot look at the moment, but test the code yourself. See updated code (at the same link)

Implemented as:

Var offset as integer

#if TargetWindows then
  offset = 1
#EndIf

g.PenSize = BorderWidth
//Background
g.DrawingColor = BackgroundColor
g.FillRectangle(0,0,g.Width,g.Height)

//Borders
g.DrawingColor = BorderTopColor
g.DrawLine(0,0,g.Width -(offset+ BorderWidth),0)

g.DrawingColor = BorderLeft
g.DrawLine(0,0,0, (g.Height - (offset + BorderWidth)))

g.DrawingColor = BorderBottom
g.DrawLine(1,g.Height - (offset + BorderWidth),g.Width - (offset + BorderWidth),g.Height - (offset + BorderWidth))

g.DrawingColor = BorderRight
g.DrawLine(g.Width - (offset + BorderWidth),1,g.Width - (offset + BorderWidth),g.Height - (offset + BorderWidth))
1 Like
10

I will look up the # later tomorrow morning.

11

If such bug was fixed in the past, maybe such offset is unnecessary today.

12

After hunting thru bug reports, I couldn’t find the original report - so have re-posted at:

66923 - Canvas Dimensions Require Offset

and set as a priority fix request.

13

I don’t see what you’re reporting, your offset code causes an issue where I see a gap at the bottom and the right in windows 10 under 2021r3.

image

14

Xojo is looking into the issue. The bug has been confirmed on numerous devices running Windows 10. Are you running Windows 10? What’s your scale mode? 100% always shows it. What’s your resolution…more info that can be put in the report, the better. This has been a long time bug…not just windows 10 :slight_smile:

15

Yes

16

Resolution and scale factor?

17

Tested on
3840x2160 @ 100%
1920x1080 @ 100%

1 Like
18

Thanks Julian. Any extra info you can provide I can add-on for Yu to investigate

19

Can you post a similar screengrab showing the issue with versions, display info etc?

1 Like
20

Will do as I get to the office but PiDog reported the same 1pixel offset issues in 2018 (that’s the report I was looking for that’s just vaporized into oblivion since - it just doesn’t exist or has been made private?) see change log for fixes with “1 pixel” in versions 1.15.1.0 at

https://www.pidog.com/piDogScrollingCanvas/piDogScrollingCanvasDocs/piDogDataView_Folder/piDogDataView/Note/Release%20Notes.html

He added 1-pixel offset to fix the canvas issue with scrollbars and for clipping. Screenshot to come shortly.