Windows Phone 7.8 tile sizes - windows-phone

I'm a bit confused. I got the 7.8 update yesterday and since the tiles are bigger now, do I need to update my app? As it is now the tiles looks a bit fuzzy and aren't as sharp as before.
According to the emulator the new tiles are 210 x 210 px.

You don't need to update your tiles because, as you noticed, the OS will scale the image to meet the new size requirement. This scaling can be up or down, actually, depending on whether it's for a small or medium sized tile.
Unfortunately, there is another complication: the new tile sizes are dependent on the resolution of the device screen. The medium sized tile is 210x210px for WVGA (which will cover all WP7.8 phones), but phones running 720p or WXGA (and remember that all apps that target WP7.8 can also run on WP8) have a medium sized tile of 336x336px. You can get a full listing of all tile sizes for all resolutions here: Windows Phone 8 Startscreen Tile sizes and margins.
You can discover the current resolution of the device using the following helper method (taken from this MSDN page).
public enum Resolutions { WVGA, WXGA, HD720p };
public static class ResolutionHelper
{
private static bool IsWvga
{
get
{
return App.Current.Host.Content.ScaleFactor == 100;
}
}
private static bool IsWxga
{
get
{
return App.Current.Host.Content.ScaleFactor == 160;
}
}
private static bool Is720p
{
get
{
return App.Current.Host.Content.ScaleFactor == 150;
}
}
public static Resolutions CurrentResolution
{
get
{
if (IsWvga) return Resolutions.WVGA;
else if (IsWxga) return Resolutions.WXGA;
else if (Is720p) return Resolutions.HD720p;
else throw new InvalidOperationException("Unknown resolution");
}
}
}

Related

Screenshot doesn't match coordinates and size of element for iOS app

I'm using a Appium methods to take a screenshot and crop a perticular part of that screenshot according to coordinates and size of an element.
The way I do this:
Take a screenshot
This is done with getScreenShotAs() method
Crop out the part of that image
This is done
image.getSubimage(getElementCoordinateX(element),
getElementCoordinateY(element),
getElementWidth(element),getElementHeight(element));
public static int getElementWidth(MobileElement element) {
return element.getSize().getWidth();
}
public static int getElementHeight(MobileElement element) {
return element.getSize().getHeight();
}
public static int getElementCoordinateX(MobileElement element) {
return element.getLocation().getX();
}
public static int getElementCoordinateY(MobileElement element) {
return element.getLocation().getY();
}
I tested this approach on Android and it works as intended, but on iOS it crops out totally different part of the screenshot and I'm sure that it's the right element that's being located.
Developers told me that iOS apps work with frames and that I'm probably getting the bounds coordinates and not the frame's coordinates. I didn't find a way to interact with them using Appium. Is there a way to make this work as intended?
you can get screenshot of element directly using:
Ruby:
element = driver.find_element(:predicate, "type == 'XCUIElementTypeSlider'")
screenshot = driver.element_screenshot_as(element ,:base64)
This should crop the screenshot automatically and correctly...

Creating a flexible UI contianer for an image and a label

I thought this would be like pretty simple task to do, but now I have tried for hours and cant figure out how to get around this.
I have a list of friends which should be displayed in a scrollable list. Each friend have a profile image and a name associated to him, so each item in the list should display the image and the name.
The problem is that I cant figure out how to make a flexible container that contains both the image and the name label. I want to be able to change the width and height dynamically so that the image and the text will scale and move accordingly.
I am using Unity 5 and Unity UI.
I want to achieve the following for the container:
The width and height of the container should be flexible
The image is a child of the container and should be left aligned, the height should fill the container height and should keep its aspect ratio.
The name label is a child of the contianer and should be left aligned to the image with 15 px left padding. The width of the text should fill the rest of the space in the container.
Hope this is illustrated well in the following attached image:
I asked the same question here on Unity Answers, but no answers so far. Is it really possible that such a simple task is not doable in Unity UI without using code?
Thanks a lot for your time!
Looks like can be achieved with layout components.
The image is a child of the container and should be left aligned, the height should fill the container height and should keep its aspect ratio.
For this try to add Aspect Ratio Fitter Component with Aspect mode - Width Controls Height
The name label is a child of the container and should be left aligned to the image with 15 px left padding. The width of the text should fill the rest of the space in the container.
For this you can simply anchor and stretch your label to the container size and use BestFit option on the Text component
We never found a way to do this without code. I am very unsatisfied that such a simple task cannot be done in the current UI system.
We did create the following layout script that does the trick (tanks to Angry Ant for helping us out). The script is attached to the text label:
using UnityEngine;
using UnityEngine.EventSystems;
[RequireComponent (typeof (RectTransform))]
public class IndentByHeightFitter : UIBehaviour, UnityEngine.UI.ILayoutSelfController
{
public enum Edge
{
Left,
Right
}
[SerializeField] Edge m_Edge = Edge.Left;
[SerializeField] float border;
public virtual void SetLayoutHorizontal ()
{
UpdateRect ();
}
public virtual void SetLayoutVertical() {}
#if UNITY_EDITOR
protected override void OnValidate ()
{
UpdateRect ();
}
#endif
protected override void OnRectTransformDimensionsChange ()
{
UpdateRect ();
}
Vector2 GetParentSize ()
{
RectTransform parent = transform.parent as RectTransform;
return parent == null ? Vector2.zero : parent.rect.size;
}
RectTransform.Edge IndentEdgeToRectEdge (Edge edge)
{
return edge == Edge.Left ? RectTransform.Edge.Left : RectTransform.Edge.Right;
}
void UpdateRect ()
{
RectTransform rect = (RectTransform)transform;
Vector2 parentSize = GetParentSize ();
rect.SetInsetAndSizeFromParentEdge (IndentEdgeToRectEdge (m_Edge), parentSize.y + border, parentSize.x - parentSize.y);
}
}

