Programowanie aplikacji pod nowy interfejs Windows 8 w C# lub Visual Basic - Definiowanie układu graficznego  

Tłumaczenie na podstawie Quickstart: Defining layouts: Aurelia Tokarek

[Ta dokumentacja jest wstępna i może ulec zmianie.]

Opublikowano: 2012-04-17

Używając języka C++, C# lub Visual Basic dysponujesz, podczas tworzenia aplikacji pod nowy interfejs Windows 8, elastycznym układem graficznym, pomagającym dostosowywać wygląd aplikacji do urządzenia oraz jej stanu. Dzięki elastycznej konstrukcji, Twoja aplikacja będzie świetnie wyglądać na ekranach o różnych rozmiarach, rozdzielczościach i orientacji. Ten artykuł wyjaśni, jak zaprojektować interfejs użytkownika, dostosowujący się automatycznie do różnych wyświetlaczy.

Dowiedz się, w jaki sposób ten temat łączy się z innymi:

• Roadmap for Metro style apps using C# or Visual Basic,
• Roadmap for Metro style apps using C++.

Co musisz wiedzieć:

Create your first Metro style app using C# or Visual Basic

Najlepsze praktyki user experience – przewodnik

Mimo, że temat ten stanowi wprowadzenie do kilku podstawowych układów graficznych, istnieje szereg wytycznych user experience, o których należy pamiętać. Szczegóły znajdziesz poniżej:

• Designing flexible layouts,
• Guidelines for scaling to pixel density,
• Guidelines for scaling to screens,
• Guidelines for snapped and fill views.

Krótko o układzie graficznym

Układ graficzny (ang. layout) jest procesem doboru rozmiaru i pozycjonowania obiektów w interfejsie użytkownika. W celu pozycjonowania obiektów wizualnych , musisz umieścić je w kontrolce Panel lub innym kontenerze. XAML Framework dostarcza takie kontrolki, jak: Canvas, StackPanel i Grid, służące jako pojemniki, w których można pozycjonować elementy.

XAML obsługuje układ graficzny, zarówno bezwzględny, jak i dynamiczny. W układzie bezwzględnym, kontrolki są pozycjonowane jawnie, przy użyciu współrzędnych x i y (na przykład za pomocą Canvas). W układzie dynamicznym, interfejs użytkownika automatycznie dopasowuje rozmiar do różnych rozdzielczości (na przykład za pomocą StackPanel lub Grid).

Układ bezwzględny

W tym układzie, elementy potomne mogą zostać zorganizowane w panelu, określając ich położenie w stosunku do elementu nadrzędnego. Pozycjonowanie bezwzględne nie bierze pod uwagę wielkości ekranu. Jeśli aplikacja wymaga bezwzględnego pozycjonowania elementów interfejsu użytkownika, można zaprojektować różne strony dla różnych rozdzielczości lub wykorzystać skalowanie jako alternatywę.

XAML Framework zawiera kontrolkę Canvas, wspierającą pozycjonowanie bezwzględne. Możesz pozycjonować po ustawieniu właściwości kontrolek: Canvas.Left i Canvas.Top. Jeśli używasz projektu w Visual Studio, właściwości te aktualizowane są podczas przeciągania elementów na powierzchnię projektową wewnątrz Canvas.

Układ dynamiczny

W tym układzie, interfejs użytkownika może być wyświetlany poprawnie na wszystkich rozdzielczościach ekranu. Możesz zorganizować elementy potomne, określając, w jaki sposób mają być rozmieszczone i jak powinny zachowywać się w stosunku do elementów nadrzędnych. Na przykład, możesz zorganizować kontrolki na panelu i określić, że należy je zwinąć w poziomie. W celu skorzystania z automatycznego lub proporcjonalnego dopasowywania rozmiaru należy przypisać specjalne wartości do właściwości Height i Width. Zalecane ustawienia tego typu układu:

