Модельге негізделген бағдарламаға арналған реттелетін бет жасау

Мақала
04/25/2023

Бұл мақалада модельге негізделген бағдарламада пайдалану үшін реттелетін бетті жасау бойынша кеңестер берілген.

Маңызды

Реттелетін беттер — бұл өнімнің елеулі өзгерістері бар жаңа мүмкіндік және онда қазіргі уақытта Реттелетін беттің белгілі мәселелері бөлімінде көрсетілген бірнеше белгілі шектеулері бар.

Реттелетін беттегі басқару элементтері

Реттелетін бетті жасау қазіргі уақытта кенеп бағдарламасының басқару элементтерінің ішкі жинағына қолдау көрсетеді. Төмендегі кестеде ағымдағы уақытта қолдау көрсетілетін басқару элементтерінің тізімі келтірілген.

Басқару элементі	Басқару түрі	Ескертпелер
Белгі¹	Дисплей
Мәтін өрісі¹	Кіріс
Күнді таңдау құралы¹	Кіріс
Түймешік¹	Кіріс
Аралас тізім¹	Кіріс
Құсбелгі¹	Кіріс
Ауыстырып‑қосқыш¹	Кіріс
Радио тобы¹	Кіріс
Жүгірткі¹	Кіріс
Баға¹	Кіріс
Тік контейнер	Құрылымы	Көлденең орналасуға жауап беретін жаңа контейнер
Көлденең контейнер	Құрылымы	Көлденең орналасуға жауап беретін жаңа контейнер
Пішімделген мәтін өңдегіші	Кіріс
Галерея	Тізім
Icon	Мультимедиа
Image	Мультимедиа
Пішінді өңдеу	Кіріс
Көрсеті пішіні	Кіріс
Код құрамдастары	Реттемелі	Реттелетін бетке код құрамдастарын қосу
Кенеп құрамдастары (алдын ала қарау нұсқасы)	Реттемелі	Реттелетін бетке кенеп құрамдастарын қосу

¹ Басқару элементі — бұл жаңа заманауи басқару элементі. Басқару элементі Teams жүйесіндегі кенеп бағдарламаларына ендірілген. Басқару элементі Power Apps Component Framework бағдарламасындағы Fluent UI кітапханасына негізделген.

Реттелетін бетке арналған реттелетін құрамдастар қолдауы

Ортаға төмен кодты (кенеп құрамдастары) және кәсіби кодты (код құрамдастары) реттелетін UX құрамдастарын қосуға және оларды барлық жасаушыларға қолжетімді етуге болады. Реттелетін бетке тән UX кеңейтімділігі туралы мақалалар үшін модельге негізделген бағдарламаға арналған реттелетін бетке кенеп құрамдастарын қосу және модельге негізделген бағдарламаға арналған реттелетін бетке код құрамдастарын қосу бөлімдерін қараңыз.

Жалпы алғанда, төмен кодты кеңейтімділік әдісін құрастыру, тексеру оңай және техникалық қызмет көрсету бағасы төмен. Біз алдымен кенеп құрамдастарын бағалауды, содан кейін код құрамдастарын күрделі және кеңейтілген теңшеу қажет болған жағдайда ғана қолдануды ұсынамыз.

Қосымша ақпарат:

Контейнерді басқару элементі арқылы жауап беретін орналасуды қосу

Жауап беретін реттелетін бет орналасулары Көлденең орналасу контейнері және Тік орналасу контейнері басқару элементтерінің иерархиясын жасау арқылы анықталады. Бұл басқару элементтерін Кірістіру қойыншасындағы Орналасу бетіндегі кенеп бағдарламасының құрастырушысынан табуға болады.

Бет деңгейіндегі айналдыру жолақтарын болдырмау және тік негізгі айналдыру жолағын пайдалану үшін Бағдарлама нысанында ең төменгі экран биіктігі мен енін орнатыңыз.

MinScreenHeight=200
MinScreenWidth=200

Оған қоса реттелетін бет дизайнының өлшемін реттеуге болады, ол үшін Параметрлер > Дисплей тармағына өтіп, Өлшем параметрін Реттелетін деп орнатыңыз. Содан кейін Ені және Биіктігі параметрлерін ені 1080 және биіктігі 768 сияқты әдеттегі жұмыс үстелінің реттелетін бет өлшеміне орнатыңыз. Экранға басқару элементтері қосылғаннан кейін, бұл параметрді өзгерту кейбір орналасу сипаттарын қалпына келтіруі мүмкін.

Толық кеңістікті толтыру және қолжетімді кеңістік негізінде өлшемін өзгерту үшін ең жоғарғы контейнерді орнатыңыз.

X=0
Y=0
Width=Parent.Width
Height=Parent.Height

Икемді биіктіктегі контейнердің көлденең орауы

Жұмыс үстелінен тар енге дейін реттелетін беттерді қолдау үшін бұл сипаттарды икемді биіктіктегі көлденең контейнерде қосыңыз. Бұл параметрлер болмаса, бет тар болған кезде бет басқару элементтерін қиып алады.

Direction=Horizontal
FlexibleHeight=true
Justify=Stretch
Align=Stretch
VerticalOverflow=Scroll
Wrap=True

Дәл осы контейнер астындағы еншілес контейнерлер немесе басқару элементтері бетті 300 пиксель еніне сыйғызуға мүмкіндік беретін минималды енге орнатылуы керек. Контейнердегі немесе басқару элементіндегі толтыруды, сондай-ақ негізгі контейнерлерді қарастырыңыз.

Икемді енді контейнерді тік орау

Жұмыс үстелінен тар енге дейін реттелетін беттерді қолдау үшін бұл сипаттарды икемді ені бар тік контейнерде қосыңыз. Бұл параметрлер болмаса, бет тар болған кезде бет басқару элементтерін қиып алады.

Direction=Vertical
FlexibleWidth=true
Justify=Stretch
Align=Stretch
HorizontalOverflow=Scroll
Wrap=True

Дәл осы контейнер астындағы еншілес контейнерлер немесе басқару элементтері бетті 300 пиксель еніне сыйғызуға мүмкіндік беретін минималды биіктікке орнатылуы керек. Контейнердегі немесе басқару элементіндегі толтыруды, сондай-ақ негізгі контейнерлерді қарастырыңыз.

Қосымша ақпарат: Жауапты орналасу құрастыру.

Бекітілген үстіңгі деректемесі, икемді негізгі мәтіні, бекітілген төменгі деректемесін бар тік контейнер

Тік контейнер бетінде Туралау (көлденең) параметрін Созу опциясына орнатыңыз
Үш Көлденең контейнер басқару элементін басты Тік контейнер басқару элементіне енгізіңіз
Бірінші және үшінші еншілес көлденең контейнер басқару элементтерінде Созу биіктігі параметрін өшіріңіз және биіктікті қажетті орынға дейін азайтыңыз, мысалы, Биіктігі=80.

Екі жұп еншілес контейнері бар көлденең контейнер

Басты көлденең контейнерде Туралау (тік) параметрін Созу опциясына орнатыңыз.
Екі Тік контейнер басқару элементін басты Көлденең контейнер басқару элементіне енгізіңіз.

Модельге негізделген бағдарлама басқару элементтеріне сәйкестендіру үшін реттелетін бет басқару элементтерін стильдеу

Заманауи бағдарлама құрастырушысынан реттелетін бетті жасау арқылы бұл мүмкіндіктер әдепкі мәндерді қолданады.

Реттелетін бетке арналған тақырып. Реттелетін бетте қолданылатын басқару элементтерінің тақырып мәндер Бірыңғай интерфейстің әдепкі көк тақырыбына сәйкес келу үшін автоматты түрде орнатылады. Бұл әдепкі тақырып студияда да, бағдарламаның жұмыс уақытында да қолданылады. Тақырыптың нақты таңдалуы реттелетін бетті жасау тәжірибесінен жойылады.

Басқару элементтері беттің иерархиясындағы орналасуына негізделген басқа қаріп өлшемін қолдануы қажет.

Ескерім

Реттелетін бет мәтіні 1,33 масштабына ие, сондықтан қажетті өлшемді алу үшін мақсатты FontSize параметрін 1,33 мәніне бөлу қажет.

Белгі түрі	Мақсатты FontSize	Қолданылатын FontSize
Бет тақырыбы	17	12.75
Қалыпты белгілер	14	10.52
Шағын белгілер	12	9.02

Негізгі және қосалқы түймешіктерді басқару элементтері келесі стильдеу өзгерістерін қажет етеді:

Негізгі түймешіктер
```
Color=RGBA(255, 255, 255, 1)
Fill=RGBA(41,114,182,1)
Height=35
FontWeight=Normal
```
Қосымша түймешіктер
```
Color=RGBA(41,114,182,1)
Fill=RGBA(255, 255, 255, 1)
BorderColor=RGBA(41,114,182,1)
Height=35
FontWeight=Normal
```

Реттелетін беттер орналастырылған модельге негізделген бағдарлама қолданатын қойынша навигация жобасына сәйкес келеді. Көрнекі түрде тураланған семантикалық HTML құрылымы пайдаланушыларға пернетақтаны немесе экранды оқу құралын пайдаланған кезде реттелетін беттерді біркелкі шарлауға көмектеседі. Дербес кенеп бағдарламаларынан айырмашылығы, реттелетін бет басқару элементтері мен басқа UX элементтері қойынша нөмірлерін нақты тағайындауды қажет етпейді. Заманауи басқару элементтерінде TabIndex сипаты жоқ және шарлау үшін HTML семантикалық құрылымын пайдаланады.

Басқару элементтері, кенеп және код құрамдастары, контейнерлер және басқалары сияқты әртүрлі элементтерді реттелетін беттің орналасуындағы орнына қарай белгілеуге болады. Қойынша навигациясы Z ретті навигациясына сәйкес келеді. Құрамдастар, контейнерлер сияқты үлкен топтау элементтерінің ішіндегі жеке қойынша орындары қойынша құжат нысанының үлгісі (DOM) тармағындағы келесі элементке өтпес бұрын шарланады.

Мұнда басқару элементтері, код және кенеп құрамдастары мен контейнерлері бар бетті шарлау мысалы келтірілген.

Ескерім

Реттелетін беттегі қабаттасқан басқару элементтері мен элементтерде DOM үлгісі біріктірілмейді, сондықтан қойынша орындары көрнекі элемент орналасуымен синхрондалмауы мүмкін. Формулаларды қолдану арқылы динамикалық элементтерді орналастыру үшін де дәл солай.