Vytvorenie flexibilného rozloženia v aplikáciách plátnaCreate responsive layouts in canvas apps

Predtým, ako vytvoríte aplikáciu plátna v službe PowerApps, môžete určiť, či môžete prispôsobiť aplikáciu pre telefón alebo tablet.Before you build a canvas app in PowerApps, you specify whether to tailor the app for a phone or a tablet. Tento výber určuje veľkosť a tvar plátno, na ktorých vytvoríte svoju aplikáciu.This choice determines the size and shape of the canvas on which you'll build your app.

Po vykonaní tohto výberu, môžete vykonať aj niekoľko viac možností vyberiete súbor > nastavenia aplikácie > veľkosť a orientácia obrazovky.After you make that choice, you can make a few more choices if you select File > App settings > Screen size + orientation. Môžete vybrať výšku alebo šírku a veľkosť obrazovky (len pre tablet).You can choose portrait or landscape orientation and screen size (tablet only). Môžete tiež zamknúť alebo odomknúť pomer strán a podporu zariadení otočenia (alebo nie).You can also lock or unlock the aspect ratio and support device rotation (or not).

Tieto možnosti sú základom každú inú možnosť nastavíte pri navrhovaní rozloženia obrazovky.Those choices underlie every other choice you make as you design screen layouts. Ak váš aplikácia funguje v zariadení s inou veľkosťou alebo na webe, celý rozloženie váhy na celú obrazovku, v ktorom je aplikácia spustená.If your app runs on a device of a different size or on the web, your entire layout scales to fit the screen where the app is running. Ak je aplikácia určená na telefóne beží v okne prehliadača veľký, napríklad aplikácia škály na vyrovnanie a vyzerá nadrozmerné pre svoj priestor.If an app designed for a phone runs in a large browser window, for example, the app scales to compensate and looks oversized for its space. Aplikácia nemôže využívať ďalšie pixelov sa zobrazia ďalšie ovládacie prvky alebo viac obsahu.The app can't take advantage of the additional pixels by showing more controls or more content.

Ak chcete vytvoriť flexibilné rozloženie, ovládacie prvky môžete reagovať na rôznych zariadeniach alebo okno veľkostiach, vďaka čomu k dispozícii rôzne možnosti si myslíte, že prirodzenejším.If you create a responsive layout, controls can respond to different devices or window sizes, making various experiences feel more natural. Ak chcete dosiahnuť flexibilné rozloženie, upraviť niektoré nastavenia a zapisovanie výrazov vo vašej aplikácii.To achieve responsive layout, you adjust some settings and write expressions throughout your app.

Zakázať mierku, aby sa zmestiliDisable Scale to fit

Každú obrazovku môžete nakonfigurovať tak, aby jej vlastné rozloženie sa prispôsobí skutočný priestor, v ktorom je aplikácia spustená.You can configure each screen so that its layout adapts to the actual space in which the app is running.

Aktivujete odozvy vypnutím aplikácie mierku, aby sa zmestili nastavenie, ktoré je predvolene zapnutá.You activate responsiveness by turning off the app's Scale to fit setting, which is on by default. Keď zapnete toto nastavenie vypnete, môžete aj vypnúť Zamknúť pomer strán pretože navrhovaní už nie je pre konkrétnu obrazovku tvar.When you turn this setting off, you also turn off Lock aspect ratio because you're no longer designing for a specific screen shape. (Môžete aj naďalej určiť či aplikácie podporuje otočenia zariadenia.)(You can still specify whether your app supports device rotation.)

Zakázať mierky prispôsobiť nastavenie

Chcete vytvoriť svoju aplikáciu ako flexibilný, musíte vykonať ďalšie kroky, ale táto zmena je prvým krokom k vytváraniu odozva je to možné.To make your app responsive, you must take additional steps, but this change is the first step toward making responsiveness possible.

Princípy aplikácie a obrazovka rozmeryUnderstand app and screen dimensions

