[georgek]

Hi all,

I'm starting out learning to skin and I'm working on one that's simple with fairly large text suitable for the eyesight of someone my age without a huge TV. I've picked Quartz to start from (thanks Pecinko) and I'm fairly happy with how things are going, but ...

I can't get straight in my mind when the various different ways of positioning a control should work - and I have gone round the wiki many times and searched the forum. I'm currently struggling with a dialog which I want to centre on the screen.

I'm fine with the background using:

PHP Code:

<centerleft>50%</centerleft>
<centertop>50%</centertop> 


but the grouplist containing the buttons is causing me problems. I've tried:

PHP Code:

<centerleft>50%</centerleft>
<centertop>50%</centertop> 


but this puts the buttons top left of the screen.

PHP Code:

<align>center</align>
<aligny>center</aligny> 


puts the buttons on the left but does centre vertically.

PHP Code:

<posx>675</posx>
<posy>354</posy> 


puts the buttons where I expect.

I really want to avoid having to use explicit pixel positions as I know I will be playing with sizes and positions as I progress but this seems like the only option that works horizontally. Hopefully I've just failed to find some information somewhere. All pointers and advice gratefully received.

Thanks,
George.

[Alex...]

It's a bug as far as I know. Maybe they will solve the problem when they figure out what should the centring depend on (see jmarshall's post here).

Use the left and right tags temporarily and eventually use a comment to mark their place in your code, so it will be easier to replace when the centring will work as it should.

[georgek]

I'll take the pain and move on then.

I don't think it's the same problem as I have also done the sums and put the simple numbers into <centerleft> and <centertop> with no difference. For anyone else coming across this, I have checked default.xml for anything that might be involved but found nothing that looks relevant to me.

Thanks Alex.

[Alex...]

I tried with numbers as you said and indeed, the problem is still there.

May I ask what exactly you want to centre? I know you said something about a dialog, but are you talking about the buttons inside the dialog (the ok, cancel, yes and no kind of buttons)? There is a workaround to centre those buttons without using a grouplist.

[jmarshall]

I think you need to be a little more explicit about exactly what you're trying to do. What are you setting the <centerleft> etc. tags on? Buttons inside a grouplist (that may not work) or the grouplist itself (that will work)?

[georgek]

OK. What I want to have is dialogs popping up in the centre of the screen as needed. The dialog is a frame with a vertical column of buttons (3 shown below) within it - everything centred. The background image I had no trouble with (but I do like being able to use 50% instead of working out half the screen width). The text in the buttons is centred in the button in default.xml and has never missed. I've been having trouble with centering the buttons within the background frame (or screen as the end result is the same).

I'm expecting to have to change my current default button width and I would prefer not to have to redo the sums for each change. I suspect I will have to deal with numbers of buttons but I haven't got round to investigating that yet. I've not noticed anything so far to suggest that it's possible for a grouplist to know how many items it includes and then do some sums to set the height but I'm happy to be enlightened

What I have currently, that gives me what I want on-screen is:

PHP Code:

<controls>
        <control type="group" description="Side menu 9000 group">
            <visible allowhiddenfocus="true">ControlGroup(9000).HasFocus()</visible>
            <control type="image" description="Dialog back">
                    <centerleft>50%</centerleft>
                    <centertop>50%</centertop>
                    <width>894</width>
                    <aspectratio>stretch</aspectratio>
                    <texture border="152">img/Dialog.png</texture>
                <height>744</height>
            </control>
            <control type="grouplist" id="9000">
                <posx>765</posx>
                <align>center</align>
                <aligny>center</aligny>
                <onleft>50</onleft>
                <onright>50</onright>
                <onup>9000</onup>
                <ondown>9000</ondown>
                <scrolltime>200</scrolltime>
                <orientation>vertical</orientation>
                <control type="button" id="701" description="Video">
                    <label>3</label>
                    <onclick>Close</onclick>
                    <onclick>ActivateWindow(Videos,files,return)</onclick>
                </control>
                <control type="button" id="702" description="Music">
                    <label>$LOCALIZE[2]</label>
                    <onclick>Close</onclick>
                    <onclick>ActivateWindow(MusicFiles,root)</onclick>
                </control>
                <control type="button" id="703" description="Addons">
                    <label>$LOCALIZE[24001]</label>
                    <onclick>Close</onclick>
                    <onclick>ActivateWindow(AddonBrowser,root)</onclick>
                </control>
            </control>
        </control>
    </controls> 


