Density of screen in iOS and Universal WIndows App - xamarin.ios

Hi I need to know the density of screen in windows 10/8/8.1 and iOS.
I got screen density in Android using DisplayMetrics but I find no such option/property available in UWP and iOS.
So Is there any property through which I can get screen density in UWP and IOS.

UPDATE - June 8th 2018
Xamarin has released Xamarin.Essentials!
Xamarin.Essentials provides developers with cross-platform APIs for their mobile applications.
Android, iOS, and UWP offer unique operating system and platform APIs that developers have access to all in C# leveraging Xamarin. Xamarin.Essentials provides a single cross-platform API that works with any Xamarin.Forms, Android, iOS, or UWP application that can be accessed from shared code no matter how the user interface is created.
https://github.com/xamarin/Essentials
You can now query the device's display information without having to manage all of the individual platform code pieces.
Device Display Information - https://learn.microsoft.com/en-us/xamarin/essentials/device-display
How-To:
Add a reference to Xamarin.Essentials in your class:
using Xamarin.Essentials;
The following information is exposed through the API:
// Get Metrics
var mainDisplayInfo = DeviceDisplay.MainDisplayInfo;
// Orientation (Landscape, Portrait, Square, Unknown)
var orientation = mainDisplayInfo.Orientation;
// Rotation (0, 90, 180, 270)
var rotation = mainDisplayInfo.Rotation;
// Width (in pixels)
var width = mainDisplayInfo.Width;
// Height (in pixels)
var height = mainDisplayInfo.Height;
// Screen density
var density = mainDisplayInfo.Density;
Useful Links:
(Github) Xamarin.Essentials - https://github.com/xamarin/Essentials
(Blog) Xamarin.Essentials - https://blog.xamarin.com/xamarin-essentials-cross-platform-apis-mobile-apps/
(Docs) Getting Started with Essentials - https://learn.microsoft.com/en-us/xamarin/essentials/get-started
Original Post (Before Xamarin.Essentials existed)
Below, I'm storing the specific OS's screen details in static vars, located in the Xamarin Forms App class
These all appear to work in my testing.
(copy/pasted from my github page - https://github.com/mattregul/Xamarin_Screensize)
Android (MainActivity.cs) - Jump to Github Page
// Store off the device sizes, so we can access them within Xamarin Forms
// Screen Width = WidthPixels / Density
// Screen Height = HeightPixels / Density
App.DisplayScreenWidth = (double)Resources.DisplayMetrics.WidthPixels / (double)Resources.DisplayMetrics.Density;
App.DisplayScreenHeight = (double)Resources.DisplayMetrics.HeightPixels / (double)Resources.DisplayMetrics.Density;
App.DisplayScaleFactor = (double)Resources.DisplayMetrics.Density;
iOS (AppDelegate.cs) - Jump to Github Page
// Store off the device sizes, so we can access them within Xamarin Forms
App.DisplayScreenWidth = (double)UIScreen.MainScreen.Bounds.Width;
App.DisplayScreenHeight = (double)UIScreen.MainScreen.Bounds.Height;
App.DisplayScaleFactor = (double)UIScreen.MainScreen.Scale;
Note In all Windows examples screensize is the root project namespace
UWP (App.xaml.cs) - Jump to Github Page
// You decided which is best for you...
// Do you want Size of the App's View
// or
// Do you want the Display's resolution
// ######################################
// Size of App's view
screensize.App.DisplayScreenHeight = Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().VisibleBounds.Height;
screensize.App.DisplayScreenWidth = Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().VisibleBounds.Width;
// Size of screen's resolution
//screensize.App.DisplayScreenWidth = Windows.Graphics.Display.DisplayInformation.GetForCurrentView().ScreenHeightInRawPixels;
//screensize.App.DisplayScreenHeight = Windows.Graphics.Display.DisplayInformation.GetForCurrentView().ScreenWidthInRawPixels;
// Pixels per View Pixel
// - https://msdn.microsoft.com/en-us/windows/uwp/layout/design-and-ui-intro#effective-pixels-and-scaling
// - https://msdn.microsoft.com/en-us/windows/uwp/layout/screen-sizes-and-breakpoints-for-responsive-design
screensize.App.DisplayScaleFactor = Windows.Graphics.Display.DisplayInformation.GetForCurrentView().RawPixelsPerViewPixel;
Windows Phone 8.1 (App.xaml.cs) - Jump to Github Page
// Size of App's view
screensize.App.DisplayScreenHeight = Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().VisibleBounds.Height;
screensize.App.DisplayScreenWidth = Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().VisibleBounds.Width;
// Pixels per View Pixel
// - https://msdn.microsoft.com/en-us/windows/uwp/layout/design-and-ui-intro#effective-pixels-and-scaling
// - https://msdn.microsoft.com/en-us/windows/uwp/layout/screen-sizes-and-breakpoints-for-responsive-design
screensize.App.DisplayScaleFactor = Windows.Graphics.Display.DisplayInformation.GetForCurrentView().RawPixelsPerViewPixel;
Windows 8.1 (App.xaml.cs) - Jump to Github Page
// Size of App's view
screensize.App.DisplayScreenHeight = Window.Current.Bounds.Height;
screensize.App.DisplayScreenWidth = Window.Current.Bounds.Width;
screensize.App.DisplayScaleFactor = 1; // No scaling here? If you find a scaling for Windows 8.1, please let me know :)
Xamarin Forms Page (App.cs) - Jump to Github Page
namespace screensize
{
public class App : Application
{
public static double DisplayScreenWidth = 0f;
public static double DisplayScreenHeight = 0f;
public static double DisplayScaleFactor = 0f;
public App()
{
string ScreenDetails = Device.OS.ToString() + " Device Screen Size:\n" +
$"Width: {DisplayScreenWidth}\n" +
$"Height: {DisplayScreenHeight}\n" +
$"Scale Factor: {DisplayScaleFactor}";
// The root page of your application
var content = new ContentPage
{
Title = "Xamarin_GetDeviceScreensize",
Content = new StackLayout
{
VerticalOptions = LayoutOptions.Center,
Children = {
new Label {
HorizontalTextAlignment = TextAlignment.Center,
FontSize = Device.GetNamedSize (NamedSize.Large, typeof(Label)),
Text = ScreenDetails
}
}
}
};
MainPage = new NavigationPage(content);
}
}
}

This list lists the ios device dpi information. You can also use GBDeviceInfo thrid-party tool to get the screen density for IOS device like this [GBDeviceInfo deviceInfo].displayInfo.pixelsPerInch;
IOS:
iPhones
iPhone 1/3G/3GS 320 x 480 163 ppi
iPhone 4/4S 640 x 940 326 ppi
iPhone 5/5C/5S 640 x 1136 326 ppi
iPhone 6/6S 750 x 1334 326 ppi
iPhone 6 Plus/6S Plus 1080 x 1920 401 ppi
Without downsampling: 1242 x 2208 461 ppi
Except for the 6th generation (= 5th) iPod touch,
all the models are equal to their iPhone counterparts
iPads
iPad 1/2 768 x 1024 132 ppi
iPad 3/4/Air/Air 2 1536 x 2048 264 ppi
iPad Mini 1 768 x 1024 163 ppi
iPad Mini 2/3/4 1536 x 2048 326 ppi
iPad Pro 2737 x 2048 264 ppi
Apple Watches
Apple Watch 38 mm 272 x 340 326 ppi
Apple Watch 42 mm 312 x 390 326 ppi
I found API in the UWP to retrieve the device dpi. Windows.Graphics.Display.DisplayInformation. You can try it.

Related

Different wallpaper for each monitor in a multi-monitor setup in Windows 10

There are a number of questions and answers about setting wallpapers programmatically on multi-monitor setups in Windows, but I'm asking specifically for Windows 10 (and maybe Windows 8) because it seems to work differently from all the explanations I found.
Raymond Chen has an article "How do I put a different wallpaper on each monitor?" (https://devblogs.microsoft.com/oldnewthing/?p=25003), also quoted in Monitors position on Windows wallpaper. The core concepts is that Windows places the top-left corner of the provided bitmap at the top-left corner of the primary monitor, and wraps around to fill any desktop space to the left and/or above that. I understand that, I wrote a little program using that knowledge, and it works beautifully in Windows 7.
How it works: I create a bitmap that conceptually covers the whole desktop space, as the user sees it. I draw the contents of each monitor to that bitmap in its appropriate position (the program is written in C++ using VCL, but the principle remains the same in other programming environments):
TRect GetMonitorRect_WallpaperCoords(int MonitorNum)
{
Forms::TMonitor *PrimaryMonitor = Screen->Monitors[0];
Forms::TMonitor *Monitor = Screen->Monitors[MonitorNum];
// Get the rectangle in desktop coordinates
TRect Rect(Monitor->Left, Monitor->Top, Monitor->Left + Monitor->Width, Monitor->Top + Monitor->Height);
// Convert to wallpaper coordinates
Rect.Left += PrimaryMonitor->Left - Screen->DesktopLeft;
Rect.Top += PrimaryMonitor->Top - Screen->DesktopTop;
Rect.Right += PrimaryMonitor->Left - Screen->DesktopLeft;
Rect.Bottom += PrimaryMonitor->Top - Screen->DesktopTop;
return Rect;
}
std::unique_ptr<Graphics::TBitmap> CreateWallpaperBitmap_WallpaperCoords()
{
std::unique_ptr<Graphics::TBitmap> Bmp(new Graphics::TBitmap);
Bmp->PixelFormat = pf24bit;
Bmp->Width = Screen->DesktopWidth;
Bmp->Height = Screen->DesktopHeight;
// Draw background (not that we really need it: it will never be visible)
Bmp->Canvas->Brush->Style = bsSolid;
Bmp->Canvas->Brush->Color = clBlack;
Bmp->Canvas->FillRect(TRect(0, 0, Bmp->Width, Bmp->Height));
for (int MonitorNum = 0; MonitorNum < Screen->MonitorCount; ++MonitorNum)
{
TDrawContext DC(Bmp->Canvas, GetMonitorRect_WallpaperCoords(MonitorNum));
DrawMonitor(DC);
}
return Bmp;
}
(The draw context uses a coordinate translation rect so that the code int DrawMonitor function can draw in a rectangle like (0, 0, 1920, 1080) without having to wonder where in the full bitmap it is drawing, and with a clip rect so that DrawMonitor can not accidentally draw outside of the monitor it's drawing on).
Then I convert that bitmap to an image that will properly wrap around when placed at the top-left corner of the primary monitor (as Raymond Chen describes in his article):
std::unique_ptr<Graphics::TBitmap> ConvertWallpaperToDesktopCoords(std::unique_ptr<Graphics::TBitmap> &Bmp_WallpaperCoords)
{
std::unique_ptr<Graphics::TBitmap> Bmp_DesktopCoords(new Graphics::TBitmap);
Bmp_DesktopCoords->PixelFormat = Bmp_WallpaperCoords->PixelFormat;
Bmp_DesktopCoords->Width = Bmp_WallpaperCoords->Width;
Bmp_DesktopCoords->Height = Bmp_WallpaperCoords->Height;
// Draw Bmp_WallpaperCoords to Bmp_DesktopCoords at four different places to account for all
// possible ways Windows wraps the wallpaper around the left and bottom edges of the desktop
// space
Bmp_DesktopCoords->Canvas->Draw(Screen->DesktopLeft, Screen->DesktopTop, Bmp_WallpaperCoords.get());
Bmp_DesktopCoords->Canvas->Draw(Screen->DesktopLeft + Screen->DesktopWidth, Screen->DesktopTop, Bmp_WallpaperCoords.get());
Bmp_DesktopCoords->Canvas->Draw(Screen->DesktopLeft, Screen->DesktopTop + Screen->DesktopHeight, Bmp_WallpaperCoords.get());
Bmp_DesktopCoords->Canvas->Draw(Screen->DesktopLeft + Screen->DesktopWidth, Screen->DesktopTop + Screen->DesktopHeight, Bmp_WallpaperCoords.get());
return Bmp_DesktopCoords;
}
Then I install that bitmap as a wallpaper by writing the appropriate values in the registry and calling SystemParametersInfo with SPI_SETDESKWALLPAPER:
void InstallWallpaper(const String &Fn)
{
// Install wallpaper:
// There are 3 name/data pairs that have an effect on the desktop wallpaper, all under HKCU\Control Panel\Desktop:
// - Wallpaper (REG_SZ): file path and name of wallpaper
// - WallpaperStyle (REG_SZ):
// . 0: Centered
// . 1: Tiled
// . 2: Stretched
// - TileWallpaper (REG_SZ):
// . 0: Don't tile
// . 1: Tile
// We don't use the Wallpaper value itself; instead we use SystemParametersInfo to set the wallpaper.
// The file name needs to be absolute!
assert(Ioutils::TPath::IsPathRooted(Fn));
std::unique_ptr<TRegistry> Reg(new TRegistry);
Reg->RootKey = HKEY_CURRENT_USER;
if (Reg->OpenKey(L"Control Panel\\Desktop", false))
{
Reg->WriteString(L"WallpaperStyle", L"1");
Reg->WriteString(L"TileWallpaper", L"1");
Reg->CloseKey();
}
SystemParametersInfoW(SPI_SETDESKWALLPAPER, 1, Fn.c_str(), SPIF_UPDATEINIFILE | SPIF_SENDCHANGE);
}
But when I test it in Windows 10, it doesn't work properly anymore: Windows 10 puts the wallpaper completely in the wrong place. Seeing as other people have asked questions about multi-monitor wallpapers in the past, I'm hoping there are people with experience of it on Windows 10.
As far as I can see, Windows 10 places the top-left corner of the provided bitmap at the top-left corner of the desktop space (by which I mean the bounding rectangle of all monitors), instead of the top-left corner of the primary monitor. In code, that means: I leave out the ConvertWallpaperToDesktopCoords step, and then it works fine as far as I can see.
But I can't find any documentation on this, so I don't know if this is officially explanation of how Windows 10 does it. Use with care. Also I don't know when this different behavior started: in Windows 10, or maybe earlier in Windows 8.

Bitmap Image: cropping with portrait orientation

Adding camera functionality to my app is killing me! Started with the basic UWP camera sample, but I have to add zooming capability which added a ScrollViewer around the preview control and complicated my life. Found the cropping code in a different sample. Everything works in landscape, but when you rotate the tablet to portrait the cropped image (even without any actual cropping) is rotated 90.
The cropping logic takes originX/Y, ScrollViewer.ViewportWidth/Height & ScrollViewer.ExtentWidth/Height. I don't understand how these values change with the rotation! In Landscape I use topLeft for the X/Y. What would I do for Portrait? I'm setting the width to 400 and in both views it's STILL 400 so I don't believe width/height should be flipped.
Here's the cropping code. Can anyone comment on what should be different for the 2 (actually 4) orientations?
async public static Task<WriteableBitmap> GetCroppedBitmapAsync(StorageFile originalImageFile,
Point startPoint, Size cropSize, Size previewSize)
{
using (IRandomAccessStream stream = await originalImageFile.OpenReadAsync())
{
// Create a decoder from the stream. With the decoder, we can get the properties of the image.
BitmapDecoder decoder = await BitmapDecoder.CreateAsync(stream);
// Adjust the start x/y to the stream size
uint scaledStartPointX = (uint)Math.Round((decoder.PixelWidth * (startPoint.X / previewSize.Width)));
uint scaledStartPointY = (uint)Math.Round((decoder.PixelHeight * (startPoint.Y / previewSize.Height)));
// Now get the scaled size of the viewport (ie the cropped area)
uint selectedAreaWidth = (uint)Math.Round(decoder.PixelWidth * (cropSize.Width / previewSize.Width));
uint selectedAreaHeight = (uint)Math.Round(decoder.PixelHeight * (cropSize.Height / previewSize.Height));
// Get the cropped pixels.
byte[] pixels = await GetPixelData(decoder, scaledStartPointX, scaledStartPointY, selectedAreaWidth, selectedAreaHeight,
decoder.PixelWidth, decoder.PixelHeight);
// Stream the bytes into a WriteableBitmap
WriteableBitmap cropBmp = new WriteableBitmap((int)selectedAreaWidth, (int)selectedAreaHeight);
Stream pixStream = cropBmp.PixelBuffer.AsStream();
pixStream.Write(pixels, 0, (int)(selectedAreaWidth * selectedAreaHeight * 4));
return cropBmp;
}
}

What is screen Scale value for Lumia 950 and 950 XL?

Since I don't have any of the mentioned phones with Windows 10 Mobile, can someone, who have Lumia 950 or 950 XL , run the following few lines of code in blank UWP application project to get the Scale value out of this device (to figure out effective resolution eventually):
public sealed partial class MainPage
{
public MainPage()
{
InitializeComponent();
// ### snipped start ###
var qualifiers = Windows.ApplicationModel.Resources.Core.ResourceContext.GetForCurrentView().QualifierValues;
string scale;
if (qualifiers.TryGetValue("Scale", out scale))
{
System.Diagnostics.Debug.WriteLine(scale);
}
// ### snipped end ###
}
}
Please post the integer number from the output window as an answer - will be much appreciative!
PS. Suspecting that it should be 400 for 950 and 450 for 950 XL, but would like to be sure.
OK, in case anybody will look for it later - the scale is 400 for Lumia 950, thanks to colleague, who bought it recently.

UIWebView loads page with 20 pixel gap in portrait

I have a UIWebView to load certain pages.In iOS 8 it loads page with 20 pixel gap from top specially in portrait mode,in landscape mode it is fine.How to handle the gap in portrait?
Place following code in your viewWillAppear :
if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {
CGRect viewBounds = [self.webView bounds];
viewBounds.origin.y = 20;
viewBounds.size.height = viewBounds.size.height - 20;
self.webView.frame = viewBounds;
}
Check this for more information : iOS 7 Status bar with Phonegap

Create Landscape Game Canvas for Asha 303

i've searched all the forum bet never found any answer satisfy my question.
I want to create a game with landscape orientation for Nokia Asha 303, are there any way to rotate the game canvas 90 degrees so the orientation become landscape orientation? Because i look at this video Angry Bird Asha 303. The game has landscape orientation so i curious how to do that in j2me.
Thanks,
Since MIDP 2.0 we can use an Sprite to rotate an image in 90 degrees. First thing we need is an Image of the correct size. Following code could be inside the constructor of a class that extends Canvas - considering an Sprite and an Image attributes:
int width = Math.max(super.getWidth(), super.getHeight());
int height = Math.min(super.getWidth(), super.getHeight());
screen = Image.createImage(width, height);
sprite = new Sprite(screen);
if (super.getWidth() < super.getHeight()) { // portrait screen
sprite.setTransform(Sprite.TRANS_ROT90);
sprite.setPosition(0, 0);
}
When painting your content use the mutable Image Graphics, then update the sprite with the image like bellow.
protected void paint(Graphics g1) {
Graphics g = screen.getGraphics();
// ... do your drawing
this.sprite.setImage(screen, screen.getWidth(), screen.getHeight());
sprite.paint(g1);
}
How can you use the biggest possible area on the handset display?
. Do not setTitle on your Canvas
. Do not addCommand to your Canvas
. Call setFullScreenMode(true) before calling super.getWidth() and super.getHeight()
From http://smallandadaptive.blogspot.com.br/2009/08/fullscreen-landscape.html

Resources