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.
Related
I'm having a problem displaying the elements, in 1920x1080 resolution it looks great but in other ratio such as 1366x768 it became bloated. My goal is to have same look in different aspect ratio.
This is the display design in 1920x1080 resolution
This is the display design in 1366x768 resolution
P.S: I didn't use the font of vuetify, because in my previous project when I use vuetify fonts the font-size is not resizing
Add Breakpoints on every screen sizes that will determine the font size and other elements you want to be responsive on a screen
Ex:
carouselHeight() {
const x = this.$vuetify.breakpoint.name;
//console.log(x)
switch (x) {
case "xl":
return "800";
case "lg":
return "300";
case "md":
return "340";
case "sm":
return "230";
case "xs":
return "150";
default:
return "150";
}
On WP (Windows Runtime App in my case), if we set the app to be running on Light theme, while the transition is performed, we can still see a black background.
Is there any way to avoid that?
For example, in the animation below, you can see that the page animates but before it ends there is a black background still. I'd like to set that to white somehow, but I am not sure how...
(Image from http://jamescroft.co.uk/blog/windows-phone/utilizing-page-transition-animations-in-windows-phone-8-1-apps/#comment-907).
After thinking a little bit on what item could be parent of Page, I turned my attention towards Frame.
This could be solved by setting the BackgroundColor property of the Frame, when it is created, in the OnLaunchedmethod (App.xaml.cs):
protected override async void OnLaunched(LaunchActivatedEventArgs e)
{
Frame rootFrame = Window.Current.Content as Frame;
// Do not repeat app initialization when the Window already has content,
// just ensure that the window is active
if (rootFrame == null)
{
// Create a Frame to act as the navigation context and navigate to the first page
rootFrame = new Frame
{
CacheSize = 1,
Background = new SolidColorBrush(Colors.White)
};
if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
{
// TODO: Load state from previously suspended application
}
// Place the frame in the current Window
Window.Current.Content = rootFrame;
}
... //rest of OnLaunched method
}
Also you have to make sure to set the background of the Frame as well in the OnActivated method, since this will be launched in some cases where e.g. other apps launch URI to your app or Cortana launches the app, etc.
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);
}
}
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");
}
}
}
I've been searching for a solution to this for some time and believe that it, at it's core, isn't possible.
I'm wondering if anybody has found a decent hack or bypass.
My issue is this:
I have an app that captures a photo, then that photo is used as a canvas that the user can tap on to place tags.
After the tags are placed the user uploads the photos and the tags get submitted to a client service for parsing.
If the photo is taken in landscape I need to detect if it's landscape left or landscape right so that I can display it at the proper orientation when it gets to the canvas, and flip it the proper direction if the user changes to the opposite landscape mode.
How could I capture the orientation that the photo was taken in?
Simply look at the height and width of event.media to at least determine portrait vs. landscape. This will not help you with which direction to flip, though I'm not sure why you need to figure that out from the capture. The image is saved as a landscape photo in the correct natural orientation, such that you would simply rotate it to the current orientation of the phone
Titanium.Media.showCamera({
success: function(event) {
var isLandscape = event.media.width > event.media.height;
}
}
function getOrientation(o) {
switch (o){
case Titanium.UI.PORTRAIT:
return 'portrait';
case Titanium.UI.UPSIDE_PORTRAIT:
return 'upside portrait';
case Titanium.UI.LANDSCAPE_LEFT:
return 'landscape left';
case Titanium.UI.LANDSCAPE_RIGHT:
return 'landscape right';
case Titanium.UI.FACE_UP:
return 'face up';
case Titanium.UI.FACE_DOWN:
return 'face down';
case Titanium.UI.UNKNOWN:
return 'unknown';
}
}
}
Ti.Gesture.addEventListener('orientationchange',function(e){
Ti.API.info('Current Orientation: ' + getOrientation(Titanium.Gesture.orientation));
var orientation = getOrientation(e.orientation);
Titanium.API.info(
"orientation changed = "+orientation+", is portrait?"+e.source.isPortrait()+", orientation = "+Ti.Gesture.orientation + "is landscape?"+e.source.isLandscape()
);
});
modified a bit from the KS but should do the trick.
this should do what the above doesn't
Titanium.Media.showCamera({
success:function(event) {
var orientationWhilePictureTaken = Ti.Gesture.orientation;
// all other camera code...
}
});