View Single Post
09-16-14, 08:14 AM   #1
Kagura
A Fallenroot Satyr
Join Date: Nov 2008
Posts: 21
ScrollFrame behavior

I am working on my own UI and Framework and noticed that when I place frames in a scrollframe, the aligning (anchors) seem to be behaving very weird.

I attached the screenshots and the lua code for creating this panel you see on the picture. My problem is next and it really annoys the shit out of me :S

On screenshot one, you can see the close button is aligned one pixel higher than the close button (the SetPoint for both these buttons get generated from the offsets and it basically translates for both to :SetPoint('TOP', 10, 0)

On screenshot two you can see the close button is aligned one pixel lower.

On screenshot three, you can see they are correctly aligned.

So what's the difference between these screenshots? Well nothing code-wise. The only difference is that this 'window' is dragged to different positions on the screen.

If I anchor these buttons to anything but the scroll child, they work as expected.

So my question is : Is there anything I can do to fix this or is this some quirk with ScrollFrames I can not get around?






Lua Code:
  1. local addon, ns = ...
  2. local O3 = ns.O3
  3. local UI = O3.UI
  4.  
  5. UI.ScrollWindow = UI.Window:extend({
  6.     createContent = function (self)
  7.         self.content = UI.ScrollPanel:instance({
  8.             parentFrame = self.frame,
  9.             offset = {1, 1, 24, 24},
  10.             style = function (self)
  11.                 self.scrollFrame:outline({
  12.                     layer = 'BORDER',
  13.                     gradient = 'VERTICAL',
  14.                     color = {1, 1, 1, 0.03 },
  15.                     colorEnd = {1, 1, 1, 0.05 },
  16.                     offset = {-1, -1, -1, -1 },
  17.                 })
  18.                 self.scrollFrame:texture({
  19.                     layer = 'BACKGROUND',
  20.                     file = O3.Media:texture('Background'),
  21.                     tile = true,
  22.                     color = {0.5, 0.5, 0.5, 0.5},
  23.                     offset = {-1, -1, -1, -1},
  24.                 })
  25.             end,
  26.         })
  27.         self.contentFrame = self.content.scrollFrame.content.frame
  28.     end,
  29.     hook = function (self)
  30.         self.frame:SetScript('OnSizeChanged', function ()
  31.             self.content:update()
  32.         end)
  33.     end,
  34.     postCreate = function (self)
  35.         UI.Button:instance({
  36.             parentFrame = self.contentFrame,
  37.             width = 100,
  38.             height = 20,
  39.             text = 'Open',
  40.             offset = {0, nil, 10, nil}
  41.         })
  42.  
  43.         UI.Button:instance({
  44.             parentFrame = self.contentFrame,
  45.             width = 100,
  46.             height = 20,
  47.             text = 'Close',
  48.             offset = {101, nil, 10, nil}
  49.         })
  50.  
  51.         UI.GlyphButton:instance({
  52.             parentFrame = self.contentFrame,
  53.             width = 20,
  54.             height = 20,
  55.             text = '',
  56.             offset = {202, nil, 10, nil}
  57.         })
  58.     end,
  59. })
  60.  
  61. local testPanel = UI.ScrollWindow:instance({
  62.     --managed = true,
  63.     _weight = 99,
  64.     -- name = 'TestWindow',
  65.     offset = {100, nil, 100, nil},
  66.     parentFrame = UIParent,
  67. })
  68. testPanel:show()
  Reply With Quote