DImageButton Size problems

Im trying to get something like this


But this is what i’m getting


This is my code:

local DermaPanel = vgui.Create( “DFrame” ) – Creates the frame itself
DermaPanel:SetPos( 50,50 ) – Position on the players screen
DermaPanel:SetSize( 800, 600 ) – Size of the frame
DermaPanel:SetTitle( “Testing Derma Stuff” ) – Title of the frame
DermaPanel:SetVisible( true )
DermaPanel:SetDraggable( true ) – Draggable by mouse?
DermaPanel:ShowCloseButton( true ) – Show the close button?
DermaPanel:MakePopup() – Show the frame

local PropertySheet = vgui.Create( “DPropertySheet” )
PropertySheet:SetParent( DermaPanel )
PropertySheet:SetPos( 10, 30 )
PropertySheet:SetSize( 780, 560 )

SheetItemOne = vgui.Create(“DImageButton” )
SheetItemOne:SetMaterial( “trails/plasma.vmt” )
SheetItemOne:SetPos( 100, 30 )
SheetItemOne:SetSize( 10,10)
SheetItemOne.DoClick = function()
Msg("You clicked the button!

local SheetItemTwo = vgui.Create(“DImageButton” )
SheetItemTwo:SetMaterial( “trails/plasma.vmt” )
SheetItemTwo:SetPos( 100, 30 )
SheetItemTwo:SetSize( 10,10)
SheetItemTwo.DoClick = function()
Msg("You clicked the button!

SheetItemTwo.PaintOver = function()


PropertySheet:AddSheet( “Some Menu”, SheetItemOne, “gui/silkicons/user”, false, false, “WOW It’s a text box!!!” )
PropertySheet:AddSheet( “Super Menu”, SheetItemTwo, “gui/silkicons/group”, false, false, “Can I haz meh cheezburger now?” )

I think the element you’re looking for is DModelPanel.

Ok, here’s your problem. When you use ‘AddSheet’ to a DPropertySheet, the ‘sheet’ that you’re adding is stretched to fit the size of the DPropertySheet. To solve this problem, you need to create an overarching DPanel that serves as the base for your tab, and then parent things to that panel. You then add the DPanel to the PropertySheet.

I don’t quite understand that.
(I’m sorry i’m still a beginner :ohdear:)

A good example

Ok. Here’s how it goes.

You have a DPropertySheet. A DPropertySheet contains individual tabs, like the ones you see. Consider each “tab” as a separate panel.

Now, to create a tab we use DPropertySheet:AddSheet( args ), right? Every time you “AddSheet” you make a new tab.

So, to add a new sheet you give a “Panel” argument to the function. You tell it what kind of derma element you want to stick in the tab.

The tabs work such that whatever derma element you place in there will be stretched to fit the size of the tab, its “parent” per se. So if you add a DImageButton to a new tab, then the ImageButton will be stretched to the size of the tab, resulting in a gross distortion of the original image.

So, to remedy this issue what you do is instead of adding a DImageButton to the DPropertySheet, add a DPanel! For example,

[lua]SheetOne = vgui.Create(“DPanel”)
S1Button = vgui.Create(“DImageButton”,SheetOne)
S1Button:SetPos( 5, 10 )
S1Button:SetSize( 50, 50 )
S1Button:SetMaterial( “console/backgrond01” )
PropertySheet:AddSheet( “Background Viewer”, SheetOne, “gui/silkicons/user”, false, false, “Tooltip” )[/lua]

You make the DPanel which serves as the “tab”, and then you parent individual derma elements to the DPanel.

Does that make any sense?

Yes, Thanks you.
Got it working now