Chcete, aby vaše aplikácie rozložení reagovať na zmeny v dimenziách obrazovky, budete písať vzorce, ktoré používajú šírka a výška vlastnosti obrazovky.To make your app's layouts respond to changes in the screen dimensions, you'll write formulas that use the Width and Height properties of the screen. Ak chcete zobraziť tieto vlastnosti, otvorte aplikáciu v PowerApps Studio, a potom vyberte obrazovku.To show these properties, open an app in PowerApps Studio, and then select a screen. Predvolený vzorce pre tieto vlastnosti sa zobrazia na rozšírené kartu na pravej table.The default formulas for these properties appear on the Advanced tab of the right-hand pane.

Width = Max(App.Width; App.DesignWidth)Width = Max(App.Width; App.DesignWidth)

Výška = Max(App.Height; App.DesignHeight)Height = Max(App.Height; App.DesignHeight)

Tieto vzorce odkazovať na šírka, výšku, DesignWidth, a DesignHeight vlastnosti aplikácie.These formulas refer to the Width, Height, DesignWidth, and DesignHeight properties of the app. Aplikácia šírka a výška vlastnosti zodpovedajú rozmery zariadenia alebo prehliadač okno, v ktorom je spustený svoju aplikáciu.The app's Width and Height properties correspond to the dimensions of the device or browser window in which your app is running. Ak používateľ zmení veľkosť okna prehliadača (alebo otáča zariadenia, ak ste vypli zachovať orientáciu), hodnoty týchto vlastností dynamicky.If the user resizes the browser window (or rotates the device if you've turned off Lock orientation), the values of these properties change dynamically. Vzorce na obrazovke šírka a výška vlastnosti sa nanovo vyhodnotí pri zmene týchto hodnôt.The formulas in the screen's Width and Height properties are reevaluated when these values change.

DesignWidth a DesignHeight vlastnosti pochádzajú z dimenzie, ktoré ste zadali v veľkosť a orientácia obrazovky table nastavenia aplikácie .The DesignWidth and DesignHeight properties come from the dimensions that you specify in the Screen size + orientation pane of App settings. Napríklad, ak vyberiete rozloženie pre telefóny v orientácii na výšku DesignWidth je 640, a DesignHeight je 1136.For example, if you select the phone layout in portrait orientation, DesignWidth is 640, and DesignHeight is 1136.

Ako slúžia vo vzorcoch pre obrazovku šírka a výšku vlastnosti, ktoré si môžete predstaviť DesignWidth a DesignHeight ako minimálna dimenzie, ktorého budeme navrhovať aplikácie.As they're used in the formulas for the screen's Width and Height properties, you can think of DesignWidth and DesignHeight as the minimum dimensions for which you'll design the app. Ak skutočnej oblasti sú k dispozícii do vašej aplikácie je ešte menšia než toto minimálne rozmery, vzorcov obrazovka šírka a výška vlastnosti zaistiť, aby ich hodnoty nebudú menšie ako minimálne.If the actual area available to your app is even smaller than these minimum dimensions, the formulas for the screen's Width and Height properties ensure that their values won't become any smaller than minimums. V takom prípade musí používateľ prejdite na zobrazenie celý obsah obrazovky.In that case, the user must scroll to view all of the screen's content.

Po vytvorení aplikácie DesignWidth a DesignHeight, nebude (vo väčšine prípadov) musíte zmeniť predvolené vzorce na jednotlivých obrazovkách šírka a Výška vlastnosti.After you establish your app's DesignWidth and DesignHeight, you won't (in most cases) need to change default formulas for each screen's Width and Height properties. Neskôr, táto téma popisuje prípady, v ktorých možno budete chcieť prispôsobiť tieto vzorce.Later, this topic discusses cases in which you might want to customize these formulas.

Použitie vzorca pre dynamické rozloženieUse formulas for dynamic layout

Ak chcete vytvoriť responzívny dizajn, vyhľadajte a pomocou vzorcov namiesto absolútne hodnoty (konštantné) súradníc zmeniť veľkosť jednotlivých ovládacích prvkov.To create a responsive design, you locate and size each control by using formulas instead of absolute (constant) coordinate values. Tieto vzorce express každý ovládací prvok polohu a veľkosť ide o celkovú veľkosť obrazovky alebo vzhľadom k ďalšie ovládacie prvky na obrazovke.These formulas express each control's position and size in terms of the overall screen size or relative to other controls on the screen.

Dôležité

