RadioButton / CheckBox size

[AlanDa]

I wonder if there's a way to change the actual size of a checkbox/radio button. Using setHeight and setWidth isn't changing the size of the checkbox itself.

[uelkfr]

A quick hint, maybe this will help:

CEGUI::WindowManager::getSingleton().getWindow( "root/FrameWindow/MyCheckbox" )->setProperty("UnifiedWidth", UDim(0,10));
CEGUI::WindowManager::getSingleton().getWindow( "root/FrameWindow/MyCheckbox" )->setProperty("UnifiedHeight", UDim(0,10));

But I can't imagine the situation why you would need to change CheckBox size other than the initial value defined in your .layout

CEGUI::WindowManager::getSingleton().getWindow( "root/FrameWindow/MyCheckbox" )->setSize(UVector2(cegui_absdim(10), cegui_absdim(10)));

Show you code, show CEGUI.log, show you main event loop, etc.

[Kulik]

If you mean the actual rectangular piece of the checkbox that makes it a checkbox, then you can only change that via altering LookNFeel. You could theoretically make a property that would react and change it's size though.

[AlanDa]

Could someone give me a hint what I'd need to change in LookNFeel?
I had a look and played a bit around with it but I wasn't able to change the actual size.

[Ident]

AlanDa i only some days ago wanted to do exactly the same thing. I am soon going to finish adjusting the looknfeel of Vanilla and hopefully i will be able to submit a patch for the svn branch, featuring size-adjustable Editbox and Radiobutton widgets, also uising with the adjusted imageset i have submitted as patch to the svn some days ago (it is in the svn if you wanna check it out). I haven't finished the looknfeel it yet but I am sure the progress i have made so far might be sufficient for you to finish whatever you wanna do for yourself.

Here comes the code, read my notes thereafter:

