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

[jmbillings]

OK, I have an image for my plugin defined in XML as:

<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:

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]

You can center an image in the .xml

try:

  <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]

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.

 

[mbuzina]

ok @Holzi was quicker, but wrong, valign needs to be middle http://wiki.team-mediaportal.com/1_...7_Skins/Skin_Architecture/Skin_Controls/Image

 

[Holzi]

Yes, this proves me wrong.

 

[catavolt]

You don´t need any align tags, if you set x,y, width and height correct. That´s all what´s needed

 

[mbuzina]

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]

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]

Just set the zoom property while having keepAspectRatio true will do what you need.

 

[cryimage]

or you can just need an image app to scale to fit the screen for you. also you can see the width and height in the settings.