The only parameter in all of this related to horizontal position that I haven't been able to centre is the <posx> for the grouplist and as I tried to explain in my original post, nothing I tried would work.

Interestingly enough, between asking my question and reaching the state shown in this post I found that without the <align>center, bizarrely enough the dialog buttons are centered horizontally OK, but are at the top of the screen rather than being centred vertically as I expected <aligny> to do.

[Hitcher]

It can't align itself 50% centrally because it down't have a height value.

Set the height to the max you want for X amount of buttons and then align centrally by 50%.

[georgek]

Not sure I've understood you Hitcher.

I added a height to the grouplist but that doesn't seem to have made any difference (although I haven't re-tested all the various combinations I've tried).

[Hitcher]

Add the height and try this -

PHP Code:

    <controls>
        <control type="group" description="Side menu 9000 group">
            <visible allowhiddenfocus="true">ControlGroup(9000).HasFocus()</visible>
            <control type="image" description="Dialog back">
                <centerleft>50%</centerleft>
                <centertop>50%</centertop>
                <width>894</width>
                <aspectratio>stretch</aspectratio>
                <texture border="152">img/Dialog.png</texture>
                <height>744</height>
            </control>
            <control type="grouplist" id="9000">
                <posx>765</posx>
                <centertop>50%</centertop>
                <height>nnn</height>
                <align>center</align>
                <onleft>50</onleft>
                <onright>50</onright>
                <onup>9000</onup>
                <ondown>9000</ondown>
                <scrolltime>200</scrolltime>
                <orientation>vertical</orientation>
                <control type="button" id="701" description="Video">
                    <label>3</label>
                    <onclick>Close</onclick>
                    <onclick>ActivateWindow(Videos,files,return)</onclick>
                </control>
                <control type="button" id="702" description="Music">
                    <label>$LOCALIZE[2]</label>
                    <onclick>Close</onclick>
                    <onclick>ActivateWindow(MusicFiles,root)</onclick>
                </control>
                <control type="button" id="703" description="Addons">
                    <label>$LOCALIZE[24001]</label>
                    <onclick>Close</onclick>
                    <onclick>ActivateWindow(AddonBrowser,root)</onclick>
                </control>
            </control>
        </control>
    </controls> 


You just use <align>...</align> in the grouplist to align it's contents whether it's vertical or horizontal.

[georgek]

Thanks for spending time on me Hitcher. Doing as you suggest displays how I want but ...

The <height>makes no difference unless it is too small which (naturally enough) crops the buttons.

If I change <posx> to <centerleft>50% the buttons still go to the left of the screen

So, I'm still forced to define where the left edge of the buttons go rather than the centre as I want to. This looks like a bug (or limitation I haven't found any documentation for) but everything else I'm playing with takes me a few goes to get working so I'm all too aware of my noob-ness.

[Hitcher]

You'll probably need to add left, right, width and height to the buttons to override what's in the Defaults.xml.

[jmarshall]

You have to specify the <width> of the grouplist. Otherwise it'll take it from the parent container, which will thus get it taking up the full width (still centered, but as it's full width you can't tell).

[georgek]

That's done it. Thanks.

I'm getting the behaviour I want now but there's one thing left that's still baffling me. Having added the <width> if I also remove the <align> then the buttons move up to the top of the screen. I understand <align> to affect horizontal position, not vertical so I don't see why. I've tried it with and without <height> applying the same logic as for <width> but what I see happen just doesn't make sense to me ...

It's not breaking anything now, I just like to understand things.

[Hitcher]

You just use <align>...</align> in the grouplist to align it's contents whether it's vertical or horizontal.

Basically <align>left</align> will align the controls to the left for horizontal layouts and top for vertical layouts; <align>center</align> will align the controls to the center for horizontal layouts and vertical layouts; and finally <align>right</align> will align the controls to the right for horizontal layouts and bottom for vertical layouts.

[georgek]

Aah. Clunk. Thanks.