Adaptive View

Salah satu dari fitur Univeresal Windows Apps adalah kemampuannya

untuk menjalankan aplikasi di berbagai device yang menggunakan
windows 10. Karena tiap device berbeda ukuran,maka aplikasi yang kita
buat haruslah bisa menyesuaikan di berbagai ukuran layar.
Untuk membuat aplikasi kita responsive, UWP sudah menyediakan sebuah
class untuk menanganinya,yakni VisualStateManager. Dengan
menggunakan VisualStateManager kita dapat mengatur beragam
tampilan aplikasi di setiap ukuran layar.
Untuk mengatur minimal lebar dan tinggi ukuran layar kita dapat
menggunakan VisualState.StateTriggers dan AdaptiveTrigger.
Sedangkan untuk mengubah properti sesuai dengan ukuran layar yang
didefinisikan di VisualState.StateTrigger kita dapat menggunakan
VisualState.Setters dan Setter. Contoh :
<Grid Background="{ThemeResource
ApplicationPageBackgroundThemeBrush}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="720" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="panel1.Orientation" Value="Horizontal" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<StackPanel x:Name="panel1" Orientation="Vertical">
<TextBlock Margin="20" Text="Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat." TextWrapping="Wrap" Width="500"/>
<TextBlock Margin="20" Text=" Duis aute irure dolor in reprehenderit in
voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
TextWrapping="Wrap" Width="500"/>
<TextBlock Margin="20" Text=" Duis aute irure dolor in reprehenderit in
voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
TextWrapping="Wrap" Width="500"/>
</StackPanel>
</Grid>

Apabila dijalankan di ukuran layar > dari 720 maka tampilannya akan
seperti berikut.

Sedangkan apabila ukuran aplikasi diperkecil <=720 maka tampilan akan

berubah seperti berikut :

Analisis Kode :
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="720" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="panel1.Orientation" Value="Horizontal" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>

Untuk memulai menggunakan VisualStateManager pertama-tama kita

definisikan terlebih dahulu <VisualStateManager.VisualStateGroups>.Setelah itu
deklarasikan <VisualStateGroup>. Kode yang berada di antara tag <VisualState> dan
</VisualState> adalah kode untuk mengatur responsive. Untuk mendefinisikan kondisi layar
kita terdapat pada bagian VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="720" />
</VisualState.StateTriggers>

Andapun dapat menambahkan kondisi lainnya,misalkan menambahkan

minimal height.
<AdaptiveTrigger MinWindowsHeight="500" />.
Setelah mendefenisikan kondisi selanjutnya adalah mengubah pengaturan
properti untuk kondisi layar tersebut. Untuk mengubah properti terdapat
pada bagian <VisualState.Setter> dan </VisualState.Setter>. Untuk
mengubah propertinya kita dapat menggunakan tag <Setter />, contoh
pada program diatas kita mengubah orientatation dari StackPanel yang
namanya panel1 menjadi Horizontal ketika ukuran layar <=720. Hasilnya
adalah seperti pada screenshot diatas. Untuk menambahkan aturan pada
layar yang berbeda kita dapat menambahkan tag <VisualState> lainnya
didalam <VisualStateGroup>.

Teknik dalam membuat desain responsive

Ketika kita hendak membuat aplikasi yang tampilannya akan menyesuaikan
dengan ukuran layar (responsive) maka ada berberapa teknik yang bisa
digunakan. Teknik tersebut adalah :

Reposition
Kita dapat mengubah lokasi dan posisi dari elemen UI disetiap
perangkat.Contoh pada perangkat ponsel atau phtablet kita memerlukan
tampilan UI bergulir,karena kita hanya dapat melihat satu full frame dalam
satu waktu. Sebaliknya ketika aplikasi dibuka dilayar yang lebar yang
memungkin dua penuh frame dalam layar, baik itu dalam keadaan portrait
maupun landscape, maka frame B dapat menempati ruang khusus disebelah
kanan bingkai A.

Berikut adalah contoh desain dari aplikasi Photo App, aplikasi ini akan
mengubah posisi ketika layar semakin besar.

Resize.
Kitapun dapat mengoptimalkan ukuran frame dengan menyesuaikan margin
dan ukuran elemen UI. Hal ini memungkin kita untuk menambah pengalaman
membaca pada layar yang lebih besar dengan cara memberbesar frame.

Reflow
Dengan cara mengubah aliran elemen UI berdasarkan pada perangkat dan
orientasi, aplikasi anda dapat menawarkan tampilan konten yang lebih
optimal. Misalnya,ketika ukuran layar besar, memungkinkan untuk beralih
kepada container yang lebih besar, menambahkan kolom, dan membuat list
item dengan cara yang berbeda.
Contohnya adalah ketika aplikasi dijalankan di dalam phone atau phtablet,
aplikasi akan menampilkan satu kolom dengan skroll vertikal. Sedangkan
untuk perangkat yang lebih besar kita dapat mengubahnya menjadi 2 kolom

dan sebagainya.

Reveal
You can reveal UI based on screen real estate, or when the device supports
additional functionality, specific situations, or preferred screen orientations.
In this example with tabs, the middle tab with the camera icon might be
specific to the app on phone or phablet and not be applicable on larger
devices, which is why it's revealed in the device on the right. Another
common example of revealing or hiding UI applies to media player controls,
where the button set is reduced on smaller devices and expanded on larger
devices. The media player on PC, for instance, can handle far more on-screen
functionality than it can on a phone.

Part of the reveal-or-hide technique includes choosing when to display more

metadata. When real estate is at a premium, such as with a phone or
phablet, it's best to show a minimal amount of metadata. With a laptop or
desktop PC, a significant amount of metadata can be surfaced. Some
examples of how to handle showing or hiding metadata include:

In an email app, you can display the user's avatar.

In a music app, you can display more info about an album or artist.

In a video app, you can display more info about a film or a show, such
as showing cast and crew details.

In any app, you can break apart columns and reveal more details.

In any app, you can take something that's vertically stacked and lay it
out horizontally. When going from phone or phablet to larger devices,
stacked list items can change to reveal rows of list items and columns
of metadata.

Replace
This technique lets you switch the user interface for a specific device sizeclass or orientation. In this example, the nav pane and its compact, transient
UI works well for a smaller device, but on a larger device tabs might be a
better choice.

Re-architect
You can collapse or fork the architecture of your app to better target specific
devices. In this example, going from the left device to the right device
demonstrates the joining of pages.

Here's an example of this technique applied to the design for a smart home
app.