Po napísaní vzorce pre X, Y, šírka a výška vlastnosti ovládacieho prvku sa prepíšu vzorcov konštantné hodnoty, ak ste následne presuňte ovládací prvok v editore plátna.After you write formulas for the X, Y, Width and Height properties of a control, your formulas will be overwritten with constant values if you subsequently drag the control in the canvas editor. Keď začnete používať vzorce na dosiahnutie dynamické rozloženie, nemali by ste posunutím ovládacích prvkov.When you start to use formulas to achieve dynamic layout, you should avoid dragging controls.

V prípade najjednoduchšie jeden ovládací prvok vyplní celú obrazovku.In the simplest case, one control fills an entire screen. Ak chcete vytvoriť tento efekt, nastavte vlastnosti ovládacieho prvku na tieto hodnoty:To create this effect, set the control's properties to these values:

VlastnosťProperty ValueValue
XX 0
YY 0
ŠírkaWidth Parent.Width
VýškaHeight Parent.Height

Tieto vzorce pomocou nadradenej operátor.These formulas use the Parent operator. V prípade ovládacieho prvku priamo na obrazovku, nadradenej odkazuje na obrazovke.For a control placed directly on a screen, Parent refers to the screen. Tieto hodnoty vlastnosti ovládacieho prvku sa zobrazí v ľavom hornom rohu obrazovky (0, 0) a má rovnaké šírka a výška ako na obrazovke.With these property values, the control appears in the upper-left corner of the screen (0, 0) and has the same Width and Height as the screen.

Neskôr v tejto téme sa budeme uplatňovať tieto zásady (a nadradenej operátor) pozíciu ovládacie prvky vo vnútri iných kontajnery, ako je napríklad Galéria, skupinu ovládacích prvkov a komponenty.Later in this topic, you'll apply these principles (and the Parent operator) to position controls inside other containers, such as galleries, group controls, and components.

Ako alternatívu ovládacieho prvku môžete vyplniť len hornú polovicu obrazovky.As an alternative, the control can fill only the top half of the screen. Ak chcete vytvoriť tento efekt, nastavte výška na hodnotu Parent.Height / 2, a nechajte iných vzorcoch nezmenené.To create this effect, set the Height property to Parent.Height / 2, and leave the other formulas unchanged.

Ak chcete druhý ovládací prvok na vyplnenie spodnej polovici tej istej obrazovke, môže trvať aspoň dva ďalšie prístupy skonštruovania jej vzorce.If you want a second control to fill the bottom half of the same screen, you can take at least two other approaches to constructing its formulas. Z dôvodu zjednodušenia môže trvať tento prístup:For simplicity, you might take this approach:

Ovládací prvokControl VlastnosťProperty VzorecFormula
HornýUpper XX 0
HornýUpper YY 0
HornýUpper ŠírkaWidth Parent.Width
HornýUpper VýškaHeight Parent.Height / 2
DolnéLower XX 0
DolnéLower YY Parent.Height / 2
DolnéLower ŠírkaWidth Parent.Width
DolnéLower VýškaHeight Parent.Height / 2

Horné a Dolné ovládacieho prvku

Táto konfigurácia by ste dosiahli za následok, že chcete, aby, ale budete musieť upraviť každý vzorec, ak ste zmenili názor o relatívnej veľkosti ovládacích prvkov.This configuration would achieve the effect that you want, but you'd need to edit each formula if you changed your mind about the relative sizes of the controls. Napríklad, môžete sa rozhodnúť, že horného ovládacieho prvku by mal zaberať iba horný tretinu obrazovky s ovládacím prvkom dole pri vypĺňaní Dolné 2 / 3.For example, you might decide that the top control should occupy only the top one-third of the screen, with the bottom control filling the lower two-thirds.

Ak chcete vytvoriť tento efekt, budete musieť aktualizovať výšku vlastnosť horný ovládací prvok a Y a výška vlastnosti Dolné ovládacieho prvku.To create that effect, you'd need to update the Height property of the Upper control and the Y and Height properties of the Lower control. Namiesto toho písať vzorce pre Dolné ovládací prvok z hľadiska horný ovládacieho prvku (a samotný), ako v tomto príklade:Instead, consider writing the formulas for the Lower control in terms of the Upper control (and itself), as in this example:

