DialogContextMenu.xml - Understanding control positioning
#1
I've been having a heck of a time figuring out how to place the group list control where I want it in this file.  This is the first time I've come across a screen where the items are not being placed where I think they should and I'm sure there is something I'm just not understanding.  

Ideally I'd like to center it on the screen and thought to use CenterLeft 50% and CenterTop 50%
With the variable height I can understand CenterTop being a problem.
I see no reason why CenterLeft should not be working though.
This screen seems to be very similar to DialogButtonMenu.xml where I had no issues with the horizontal placement. 

When I set top and left both to 0 the top left corner was at about (455,520). Why?
When I used CenterLeft 50% the left edge was at about 825 instead of 735 ((1920-450) / 2).  Why?
I eventually gave up and approximated the top & left positions via trial and error to get it centered but I'd really like to understand what I'm missing here.

xml:

<?xml version="1.0" encoding="UTF-8"?>
<!-------------------------------------------------------------------------------------------------------------------------------->
<!--                                                                                                  -->
<!-------------------------------------------------------------------------------------------------------------------------------->
<window>
    <defaultcontrol always="true">996</defaultcontrol>
    <include>DialogOpenCloseAnimation</include>
    <controls>
        <!-- Positioning of this item is not working as I expect it to -->
        <!-- With left and top both set to 0 the top left corner starts at roughly (455, 520) -->
        <!-- Centerleft 50% puts the left edge at about 825 when it should be 735 -->
        <!-- Considering the horizontal issues I have not really tried the verticatal alignment due to the extra complication of the variable height -->
        <!-- I've set the position via trial and error / approximation based on 9 items in the list with a max of 11 -->
        <control type="grouplist" id="996">
            <top>-260</top>
            <left>540</left>
            <width>450</width>
            <height min="70" max="670">auto</height>
            <include condition="Window.IsActive(programs) + !String.IsEmpty(Window(Home).Property(Progams.Games))">AdvancedLauncherTrailerButton</include>

            <!-- Top Border -->
            <control type="image" id="1">
                <width>450</width>
                <height>5</height>
                <texture colordiffuse="labelheader">colors/white.png</texture>
            </control>

            <!-- Button Template -->
            <control type="button" id="1000">
                <width>450</width>
                <height>60</height>
                <font>font14</font>
                <textoffsetx>15</textoffsetx>
                <texturefocus border="12,0,12,0" colordiffuse="labelheader">list_item_focus.png</texturefocus>
                <texturenofocus border="12,0,12,0" colordiffuse="labelheader">list_item_nofocus.png</texturenofocus>
            </control>

            <!-- Bottom Border -->
            <control type="image" id="2">
                <width>450</width>
                <height>5</height>
                <texture colordiffuse="labelheader">colors/white.png</texture>
            </control>
        </control>

    </controls>
</window>
Reply
#2
it's not possible to define a fixed offset for this specific dialog.
kodi will automatically center the context menu on top of the container.

Image
Do not PM or e-mail Team-Kodi members directly asking for support.
Always read the Forum rules, Kodi online-manual, FAQ, Help and Search the forum before posting.
Reply
#3
Thank you!

That makes sense and now I'm seeing it, at least for the horizontal.  
The vertical however is still not making sense as the bottom edge is just a few pixels from the bottom of the screen.  I'm assuming I need to check the container sizes in MyVideoNav to see what might be causing that.
Reply
#4
I used slide animations to align mine vertically.

xml:
<?xml version="1.0" encoding="UTF-8"?>
<window>
    <!-- contextmenu -->
    <defaultcontrol always="true">996</defaultcontrol>
    <coordinates>
        <origin x="0" y="0"/>
    </coordinates>
    <controls>
        <!-- Background -->
        <include>DialogBackgroundImage</include>
        <!-- Dialog group -->
        <control type="group">
            <include>DialogAnimation</include>
            <centerleft>50%</centerleft>
            <top>540</top>
            <width>540</width>
            <height>912</height>
            <!-- Animations to keep menu centrally aligned -->
            <animation effect="slide" end="0,-38" time="0" condition="Control.IsVisible(1001)">Conditional</animation>
            <animation effect="slide" end="0,-38" time="0" condition="Control.IsVisible(1002)">Conditional</animation>
            <animation effect="slide" end="0,-38" time="0" condition="Control.IsVisible(1003)">Conditional</animation>
            <animation effect="slide" end="0,-38" time="0" condition="Control.IsVisible(1004)">Conditional</animation>
            <animation effect="slide" end="0,-38" time="0" condition="Control.IsVisible(1005)">Conditional</animation>
            <animation effect="slide" end="0,-38" time="0" condition="Control.IsVisible(1006)">Conditional</animation>
            <animation effect="slide" end="0,-38" time="0" condition="Control.IsVisible(1007)">Conditional</animation>
            <animation effect="slide" end="0,-38" time="0" condition="Control.IsVisible(1008)">Conditional</animation>
            <animation effect="slide" end="0,-38" time="0" condition="Control.IsVisible(1009)">Conditional</animation>
            <animation effect="slide" end="0,-38" time="0" condition="Control.IsVisible(1010)">Conditional</animation>
            <animation effect="slide" end="0,-38" time="0" condition="Control.IsVisible(1011)">Conditional</animation>
            <animation effect="slide" end="0,-38" time="0" condition="Control.IsVisible(1012)">Conditional</animation>
            <!-- Dialog background image -->
            <control type="image" id="999">
                <width>100%</width>
                <height>100%</height>
                <include>MessageBackground</include>
            </control>
            <!-- Grouplist template -->
            <control type="grouplist" id="996">
                <centerleft>50%</centerleft>
                <width>100%</width>
                <height max="912">auto</height>
                <itemgap>0</itemgap>
            </control>
            <!-- Button template -->
            <control type="button" id="1000">
                <left>-5</left>
                <bottom>0</bottom>
                <width>100%</width>
                <height>76</height>
                <align>center</align>
                <aligny>top</aligny>
                <font>MedUpper24</font>
                <textoffsety>27</textoffsety>
                <textwidth>460</textwidth>
            </control>
        </control>
    </controls>
</window>
Reply
#5
Those animations basically say: for every button present in the grouplist slide the entire list up 1/2 a button height.  
This works nicely and gets close enough to center vertically.  I'm just not sure why it's necessary.  

Thank you!
Reply

Logout Mark Read Team Forum Stats Members Help
DialogContextMenu.xml - Understanding control positioning0