question

Krammig-4408 avatar image
0 Votes"
Krammig-4408 asked JessieZhang-2116 answered

Displaying a common background png in a popup with overlaying text - across different mobile screen resolutions without distorting.

Coming from native coding on Android and iPhone I would appreciate some guidance on how to address this matter on Xamarin Forms

I have a designed png image that is used across a few apps (desktop and mobile). The image is essentially a user profile which the typical transparent circle and text areas that sit in graphic styles boxes and frames.

It is important for me to use the same image in the Xamarin app that I am developing. The reason being if the layout of that image or information location etc changes, I just want to replace that one background image and then code the text in each app accordingly, not have to code a whole new layout. In any even the popup screen should look exactly the same across all platforms.

My problem is I cannot seem to find a way in Xamarin on how to simply have one image as a background and then have text sitting about that in the appropriate field locations - that will not be distorted on different phone resolutions, namely Android and iPhones and Tablets.

On ones hand it would be nice if what I am trying to display auto resizes for the different screen resolutions a) without distorting the image and b) keeping the text in the correct locations. However I would also be happy if I specified a fixed width and height in pixels and the popup would appear a bit smaller or larger depending on the device. Not ideal but quite acceptable.

There is no issue in the native code but I just cannot find any examples / tutorials that demonstrate how to do this in Xamarin so any pointers to articles or actual help on this would be most appreciated.

Thanks







dotnet-xamarin
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

JessieZhang-2116 avatar image
0 Votes"
JessieZhang-2116 answered

Hello,


Welcome to Microsoft Q&A platform!

For this , you can handle this by using different styles per resolutions.
please refer article: https://devblogs.microsoft.com/xamarin/styling-for-multiple-device-resolutions/ .

The steps :

  1. Create new resource files

First, create two new resource style files: one for small devices and another one to be the default which will handle the general phones/tablets resolutions.

NOTE: We are using the content view vs template as a shortcut, so make sure to replace the ContentView type by a ResourceDictionary once files created.

 <?xml version="1.0" encoding="UTF-8"?>
 <ResourceDictionary xmlns="http://xamarin.com/schemas/2014/forms" 
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
              x:Class="MultipleDeviceResolutionsSample.GeneralDevicesStyle">
       
 </ResourceDictionary>

In the code behind of our resource file, let’s add a singleton so that we can use our style anywhere.

 namespace MultipleDeviceResolutionsSample
 {
     public partial class GeneralDevicesStyle : ResourceDictionary
     {
         public static GeneralDevicesStyle SharedInstance { get; } = new GeneralDevicesStyle();
         public GeneralDevicesStyle()
         {
             InitializeComponent();
         }
     }
 }

2.Create a method to detect the device size
To detect the device size use Xamarin Essentials which makes it really easy to get the metrics of a device with DeviceDisplay.MainDisplayInfo.

3.Set the resource file based on device size

In the App.xaml set a name for your resource dictionary that you can merge with your resolution specific styles. In this case I use “dictionary”.

 <?xml version="1.0" encoding="utf-8"?>
 <Application xmlns="http://xamarin.com/schemas/2014/forms" 
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
              x:Class="MultipleDeviceResolutionsSample.App">
     <Application.Resources>
         <ResourceDictionary x:Name="dictionary">
             <Color x:Key="Primary">#6200EE</Color>
             <Color x:Key="Secondary">#3700B3</Color>
             <Color x:Key="Accent">#03DAC6</Color>
             <Color x:Key="Light">White</Color>
         </ResourceDictionary>
      </Application.Resources>
 </Application>

Now back in the App.xaml.cs you can set the appropriate resource file to match the device size.

     using Xamarin.Essentials;
    using Xamarin.Forms;
    
 namespace MultipleDeviceResolutionsSample
 {
     public partial class App : Application
     {
         const int smallWightResolution = 768;
         const int smallHeightResolution = 1280;
    
         public App()
         {
             InitializeComponent();
             LoadStyles();
    
             MainPage = new MainPage();
         }
    
         void LoadStyles()
         {
             if (IsASmallDevice())
             {
                 dictionary.MergedDictionaries.Add(SmallDevicesStyle.SharedInstance);
             }
             else
             {
                 dictionary.MergedDictionaries.Add(GeneralDevicesStyle.SharedInstance);
             }
         }
    
         public static bool IsASmallDevice()
         {
             // Get Metrics
             var mainDisplayInfo = DeviceDisplay.MainDisplayInfo;
    
             // Width (in pixels)
             var width = mainDisplayInfo.Width;
    
             // Height (in pixels)
             var height = mainDisplayInfo.Height;
             return (width <= smallWightResolution && height <= smallHeightResolution);
         }
     }
 }

4.Add styles to each resource file


If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.


5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.