Ovládací prvokControl VlastnosťProperty VzorecFormula
HornýUpper XX 0
HornýUpper YY 0
HornýUpper ŠírkaWidth Parent.Width
HornýUpper VýškaHeight Parent.Height / 2
DolnéLower XX 0
DolnéLower YY Upper.Y + Upper.Height
DolnéLower ŠírkaWidth Parent.Width
DolnéLower VýškaHeight Parent.Height - Lower.Y

Horné a Dolné ovláda relatívnej veľkosti

Pomocou týchto vzorcov na mieste, potrebujete len zmenu výška vlastnosť horný ovládací prvok vyjadriť zlomok rôzne výška obrazovky.With these formulas in place, you need only change the Height property of the Upper control to express a different fraction of the height of the screen. Dolné ovládací prvok automaticky premiestni a zmení veľkosť na zohľadnenie zmenu.The Lower control automatically moves and resizes to account for the change.

Môžete použiť tieto vzorca vzory pre vyjadrenie bežné rozloženie pre vzťahy medzi ovládacieho prvku s názvom C, a jeho nadradeného prvku alebo ovládací prvok súrodenec, s názvom D.You can use these formula patterns for expressing common layout relationships between a control, named C, and its parent or a sibling control, named D.

Vzťah medzi C a nadradenej položkyRelationship between C and its parent VlastnosťProperty VzorecFormula Znázornenie prepočítaniaIllustration
C vyplní šírku nadradeného prvku, s maržou NC fills width of parent, with a margin of N XX N Príklad C plniace šírka nadradenej položky
ŠírkaWidth Parent.Width - (N * 2)
C vyplní výška nadradeným s maržou NC fills height of parent, with a margin of N YY N Príklad C výška plnenia nadradenej položky
VýškaHeight Parent.Height - (N * 2)
C v súlade s pravým okrajom nadradeným okraja NC aligned with right edge of parent, with margin of N XX Parent.Width - (C.Width + N) Príklad C zarovnanie v prehliadači edge nadradenej položky
C v súlade s spodnú časť nadradeným okraja NC aligned with bottom edge of parent, with margin of N YY Parent.Height - (C.Height + N) Príklad C zarovnanie v prehliadači edge nadradenej položky
C vodorovne na stred na nadradenýC centered horizontally on parent XX (Parent.Width - C.Width) / 2 Príklad C vodorovne na stred na nadradený
C zvisle na stred na nadradenýC centered vertically on parent YY (Parent.Height - C.Height) / 2 Príklad C zvisle na stred na nadradený
Vzťah medzi C a DRelationship between C and D VlastnosťProperty VzorecFormula Znázornenie prepočítaniaIllustration
C vodorovne zladené s D a s rovnakou šírkou ako DC horizontally aligned with D and the same width as D XX D.X Príklad vzoru
ŠírkaWidth D.Width
C vertikálne zarovnaný s D a rovnako vysoké, ako DC vertically aligned with D and same height as D YY D.Y Príklad vzoru
VýškaHeight D.Height
Pravý okraj C v súlade s pravým okrajom DRight edge of C aligned with right edge of D XX D.X + D.Width - C.Width Príklad vzoru
Dolný okraj C v súlade s dolným okrajom DBottom edge of C aligned with bottom edge of D YY D.Y + D.Height - C.Height Príklad vzoru
C vodorovne na stred relatívne vzhľadom na DC centered horizontally relative to D XX D.X + (D.Width - C.Width) / 2 Príklad vzoru
C zvisle na stred relatívne vzhľadom na DC centered vertically relative to D YY D.Y + (D.Height - C.Height) /2 Príklad vzoru
C umiestnený napravo od D s medzerou NC positioned to the right of D with a gap of N XX D.X + D.Width + N Príklad vzoru
C umiestnený pod D s medzera NC positioned below D with a gap of N YY D.Y + D.Height + N Príklad vzoru
C vyplní medzeru medzi D a pravým okrajom nadradenejC fills space between D and right edge of parent XX D.X + D.Width Príklad vzoru
ŠírkaWidth Parent.Width - C.X
C vyplní medzeru medzi D a dolný okraj nadradenej položkyC fills space between D and bottom edge of parent YY D.Y + D.Height Príklad vzoru

Hierarchické usporiadanieHierarchical layout