<WidgetLook name="Vanilla/RadioButton">
<PropertyDefinition name="NormalTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" />
<PropertyDefinition name="HoverTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" />
<PropertyDefinition name="PushedTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" />
<PropertyDefinition name="DisabledTextColour" initialValue="FF7F7F7F" redrawOnWrite="true" />
<ImagerySection name="label">
<TextComponent>
<Area>
<Dim type="LeftEdge" >
<ImageDim imageset="Vanilla-Images" image="RadioButtonNormal" dimension="Width">
<DimOperator op="Add">
<AbsoluteDim value="3" />
</DimOperator>
</ImageDim>
</Dim>
<Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
<Dim type="RightEdge" ><UnifiedDim scale="0" type="Width" /></Dim>
<Dim type="Height" ><UnifiedDim scale="1" type="Height" /></Dim>
</Area>
<VertFormat type="CentreAligned" />
<HorzFormat type="LeftAligned" />
</TextComponent>
</ImagerySection>
<ImagerySection name="normal">
<ImageryComponent>
<Area>
<Dim type="LeftEdge" ><AbsoluteDim value="0" /></Dim>
<Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
<Dim type="Width" >
<ImageDim imageset="Vanilla-Images" image="RadioButtonNormal" dimension="Width" >
<DimOperator op="Multiply">
<AbsoluteDim value="0.7" />
</DimOperator>
</ImageDim>
</Dim>
<Dim type="Height" >
<ImageDim imageset="Vanilla-Images" image="RadioButtonNormal" dimension="Height" >
<DimOperator op="Multiply">
<AbsoluteDim value="0.7" />
</DimOperator>
</ImageDim>
</Dim>
</Area>
<Image imageset="Vanilla-Images" image="RadioButtonNormal" />
<VertFormat type="Stretched" />
<HorzFormat type="Stretched" />
</ImageryComponent>
</ImagerySection>
<ImagerySection name="hover">
<ImageryComponent>
<Area>
<Dim type="LeftEdge" ><AbsoluteDim value="0" /></Dim>
<Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
<Dim type="Width" ><UnifiedDim scale="1" type="Width" /></Dim>
<Dim type="Height" ><UnifiedDim scale="1" type="Height" /></Dim>
</Area>
<Image imageset="Vanilla-Images" image="RadioButtonHover" />
<VertFormat type="CentreAligned" />
<HorzFormat type="LeftAligned" />
</ImageryComponent>
</ImagerySection>
<ImagerySection name="select_mark">
<ImageryComponent>
<Area>
<Dim type="LeftEdge" ><AbsoluteDim value="0" /></Dim>
<Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
<Dim type="Width" ><UnifiedDim scale="1" type="Width" /></Dim>
<Dim type="Height" ><UnifiedDim scale="1" type="Height" /></Dim>
</Area>
<Image imageset="Vanilla-Images" image="RadioButtonMark" />
<VertFormat type="CentreAligned" />
<HorzFormat type="LeftAligned" />
</ImageryComponent>
</ImagerySection>
<StateImagery name="Normal">
<Layer>
<Section section="normal" />
<Section section="label">
<ColourProperty name="NormalTextColour" />
</Section>
</Layer>
</StateImagery>
<StateImagery name="Hover">
<Layer>
<Section section="hover" />
<Section section="label">
<ColourProperty name="HoverTextColour" />
</Section>
</Layer>
</StateImagery>
<StateImagery name="Disabled">
<Layer>
<Section section="normal">
<Colours topLeft="FF7F7F7F" topRight="FF7F7F7F" bottomLeft="FF7F7F7F" bottomRight="FF7F7F7F" />
</Section>
<Section section="label">
<ColourProperty name="DisabledTextColour" />
</Section>
</Layer>
</StateImagery>
<StateImagery name="SelectedNormal">
<Layer>
<Section section="normal" />
<Section section="select_mark" />
<Section section="label">
<ColourProperty name="NormalTextColour" />
</Section>
</Layer>
</StateImagery>
<StateImagery name="SelectedHover">
<Layer>
<Section section="hover" />
<Section section="select_mark" />
<Section section="label">
<ColourProperty name="HoverTextColour" />
</Section>
</Layer>
</StateImagery>
<StateImagery name="SelectedDisabled">
<Layer>
<Section section="normal">
<Colours topLeft="FF7F7F7F" topRight="FF7F7F7F" bottomLeft="FF7F7F7F" bottomRight="FF7F7F7F" />
</Section>
<Section section="select_mark">
<Colours topLeft="FF7F7F7F" topRight="FF7F7F7F" bottomLeft="FF7F7F7F" bottomRight="FF7F7F7F" />
</Section>
<Section section="label">
<ColourProperty name="DisabledTextColour" />
</Section>
</Layer>
</StateImagery>
</WidgetLook>

The important section is <ImagerySection name="normal">, the size adjusted style only applies for the normal imagery, not hover or clicked, when you are done with the adjustments for "normal" you can just paste them over to the other states.
As you see I got a fixed dimension here, it is multiplied with the image dimensions. Thus 1.0 should give you the normal look, 100% size, 0.5 half, etc. What you want to have is a property, i want that, too. For this you need to replace <AbsoluteDim value="0.7" /> with a value you define yourself.

http://cegui.org.uk/api_reference/fal_e ... ref_sec_28
You need PropertyDim i think. It should replace the AbsoluteDim. At the beginning oft your widget yo ushould define a PropertyDefiniton and have for example CheckBoxWidth with an initialvalue of 0.5.
Next you use that in the PropertyDim. Now you can change the property via xml in the layout or you can do setProperty("yourproperty","yourvaluelike1.0") in your program-code. I haven't come so far to use PropertyDim. First try out my solution as posted and check if it works for you and resizes it with the absolute value. Next you define the propertydim as described and make it replace your absdim. Your propertydim needs no type and no widget defined, those are optional, we want an absolute float value so we just need to define name, which is the name of your property.


Finally on a sidenote - the posted code does NOT vertically center the radiobutton/editbox. To do this you need to add make the TopEdge be defined with half the height of the window. You know how to do this I guess. Next you add a DimOperator and offset it half the size of the image. Then it is perfectly centered. Or should be.


Did this help you?