How to handle various view states in Windows 8.1 store app

I have windows 8.0 code and I had handled the UI for ViewStates like Portrait,Landscape, filled and Snapped. But with windows 8.1 a Viewer can move the app into any size. how do i handle the UI in this case. Currently i am doing it like this.
private void QuestionPage_SizeChanged(object sender, SizeChangedEventArgs e)
{
ApplicationViewState currentState = Windows.UI.ViewManagement.ApplicationView.Value;
if (currentState.Equals(ApplicationViewState.Snapped))
{
VisualStateManager.GoToState(this, "Snapped", false);
}
else if (currentState.Equals(ApplicationViewState.FullScreenLandscape))
{
VisualStateManager.GoToState(this, "FullScreenLandscape", false);
}
else if (currentState.Equals(ApplicationViewState.Filled))
{
VisualStateManager.GoToState(this, "Filled", false);
}
else if (currentState.Equals(ApplicationViewState.FullScreenPortrait))
{
VisualStateManager.GoToState(this, "FullScreenPortrait", false);
}
}
Firstly, you need to decide how to categorize your sizes. We decided to go with the following:
Default - landscape full screen.
Portrait - portrait full screen.
Small - snapped/resized to 500 - 683 wide, vertical orientation
Medium - snapped/resized to 684 wide and above, vertical orientation
So basically, the small and medium sizes are a vertical layout, as the height is bigger than the width. When the Medium width becomes larger than its height, then it would be the default landscape size.
We use:DisplayOrientations CurrentOrientation = Windows.Graphics.Display.DisplayInformation.GetForCurrentView().CurrentOrientation; instead of ApplicationViewState for SizeChangedEventArgs.
Then define the sizes as follows:
//Small Size
if (e.NewSize.Width <= 683
&& (CurrentOrientation == DisplayOrientations.Landscape || CurrentOrientation == DisplayOrientations.LandscapeFlipped || CurrentOrientation == DisplayOrientations.None))
You can then play and define which ever sizes you would like.
Instead of basing your layout on ApplicationViewState - make it depend on size and aspect ratio of the window. Think how users would use your app and what layout would work best in these cases. Maybe one layout would be fine or maybe you might want to switch a GridView layout into a ListView one when the window width is smaller than some value - e.g. 500px. Think what's most comfortable to use in these cases. At the very least - test that the layout doesn't fall apart when you resize the app.

Resizing desktop application with ligdx issues

I'm trying to make an app using libgdx. When I first launch it on my desktop, my map print well. But if I resize the window, the map is no longer completely in the screen.
But if I change the size on the beginning, the map print well. So there might be an issue with my resizing function.
In my GameScreen class I've got :
public void resize(int width, int height)
{
renderer.setSize(width, height);
}
And my renderer got this :
public void setSize (int w, int h)
{
ppuX = (float)w / (float)world.getWidth();
ppuY = (float)h / (float)world.getHeight();
}
For example, if I reduce my window, the map is too small for the window. If I extend it, the map doesn't in it.
If you have a fixed viewport, which is the case most of the time. You don't need to do anything in your resize method. The camera will fill the window to draw everything even if you resize it at runtime.
I, myself, never put anything on resize.

Create Backgroundthread Monogame

I made a game for Windows 8 in monogame but running into a problem. We finally got our hands on a Surface RT but we noticed that the loading times are really long on this device. We looked at several other games and noticed that this wasn't an uncommon issue. To fight the boredom of the user during the loading of the resources I want to draw a loading bar and some random facts onto the screen. The problem is that loading the resources blocks the rest of the game and doesn't allow me to draw anything because it stays stuck at the initializing part.
I searched for creating a lose Thread but found that Windows Store didn't support that so now my question to you how can I load my resources in the background or another way to not block the complete game and be able to call handle my Draw() function to draw a loading bar onto my screen.
I did something like this:
protected volatile bool ContentLoaded = false;
protected async override void LoadContent()
{
base.LoadContent();
Enabled = false;
await ThreadPool.RunAsync(new WorkItemHandler(LoadAllContent));
}
protected void LoadAllContent(Windows.Foundation.IAsyncAction action)
{
if (action.Status == Windows.Foundation.AsyncStatus.Error)
System.Diagnostics.Debug.WriteLine(action.ErrorCode);
// load your contents
ContentLoaded = true;
Enable = true;
}
And at the beginning of your Draw method:
if (!ContentLoaded)
{
// draw your loading screen
return;
}
If you want a progress bar you need a counter to increase every resource you've loaded, then in your Draw your bar has to relate to that counter.