Ako vytvoríte obrazovky, ktoré obsahujú ďalšie ovládacie prvky, bude to pohodlnejšie (alebo dokonca by bolo potrebné) na umiestnenie ovládacích prvkov vzhľadom k nadradený ovládací prvok, skôr ako vo vzťahu k obrazovke alebo ovládacom prvku súrodenec.As you construct screens that contain more controls, it will become more convenient (or even necessary) to position controls relative to a parent control, rather than relative to the screen or a sibling control. Tým, že organizuje svoje ovládacích prvkov do hierarchické štruktúry, si môžete uľahčiť vzorcov napísať a udržiavať.By organizing your controls into a hierarchical structure, you can make your formulas easier to write and maintain.

GalérieGalleries

Ak použijete galériu vo vašej aplikácii, budete musieť rozložiť ovládacie prvky v rámci šablóny galérie.If you use a gallery in your app, you'll need to lay out controls within the gallery's template. Tieto ovládacie prvky môžete umiestniť podľa písania vzorcov, ktoré používajú nadradenej operátor, ktorý sa týka do šablóny galérie.You can position these controls by writing formulas that use the Parent operator, which will refer to the gallery template. Vzorce na ovládacie prvky v galérii šablón, pomocou Parent.TemplateHeight a Parent.TemplateWidth vlastnosti; Nepoužívajte Parent.Width a Parent.Height, ktoré odkazujú na celkovú veľkosť galérie.In the formulas on controls within a gallery template, use the Parent.TemplateHeight and Parent.TemplateWidth properties; don't use Parent.Width and Parent.Height, which refer to the overall size of the gallery.

Zvislá Galéria zobrazuje šablóny šírky a výšky

Ovládací prvok rozšírená skupinaEnhanced Group control

Môžete použiť experimentálna funkcia rozšírená skupina ovládacieho prvku, ako nadradený ovládací prvok.You can use an experimental feature, the enhanced Group control, as a parent control. Ak chcete túto funkciu zapnúť, vyberte súbor > nastavenia aplikácie > rozšírené nastavenia.To turn this feature on, select File > App settings > Advanced settings.

Vezmime si príklad hlavičky v hornej časti obrazovky.Consider the example of a header at the top of a screen. Je bežné mať hlavička s názvom a niekoľko ikon, pomocou ktorého môžu používatelia pracovať.It's common to have a header with a title and several icons with which your users can interact. Môžete vytvoriť hlavičku, pomocou vylepšený skupina ovládať, ktoré obsahujú označenie ovládací prvok a dve ikonu ovládacích prvkov:You can construct such a header using the enhanced Group control, containing a Label control and two Icon controls:

Hlavička príklad pomocou skupiny

Nastavte vlastnosti pre tieto ovládacie prvky na tieto hodnoty:Set the properties for these controls to these values:

VlastnosťProperty HlavičkaHeader MenuMenu ZavrieťClose Title (Názov)Title
XX 0 0 Parent.Width - Close.Width Menu.X + Menu.Width
YY 0 0 0 0
ŠírkaWidth Parent.Width Parent.Height Parent.Height Close.X - Title.X
VýškaHeight 64 Parent.Height Parent.Height Parent.Height

Pre Hlavička ovládacieho prvku, Parent odkazuje na obrazovke.For the Header control, Parent refers to the screen. U ostatných Parent odkazuje na Hlavička ovládacieho prvku.For the others, Parent refers to the Header control.

Napísané tieto vzorce môžete upraviť veľkosť alebo pozícia Hlavička ovládací prvok tak, že zmeníte vzorce pre jeho vlastnosti.Having written these formulas, you can adjust the size or position of the Header control by changing the formulas for its properties. Veľkosť a umiestnenie podriadené ovládacie prvky sa automaticky upraví zodpovedajúcim spôsobom.The sizes and positions of the child controls will automatically adjust accordingly.

SúčastiComponents

Ak použijete iný experimentálna funkcia s názvom súčasti, môžete vytvoriť stavebné bloky a opätovne použiť vo vašej aplikácii.If you use another experimental feature, named Components, you can construct building blocks and reuse them throughout your app. Podobne ako pri položke skupina ovládacieho prvku, ovládacie prvky, ktoré ste vykonali v rámci súčasť by mala vychádzať ich polohu a veľkosť vzorce Parent.Width a Parent.Height, ktoré odkazujú na veľkosť komponent.As with the Group control, the controls that you place within a component should base their position and size formulas on Parent.Width and Parent.Height, which refer to the size of the component. Ďalšie informácie: Vytvorenie súčasť.More information: Create a component.