• ustaw właściwości Height i Width na Auto. Kiedy wartości te używane są dla elementów w kontrolce Grid, wówczas element wypełnia komórkę kontrolki. Dostępne jest to dla kontrolek Grid i StackPanel,
• w przypadku kontrolki zawierającej tekst, usuń właściwości Height i Width, ustaw właściwości MinWidth lub MinHeight. Zapobiega to skalowaniu tekstu w dół, do rozmiaru, który jest nieczytelny,
• w celu ustawienia wartości proporcjonalnych dla RowDefinition i ColumnDefinition - elementów kontrolki Grid, użyj wartości relative dla właściwości Height i Width. Na przykład, aby określić że jedna kolumna jest pięć razy większa od innej kolumny, należy użyć „*” i „5*” dla właściwości Width w elemencie ColumnDefinition.

Wymiarowanie automatyczne i proporcjonalne

Wymiarowanie automatyczne jest używane w celu umożliwienia dopasowania kontrolek do zawartości, nawet, gdy zawartość zmienia rozmiar. Wymiarowanie proporcjonalne wykorzystywane jest za pomocą ważonych proporcji do dystrybucji wolnego miejsca wśród wierszy i kolumn w siatce. W XAML wartości wymiarowane proporcjonalnie oznaczane są jako: * lub n*. Na przykład, jeśli masz siatkę z czterema kolumnami, możesz ustawić szerokość kolumn wartościami podanymi w poniższej tabeli:

Kontrolki panela

Widok kontrolki w XAML:

XAML

<Rectangle Canvas.Left="200" Canvas.Top="100"
        Fill="red" Width="350" Height="350" />
</Canvas>

Po wyświetleniu, element wygląda następująco:

StackPanel

StackPanel organizuje elementy potomne w jednej linii, mogą one być zorientowane poziomo lub pionowo. Użyj właściwości Orientation, aby określić kierunek elementów potomnych. Wartością domyślną dla właściwości Orientation jest Orientation.Vertical. Jeśli chcemy zorganizować na stronie podsekcję interfejsu użytkownika, używamy zazwyczaj kontrolki StackPanel:

XAML

<StackPanel Margin="20">
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10" />
        <Rectangle Fill="Blue" Width="100" Height="100" Margin="10" />
        <Rectangle Fill="Green" Width="100" Height="100" Margin="10" />
        <Rectangle Fill="Purple" Width="100" Height="100" Margin="10" />
</StackPanel>

Grid

Ta kontrolka wspomaga kontrolki zawarte w układzie siatki. Można określić definicję wiersza i kolumny kontrolki, używając właściwości RowDefinition i ColumnDefinition, które są zadeklarowane bezpośrednio w kontrolce. Możesz umieścić obiekty w poszczególnych komórkach siatki za pomocą właściwości Grid.Column i Grid.Row. Można przydzielać miejsce w kolumnie lub wierszu automatycznie, lub używając wymiarowania proporcjonalnego. Zawartość może rozciągnąć się na wiele wierszy i kolumn przy pomocy Grid.RowSpan i Grid.ColumnSpan.

Poniższy przykład pokazuje, jak tworzyć element Grid, zawierający trzy wiersze i dwie kolumny. Wysokość pierwszego i trzeciego wiersza jest wystarczająco duża na tekst. Wysokość drugiego wiersza wypełnia resztę dostępnej wysokości. Szerokość kolumn jest podzielona równo, w ramach dostępnej szerokości kontenera:

XAML

<Grid Margin="12,0,12,0">
    <Grid.RowDefinitions>
        <RowDefinition Height="auto" />
        <RowDefinition />
        <RowDefinition Height="auto" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
<TextBox Text="1st row 1st column" FontSize="60" Grid.Column="0" Grid.Row="0" />
<TextBox Text="3rd row 1st column" FontSize="60" Grid.Column="0" Grid.Row="2" />
<Button Content="1st row 2nd column" FontSize="60" Grid.Column="1" Grid.Row="0" />
<Button Content="3rd row 2nd column" FontSize="60" Grid.Column="1" Grid.Row="2" />
</Grid>

Po wyświetleniu, wygląda to następująco: