How to set an image center/fullscreen? (1 Viewer)

jmbillings

MP Donator
  • Premium Supporter
  • June 9, 2008
    128
    20
    Ely
    Home Country
    United Kingdom United Kingdom
    OK, I have an image for my plugin defined in XML as:

    XML:
    <window>
      <id>3355</id>
      <defaultcontrol>4</defaultcontrol>
      <allowoverlay>yes</allowoverlay>
      <controls>
     
    	<control>
    	  <description>image</description>
    	  <type>image</type>
    	  <id>4</id>
    	  <posX>0</posX>
    	  <posY>0</posY>
    	</control>
       
      </controls>
    </window>
    When I set my image in code, I've added the option to keep aspect ratio and center:

    Code:
    image.KeepAspectRatio = true;
    image.HorizontalContentAlignment = MediaPortal.Drawing.HorizontalAlignment.Center;
    image.HorizontalAlignment = MediaPortal.Drawing.HorizontalAlignment.Center;
    image.VerticalAlignment = MediaPortal.Drawing.VerticalAlignment.Center;
    But the image is still populated top-left, not in the center.
    I'm guessing I need to set the width and height to fill the screen size, but not sure how to achieve that?
     

    Holzi
    Country flag

    Super Moderator
  • Team MediaPortal
  • April 21, 2010
    7,930
    2,230
    Ba-Wü
    Home Country
    Germany Germany
    You can center an image in the .xml

    try:
    Code:
      <control>
    	  <description>image</description>
    	  <type>image</type>
    	  <id>4</id>
    	  <posX>0</posX>
    	  <posY>0</posY>
    <height>1080</height>
    <width>1920</width>
    <align>center</align>
    <valign>center</valign>
    	</control>
    This is for FullHD skinfile. For HDReady you need to change the height and width.
     

    mbuzina
    Country flag

    Retired Team Member
  • Premium Supporter
  • April 11, 2005
    2,839
    723
    Germany
    Home Country
    Germany Germany
    What size Skin are you designing for? For Titan use <width>1920</width> <height>1080</height> in your control. DefaultWide it is 1280 x 720, same as Default.

    add <align>center</align> and <valign>middle</valign> as well as <keepaspectratio>true</keepaspectratio>. Then it will be centered.
     

    catavolt
    Country flag

    Design Group Manager
  • Team MediaPortal
  • August 13, 2007
    12,371
    8,893
    Lanzarote
    Home Country
    Germany Germany
    You don´t need any align tags, if you set x,y, width and height correct. That´s all what´s needed ;)
     

    mbuzina
    Country flag

    Retired Team Member
  • Premium Supporter
  • April 11, 2005
    2,839
    723
    Germany
    Home Country
    Germany Germany
    Yep, you could also calculate the center, but things like that result in upgrade hell. Better tell the system what you want to be done, not how you want it to be done ;-)
     

    jmbillings

    MP Donator
  • Premium Supporter
  • June 9, 2008
    128
    20
    Ely
    Home Country
    United Kingdom United Kingdom
    Thanks guys- I thought about setting the width/height, but then I'm concerned the image will be cropped on, say, 1280x720 screens? I should add, this isn't a fixed size image as a skin background for example, it's a plugin to display images from a resource that could potentially be any size/aspect ratio.
    I may be better off scaling in code if this is the case- if so, is there an easy way to obtain the current window width/height from within my plugin? I can work out the rest :)

    (If I'm doing this completely arse-about-face, also shout of course! - basically my plugin grabs an image from online and displays it- I want to to fill the screen on it's longest side, keeping aspect ratio. Think of it like a full-screen photo viewer in simple terms)
     

    mbuzina
    Country flag

    Retired Team Member
  • Premium Supporter
  • April 11, 2005
    2,839
    723
    Germany
    Home Country
    Germany Germany
    Just set the zoom property while having keepAspectRatio true will do what you need.
     

    Users Who Are Viewing This Thread (Users: 0, Guests: 1)

    Top Bottom