Prispôsobenie rozloženia pre zariadenie veľkosti a orientácieAdapting layout for device size and orientation

Naučili ste doteraz vykonali, ako sa používajú vzorce zmeniť veľkosť každý ovládací prvok v odpovedi dostupného miesta, zatiaľ čo so sledovaním ovládacie prvky zarovnajú podľa seba navzájom.So far, you've learned how to use formulas to change each control's size in response to the available space, while keeping controls aligned relative to each other. Ale pravdepodobne chcete alebo potrebujete vykonať zásadnejšie zmeny rozloženia v reakcii na iné zariadenie veľkosti a orientácie.But you might want or need to make more substantial layout changes in response to different device sizes and orientations. Pri otočení zariadenia na výšku s orientáciou na šírku, napríklad budete chcieť prepnúť z zvislé rozloženie na vodorovnú one.When a device is rotated from portrait to landscape orientation, for example, you might want to switch from a vertical layout to a horizontal one. Na väčších zariadení, môžete prezentovať viac obsahu alebo usporiadanie ju, aby zabezpečili atraktívnejší rozloženie.On a larger device, you can present more content or rearrange it to provide a more appealing layout. V menších zariadení, budete musieť rozdeliť obsah na viacerých obrazovkách.On a smaller device, you might need to split up content across multiple screens.

Orientácia zariadeniaDevice orientation

Predvolený vzorce pre obrazovku šírka a výška vlastnosti, ako túto tému, je to popísané vyššie, nebude nevyhnutne zabezpečenie dobrého výkonu Ak používateľ otáča zariadení.The default formulas for a screen's Width and Height properties, as this topic described earlier, won't necessarily provide a good experience if a user rotates a device. Môžete napríklad aplikácia je určený pre telefón v orientácii na výšku má DesignWidth 640 a DesignHeight z 1136.For example, an app designed for a phone in portrait orientation has a DesignWidth of 640 and a DesignHeight of 1136. Tej istej aplikácie v telefóne v orientácii na šírku bude mať hodnoty týchto vlastností:The same app on a phone in landscape orientation will have these property values:

  • Obrazovka šírka je nastavená na Max(App.Width; App.DesignWidth).The screen's Width property is set to Max(App.Width; App.DesignWidth). Aplikácia šírka (1136) je väčšia než jeho DesignWidth (640), takže vzorec sa vyhodnotí ako 1136.The app's Width (1136) is larger than its DesignWidth (640), so the formula evaluates to 1136.
  • Obrazovka výšku je nastavená na Max(App.Height; App.DesignHeight).The screen's Height property is set to Max(App.Height; App.DesignHeight). Aplikácia výšku (640) je menšia ako jeho DesignHeight (1136), takže vzorec sa vyhodnotí ako 1136.The app's Height (640) is smaller than its DesignHeight (1136), so the formula evaluates to 1136.

Obrazovka výška z 1136 a zariadenie výška (v tomto orientácia) 640, používateľ musí navigačné obrazovku zvisle na zobrazenie všetkých jeho obsah, ktorý nemusí byť skúsenosti, ktoré chcete.With a screen Height of 1136 and a device height (in this orientation) of 640, the user must scroll the screen vertically to show all of its content, which might not be the experience that you want.

Prispôsobiť obrazovke šírka a výška vlastností zariadení orientácia, môžete použiť tieto vzorce:To adapt the screen's Width and Height properties to the device orientation, you can use these formulas:

Width = Max(App.Width; If(App.Width < App.Height; App.DesignWidth; App.DesignHeight))Width = Max(App.Width; If(App.Width < App.Height; App.DesignWidth; App.DesignHeight))

Výška = Max(App.Height; If(App.Width < App.Height; App.DesignHeight; App.DesignWidth))Height = Max(App.Height; If(App.Width < App.Height; App.DesignHeight; App.DesignWidth))

