wp8.1 Study9: Adjust UI for different screen and phone orientations

First, the preparation of knowledge

Now that there are more and more WP8.1 phones with different screen sizes, this requires us to consider this when designing the UI. In WP, the proportional factor (a scale factor) can solve the problem very well, and in the Microsoft system of the pc/tablet/mobile phone is done. Scale factor is based on the physical mobile phone screen size and other parameters calculated, there are specific calculation formula, not described here.

Second, what we need to do

1, provide the bitmap image to the system zoom

For example, on the page, there is an image control to show the image, we need to provide it with a relative scale factor in the system file in order to show the same clarity on different screen sizes.

Step is only one step to create a new images folder, put the corresponding pictures in the

The system automatically calls different image resources to the image control of the page based on different devices.

Note: The XAML code is

<Source= "/images/resolution.png"  Stretch= "None"/> 

2. Build a UI that adapts to the available screen size

(1) When we are in the layout of the page, most of the grid will be used, when defining rows and columns, as far as possible to specify that the rows and columns are placed in the relevant proportion (not absolute), such as:

<grid.rowdefinitions>            <RowDefinitionHeight= "1*"/>            <RowDefinitionHeight= "Auto"/>            <RowDefinitionHeight= "Auto"/>        </grid.rowdefinitions>        <grid.columndefinitions>            <ColumnDefinitionWidth= "Auto"/>            <ColumnDefinitionWidth="*"/>        </grid.columndefinitions>

It would be useful to use *,auto.

(2) using Viewbox

Viewbox is a content decorator that stretches and scales unique children and fills up the available space, and in some places the Viewbox control makes the content better displayed in different situations. For example, when the cell phone is placed vertically and horizontally, the controls inside the Viewbox will change correspondingly. Examples are as follows:

XAML Code:

<grid.row= "0">            <x:name= " Hellotextbox "  text=" This text fills in. " />        </ Viewbox >

TextBlock content will vary depending on the placement of the phone.

3. Responding to mobile phone placement changes

If the phone supports portrait and landscape, this is a must. Examples are as follows:

Similar, XAML code can be added to the page :

 <visualstatemanager.visualstategroups>             <VisualStateGroupx:name= "Visualsizestategroup">                <VisualStatex:name= "Portrait">                    <Storyboard>                        <ObjectanimationusingkeyframesStoryboard.TargetProperty= "(uielement.visibility)"Storyboard.TargetName= "Monalisadetails">                            <DiscreteObjectKeyFrameKeyTime= "0">                                <Discreteobjectkeyframe.value>                                    <Visibility>Collapsed</Visibility>                                </Discreteobjectkeyframe.value>                            </DiscreteObjectKeyFrame>                        </Objectanimationusingkeyframes>                    </Storyboard>                </VisualState>                <VisualStatex:name= "Landscape">                    <Storyboard>                        <ObjectanimationusingkeyframesStoryboard.TargetProperty= "(frameworkelement.height)"Storyboard.TargetName= "Monalisaimage">                            <DiscreteObjectKeyFrameKeyTime= "0">                                <Discreteobjectkeyframe.value>                                    <x:double>300</x:double>                                </Discreteobjectkeyframe.value>                            </DiscreteObjectKeyFrame>                        </Objectanimationusingkeyframes>                    </Storyboard>                </VisualState>            </VisualStateGroup>        </visualstatemanager.visualstategroups>

In C #, add:

Private voidDisplayinfoorientationchanged (displayinformation sender,Objectargs) {            varOrientation =sender.            Currentorientation; if(Orientation = = Displayorientations.landscape | | orientation = =displayorientations.landscapeflipped) {varres = VisualStateManager.GoToState ( This,"Landscape",true); }            if(Orientation = = Displayorientations.portrait | | orientation = =displayorientations.portraitflipped) {varres = VisualStateManager.GoToState ( This,"Portrait",false); }        }

 public   Contentoverflow () {this  .            InitializeComponent (); VisualStateManager.GoToState ( this ,  "  portrait   ", false  );            Displayinformation displayinfo  = Displayinformation.getforcurrentview (); displayinfo.orientationchanged   +=          displayinfoorientationchanged;  }

Where VisualStateManager is the administrative state and the logical transformation. Learning it is very useful, Msdn:http://msdn.microsoft.com/zh-cn/library/system.windows.visualstatemanager (v=vs.110). aspx

Third, display information and other inquiries

Using the Displayinformation class, the code is as follows:

Displayinformation DisplayInfo =Displayinformation.getforcurrentview ();//Nb:not all properties/events shown-take care with deprecated properties//such as ResolutionscalevarNativeorientation =displayinfo.nativeorientation;varCurrentorientation =displayinfo.currentorientation;varRawpixelsperviewpixel =Displayinfo.rawpixelsperviewpixel;varVIEWPIXELSDPI =displayinfo.logicaldpi;varRawdpix =Displayinfo.rawdpix;varRawdpiy = Displayinfo.rawdpiy;

The above content is only the reference content of mutual learning, if there is an error, please point out.

wp8.1 Study9: Adjust UI for different screen and phone orientations