How to create a fullscreen size popup in Windows phone - popup

Fullscreen I mean the popup usercontrol covers the whole cellphone screen, maximize. can this be done?
thx!

You can get the current width and height by Content.ActualHeight/Width property
here's a code snippet
public void showPopUp()
{
//get heigth and width
double height=Application.Current.Host.Content.ActualHeight;
double width = Application.Current.Host.Content.ActualWidth;
//child content
StackPanel stk = new StackPanel();
stk.Height = height; //set height
stk.Width = width; //set width
stk.Background = new SolidColorBrush(Colors.Red);
TextBlock txtblock = new TextBlock() { FontSize=40, Text="HELLO WORLD", TextWrapping=TextWrapping.Wrap};
stk.Children.Add(txtblock);
Popup _popup = new Popup();
_popup.Child = stk; //set child content
this.LayoutRoot.Children.Add(_popup);
_popup.IsOpen = true;
}
and then you get this result ;)

For Windows Phone 8.1 you can get the current Application width and height by Window.Current.Bounds
double height = Window.Current.Bounds.Height;
double width = Window.Current.Bounds.Width;

Related

Get size of screen without bottom navigation bar height

So the basic scaffold in flutter has appbar, body and bottom bar.
in my bottom navigation bar I have 3 items:
Page 1 (Editor Page)
page 2 (Stickers)
page 3 (Text Customization Page)
Each of these pages have their own scaffolds.
Editor page has a widget called LayoutCanvas which is something like:
Widget build(BuildContext context) {
WidgetsBinding.instance!.addPostFrameCallback((timeStamp) {
CanvasModel.of(context).init(canvasKey!);
});
return Container(
Inside init:
void init(GlobalKey canvasKey) {
_canvasKey = canvasKey;
final context = _canvasKey.currentContext;
if (context == null) return;
final bounds = context.findRenderObject()!.paintBounds;
final screenHeight = MediaQuery.of(context).size.height;
final screenWidth = MediaQuery.of(context).size.width;
var canvasHeight = screenHeight * 0.7;
var canvasWidth = layout.aspectRatio * canvasHeight;
Issue:
As you can see I'm taking 0.7 or 70% of the screen height as the canvas height and calculating the rest from there. But 70% is quite small for something like an editor canvas. But if I make it 80% some of the editor is getting cut by the bottom navigation bar.
Maybe the screenHeight is not taking the bottom navigation bar height into consideration?
I either need to make it dynamic or I need to subtract the bottom nav height from screenHeight.
aspectRatio:
double get aspectRatio => isInitialized ? height / _layout!.height : 0;
How can I solve this issue?
To get the maximum available height you need to distract some values from MediaQuery.of(context).size.height. Assuming that you have a top AppBar and a BottomNavigationBar, you can use this formula:
MediaQuery.of(context).size.height - // total height
kToolbarHeight - // top AppBar height
MediaQuery.of(context).padding.top - // top padding
kBottomNavigationBarHeight // BottomNavigationBar height
you can use MediaQuery.of(context).size.width and
MediaQuery.of(context).size.height

How can I make sure my Xamarin.Forms iOS custom renderer of my entry uses the element's width?

In my Xamarin.Forms application I use a custom renderer for entries, since I want them to be made of a single, bottom border. The problem is that I can't find out the right code to make the custom renderer use the element's width. Currently, the situation is like this:
As you can see, the bottom border goes far beyond the real element's width, but I don't understand why. Here I found something, but still I don't understand how to fix this and why this happens. My current code for the renderer class is:
public class CustomEntryRenderer : EntryRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
{
base.OnElementChanged(e);
if (Control != null)
{
Control.BorderStyle = UITextBorderStyle.None;
var view = Element as CustomEntry;
var borderLayer = new CALayer
{
Frame = new CGRect(0f, Frame.Height + 5, Frame.Width, 1f),
BorderColor = UIColor.Gray.CGColor,
BackgroundColor = UIColor.Magenta.CGColor,
BorderWidth = 13,
MasksToBounds = true
};
Control.Layer.AddSublayer(borderLayer);
}
}
}
The problem seems to be in that Frame.Width. If I set it to 100, for example, the width of the bottom line of the entry is set to 100, but the problem is that, doing so, I'm not able to horizontally center the line. I want this outcome:

Change unity aspect ratio in fullscreen WebGL

Is it possible to change the aspect ratio when the game is fullscreen in WebGL? If so, does it pillarbox or stretch to compensate for the difference?
Screen.SetResolution(800, 600, true);
does not work in WebGL.
Its not possible in WebGL, because you export with a body and canvas size, not screen resolution.
You need to set your canvas size in your template css file:
<canvas id="c" width="400" height="300"></canvas>
You can call this function to resize your canvas size when you go to full screen o resize your window:
function resizeCanvas() {
canvas = document.getElementById("c");
gl = canvas.getContext("webgl");
var width = canvas.clientWidth;
var height = canvas.clientHeight;
if (canvas.width != width ||canvas.height != height)
{
canvas.width = width;
canvas.height = height;
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
}
}

Blackberry webworks 10 using image from picture taken\uploaded

I am stuck with an issue and I have no idea what to try next.
In My application I offer my user a choice to either take a photo or choose a photo from the gallery. This part works fine, the problem arises with the saving\reading of the photo. Lets take this from the camera invoke perspective.
function startCameraApp() {
PhotoTaken = false;
blackberry.event.addEventListener("onChildCardClosed", sharePhoto);
blackberry.invoke.invoke({
target: "sys.camera.card"
}, onInvokeSuccess, onInvokeError);
}
and in sharePhoto I have the following code...
function sharePhoto(request) {
var image = new Image();
image.src = "file://" + request.data;
image.onload = function () {
// Now here I need to read the image file and convert it into base64.
var resized = resizeMe(image); // the resizeMe function is given below and it simply makes my image smaller
var imagedata = resized.split("base64,");
sessionStorage.setItem("MyNewPicture", imagedata);
}
}
function resizeMe(img) {
var canvas = document.createElement('canvas');
var max_width = 600;
var max_height = 600;
var width = img.width;
var height = img.height;
// calculate the width and height, constraining the proportions
if (width > height) {
if (width > max_width) {
height = Math.round(height * max_width / width);
width = max_width;
}
} else {
if (height > max_height) {
width = Math.round(width * max_height / height);
height = max_height;
}
}
//resize the canvas and draw the image data into it
img.width = width;
img.height = height;
canvas.width = width;
canvas.height = height;
canvas.classname += "ui-hidden";
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);
return canvas.toDataURL();
}
So the app runs and it takes the photo and everything seems fine, yet the data uploaded to local storage is simply a blank screen. It works 100% in the blackberry 10 simulator, but not on my device. On the device it saves an empty string.
Edit
Ok. So I added this to my function for testing purposes and I am still stuck and I don't know what to do...
function sharePhoto(request) {
var image = new Image();
image.src = "file://" + request.data;
image.onload = function () {
// Now here I need to read the image file and convert it into base64.
var resized = resizeMe(image); // the resizeMe function is given below and it simply makes my image smaller
var imagedata = resized.split("base64,");
alert(imagedata); // This returns a blank popup
sessionStorage.setItem("MyNewPicture", imagedata);
}
}
I believe when you use the split method it returns an array, so you'd access it like this:
var resized = resizeMe(image);
var imagedata = resized.split("base64,");
imagedata = imagedata[1]; // this gives you everything after the 'base64,' string
However, the main problem I see is that you're splitting the imagedata string which is removing the whole 'this is an image' prefix from the data.
When you display the imagedata as an image, you need to have the data:image/jpeg;base64,
prefix as well.
So that being said, your images source would be
data:image/jpeg;base64,<rest of base64 string here>
I needed to include an extra element in my application's config.xml.
<access subdomains="true" uri="file://accounts/"></access>
<access subdomains="true" uri="file://accounts/100/shared/camera/"></access>
This gives access to your application to these folders and their containting files. Simulator's does not require this permission.

C# Image resize- quality losing

I have used a C# method to resize the image size.I have used several methods from the following links.
C# Simple Image Resize : File Size Not Shrinking
shrinking
Resize an Image C#
but quality is missing when re-sizing the image
Please help me to resolve the issue.
You could use WIC (Windows Imaging Component) instead of GDI+. Here's a nice blog post with an example.
First convert your Bitmap to an Image
Bitmap b = new Bitmap("asdf.jpg");
Image i = (Image)b;
then pass the image to this method to resize
public static Image ResizeImage(Image image, int width, int height, bool onlyResizeIfWider)
{
using (image)
{
// Prevent using images internal thumbnail.
image.RotateFlip(RotateFlipType.Rotate180FlipNone);
image.RotateFlip(RotateFlipType.Rotate180FlipNone);
if (onlyResizeIfWider == true)
if (image.Width <= width)
width = image.Width;
// Resize with height instead?
int newHeight = image.Height * width / image.Width;
if (newHeight > height)
{
width = image.Width * height / image.Height;
newHeight = height;
}
Image NewImage = image.GetThumbnailImage(width, newHeight, null, IntPtr.Zero);
return NewImage;
}
}
I hope this helps.