Tieto vzorce vymeniť aplikácie DesignWidth a DesignHeight hodnôt, na základe toho, či zariadenie šírke menej než jeho výška (orientácii na výšku) alebo viac než jeho výška (šírku) .These formulas swap the app's DesignWidth and DesignHeight values, based on whether the device's width is less than its height (portrait orientation) or more than its height (landscape orientation).

Potom môžete upraviť obrazovka šírka a výška vzorce, môžete tiež zmeniť usporiadanie ovládacie prvky v rámci obrazovky pre lepšie využitie dostupného miesta.After you adjust the screen's Width and Height formulas, you might also want to rearrange controls within your screen to better use the available space. Napríklad, ak každá z dvoch ovládacích prvkov zaberá polovicu obrazovky, môže stack ich zvisle na výšku ale usporiadať ich vedľa seba v zobrazení na šírku.For example, if each of two controls occupies half of the screen, you might stack them vertically in portrait but arrange them side by side in landscape.

Môžete použiť obrazovka orientácia vlastnosť či obrazovky je orientovaný vodorovne alebo zvisle.You can use the screen's Orientation property to determine whether the screen is oriented vertically or horizontally.

Poznámka

Pri orientácii na šírku, horný a Dolné ako ľavý a pravý ovládacie prvky sa zobrazia ovládacie prvky.In landscape orientation, the Upper and Lower controls appear as left and right controls.

Ovládací prvokControl VlastnosťProperty VzorecFormula
HornýUpper XX 0
HornýUpper YY 0
HornýUpper ŠírkaWidth If(Parent.Orientation = Layout.Vertical; Parent.Width; Parent.Width / 2)
HornýUpper VýškaHeight If(Parent.Orientation = Layout.Vertical; Parent.Height / 2; Parent.Height)
DolnéLower XX If(Parent.Orientation = Layout.Vertical; 0; Upper.X + Upper.Width)
DolnéLower YY If(Parent.Orientation = Layout.Vertical; Upper.Y + Upper.Height; 0)
DolnéLower ŠírkaWidth Parent.Width - Lower.X
DolnéLower VýškaHeight Parent.Height - Lower.Y

výrazy prispôsobiť orientácii na výšku

výrazy prispôsobiť orientácii na šírku

Veľkosti obrazovky a bodov prerušeniaScreen sizes and breakpoints

Môžete upraviť vaše rozloženie založené na veľkosti zariadenia.You can adjust your layout based on the size of the device. Obrazovka veľkosť vlastnosť klasifikuje Aktuálna veľkosť zariadenia.The screen's Size property classifies the current device size. Veľkosť je kladné celé číslo "; typ veľkosti obrazovky poskytuje pomenované konštanty pomôcť s čitateľnosti.The size is a positive integer; the ScreenSize type provides named constants to help with readability. Táto tabuľka obsahuje zoznam konštanty:This table lists the constants:

ReferenčnáConstant ValueValue Typické zariadenie typu (pomocou predvoleného nastavenia aplikácie)Typical device type (using default app settings)
ScreenSize.SmallScreenSize.Small 11 TelefónPhone
ScreenSize.MediumScreenSize.Medium 22 Tablet, uchovať zvisloTablet, held vertically
ScreenSize.LargeScreenSize.Large 33 Tablet, uchovať vodorovneTablet, held horizontally
ScreenSize.ExtraLargeScreenSize.ExtraLarge 44 Stolného počítačaDesktop computer

Pomocou týchto veľkostí rozhodovať o rozloženia vašej aplikácie.Use these sizes to make decisions about your app's layout. Napríklad, ak chcete ovládací prvok ako skrytých v veľkosti telefónu zariadení ale viditeľný iným spôsobom, by ste mohli nastaviť ovládacieho prvku Visible nastavte na tento vzorec:For example, if you want a control to be hidden on a phone-sized device but visible otherwise, you could set the control's Visible property to this formula:

Parent.Size >= ScreenSize.Medium

Tento vzorec sa vyhodnotí ako true veľkosť v prípade stredne veľkých a väčších a false inak.This formula evaluates to true when the size is medium or larger and false otherwise.

Ak chcete ovládací prvok zaberajú zlomok rôzne šírka obrazovky založené na veľkosť obrazovky, nastaviť ovládací prvok šírka na tento vzorec:If you want a control to occupy a different fraction of the screen width based on the screen size, set the control's Width property to this formula:

Parent.Width *  
    Switch(Parent.Size;  
        ScreenSize.Small; 0,5;  
        ScreenSize.Medium; 0,3;  
        0,25)

Tento vzorec Nastaví šírku ovládacieho prvku na polovicu obrazovky šírku na malej obrazovke, tri desiatky šírku obrazovky na obrazovke, stredne veľké a štvrtinu šírky obrazovky na všetkých ostatných obrazovkách.This formula sets the control's width to half of the screen width on a small screen, three-tenths of the screen width on a medium screen, and a quarter of the screen width on all other screens.

Vlastné bodov prerušeniaCustom breakpoints

Obrazovka veľkosti vlastnosť sa vypočítava na základe porovnania na obrazovke šírka vlastnosť na hodnoty v aplikácii SizeBreakpoints vlastnosti.The screen's Size property is calculated by comparing the screen's Width property to the values in the app's SizeBreakpoints property. Táto vlastnosť je tabuľka s jedným stĺpcom čísel, ktoré označuje šírku bodov prerušenia, ktoré oddeľujú pomenované veľkostí:This property is a single-column table of numbers that indicate the width breakpoints that separate the named screen sizes:

V aplikácii pre tablet alebo web, predvolená hodnota v aplikácii SizeBreakpoints vlastnosti sú [600; 900; 1200].In an app created for tablet or web, the default value in the app's SizeBreakpoints property are [600; 900; 1200]. V aplikácii pre telefóny, hodnota je [1 200; 1 800; 2 400].In an app created for phones, the value is [1200; 1800; 2400]. (Hodnoty pre aplikácie pre telefóny sú zdvojnásobil, pretože tieto aplikácie používať súradnice, ktoré sú efektívne double súradnice používali v iných aplikáciách.)(The values for phone apps are doubled because such apps use coordinates that are effectively double the coordinates used in other apps.)

predvolené hodnoty App.SizeBreakpoints vlastnosti

Bodov prerušenia svoju aplikáciu môžete prispôsobiť tak, že zmeníte hodnoty v aplikácii SizeBreakpoints vlastnosti.You can customize your app's breakpoints by changing the values in the app's SizeBreakpoints property. Vyberte aplikácie v stromovom zobrazení, vyberte SizeBreakpoints vo vlastnosti zoznam, a potom upravte hodnoty v riadku vzorcov.Select App in the tree view, select SizeBreakpoints in the property list, and then edit the values in the formula bar. Môžete vytvoriť koľko bodov prerušenia z mnohých ako vaša aplikácia potrebuje, ale iba veľkosti 1 až 4 zodpovedá pomenované veľkostí.You can create as many breakpoints as your app needs, but only sizes 1 through 4 correspond to named screen sizes. Vo vzorcoch môžete odkazovať na veľkosti nad rámec ExtraLarge podľa ich číselných hodnôt (5, 6, a tak ďalej).In formulas, you can refer to sizes beyond ExtraLarge by their numeric values (5, 6, and so forth).

Môžete tiež zadať menšieho počtu bodov prerušenia.You can also specify fewer breakpoints. Napríklad aplikácie môže byť potrebné len tri veľkosti (dvoch bodov prerušenia), tak je to možné veľkostí bude malé, stredné alebo veľké.For example, your app might need only three sizes (two breakpoints), so the possible screen sizes will be Small, Medium, and Large.

Známe obmedzeniaKnown limitations

Vytváranie obsahu plátna nereaguje na zmenu veľkosti vzorce vytvorené.The authoring canvas doesn't respond to the sizing formulas created. Otestovať flexibilné správanie, Uložiť a publikovať aplikácie a potom ho otvorte v zariadení alebo v prehliadači windows rôzne veľkosti a orientácie.To test responsive behavior, save and publish your app, and then open it on devices or in browser windows of various sizes and orientations.

Ak budete písať výrazoch a vzorcoch v X, Y, šírka, a výška vlastnosti ovládacieho prvku, budete prepísať tých, výrazy alebo vzorce, ak neskôr presuňte ovládací prvok na iné miesto alebo veľkosť ovládacieho prvku presunutím jej orámovania.If you write expressions or formulas in the X, Y, Width, and Height properties of a control, you'll overwrite those expressions or formulas if you later drag the control to a different location or resize the control by dragging its border.