Programowanie aplikacji pod nowy interfejs Windows 8 w C# lub Visual Basic - Przegląd kontrolek  

Autor: Kuba Ostrowski

Opublikowano: 2012-04-17

Kontrolka jest elementem interfejsu użytkownika. Odpowiada za komunikację między programem a odbiorcą, poprzez odpowiednie reagowanie na odbierane komunikaty, takie jak: zmiana rozmiaru, kliknięcie przycisku myszki itp. Tworząc aplikację można wykorzystać kontrolki dostępne w Visual Studio lub utworzyć własne. W tym artykule zostaną przedstawione ważniejsze kontrolki dostępne w Visual Studio 2011.

Kontrolki, dziedziczenie

Kontrolki dziedziczone są po paru wspólnych typach, co zapewnia im te same właściwości oraz odpowiednie reagowanie na zdarzenia zachodzące w systemie.

Ponieważ często będziemy korzystali z właściwości odziedziczonych z klasy System.Windows.UIElement oraz System.Windows.FrameworkElement, tworząc kontrolki, bardzo łatwo będzie można zauważyć podobieństwo między nimi.

Wyświetlanie tekstu

Kontrolki do wyświetlania tekstu są najmniej skomplikowanymi typami wywodzącymi się bezpośrednio z FrameworkElement.

TextBlock – podstawowy typ do wyświetlania tekstu:

<TextBlock Width="100" Height="20" Text="Tekst"/>

RichTextBlock – wyświetla tekst formatowany, najczęściej za pomocą znaczników <Paragraph> oraz <Run>:

<RichTextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" >
            <Paragraph FontWeight="ExtraBold" FontSize="32">
                tekst1
            </Paragraph>
            <Paragraph Foreground="Red" FontSize="11">
                tekst2
            </Paragraph>
 </RichTextBlock>

Edycja tekstu

TextBox – podstawowy typ do manipulacji tekstem wyświetlanym na ekranie. Domyślny tekst można ustawić za pomocą właściwości Text, natomiast format wpisywanych danych - przy użyciu InputScope:

<TextBox Width="100" Height="20" />

PasswordBox – kontrolka umożliwiająca wpisywanie hasła przez użytkownika. Wpisywana zawartość wyświetlana jest za pomocą znaczków, gdzie rodzaj znaku ustalony jest przez właściwości PasswordChar. Hasło w kodzie można otrzymać poprzez właściwość Password:

<PasswordBox PasswordChar="*" Width="100" Height="20"/>

Przyciski

To kontrolki wywodzące się z klasy ButtonBase. Ich głównym zadaniem jest obsługa zdarzenia Click. Dzięki obecności w łańcuchu dziedziczenia ContentControl, potrafią wyświetlać dodatkową zawartość za pomocą właściwości Content.

Button – podstawowy przycisk:

<Button Width="200" Height="60" Content="Dodatkowa_Zawartość"
                      Click="Zdarzenie"/>

RepeatButton – ten typ przycisku wywołuje zdarzenie Click, gdy trzymamy na nim wciśnięty klawisz myszy co ilość milisekund, podaną we właściwości Interval:

<RepeatButton Width="200" Height="60" Content="Dodatkowa_Zawartość"
                      Click="Zdarzenie" Delay="10" Interval="100"/>

ToggleButton – przycisk zmiany stanu:

<ToggleButton Width="200" Height="60" Content="Dodatkowa_Zawartość" Click="Zdarzenie" />

HyperlinkButton – przycisk aplikacji do wyświetlania hiperłącza:

<HyperlinkButton Width="200" Height="60" Content="Dodatkowa_Zawartość"  Click="Zdarzenie"/>

Kontrolki umożliwiające wybór

ToggleSwitch –  służy do przełączania między dwoma stanami:

<ToggleSwitch OffContent="nie/tak"/>

CheckBox – kontrolka do wyboru opcjonalnych składników:

<CheckBox  Content="zaznacz"/>

RadioButton – służy do wyboru jednej opcji z wielu. W zasięgu danego kontenera może być zaznaczony tylko jeden, chyba że zostały pogrupowane za pomocą właściwości GroupName:

<RadioButton Content="zaznacz"/>

ComboBox – pozwala wybrać dowolny element z rozwijanej listy. Kolekcja elementów przyjmuje każdy typ wywodzący się z System.Object:

<ComboBox Width="200" Height="40">
            <ComboBoxItem Content="tekst1"/>
            <ComboBoxItem Content="tekst2"/>
            <ComboBoxItem Content="tekst3"/>
</ComboBox>

ListBox – idealnie nadaje się do wyboru i przeglądania dużej ilości danych, np. nagłówków, czytanych newsów. Przyjmuje typy wywodzące się z System.Object. Ten typ stosuje się najczęściej, dowiązując do niego dane za pomocą właściwości ItemResource:

<ListBox Width="100">
            <ListBoxItem Content="tekst1"/>
            <ListBoxItem Content="tekst2"/>
            <ListBoxItem Content="tekst3"/>
</ListBox>

Slider – pozwala wybrać wartość z ograniczonego przedziału za pomocą tzw. paska stanu:

<Slider Width="200" Maximum="100"  Minimum="0" Value="30" />

Paski postępu

ProgressBar – ukazuje postęp za pomocą tzw. paska stanu, który można przełączyć na animacje oczekiwania przy pomocy właściwości IsIndeterminate:

<ProgressBar Width="200" Value="30" />

ProgressRing – wyświetla na ekranie animacje oczekiwania w postaci kółeczek poruszających się po pierścieniu:

<ProgressRing  Width="200" IsActive="True"/>

Wyświetlanie multimediów

Image – pozwala na wyświetlenie obrazu:

<Image Width="300" Height="300" Source="ścieżka.ext"/>

MediaElement – odtwarza pliki wideo oraz audio:

<MediaElement Width="640" Height="480" Source="ścieżka.ext"/>

MediaPlayer – odtwarza pliki wideo lub audio oraz zezwala na kontrolę nad odtwarzanymi multimediami:

<MediaPlayer Source="scieżka.ext"/>

Rysowanie za pomocą kształtów

Typy przeznaczone do rysowania znajdują się w przestrzeni System.Windows.Shapes. Dziedziczą wiele właściwości i są w pełni podatne na zdarzenia, jak każda inna kontrolka. Niestety, są dość obciążające i nie należy ich nadużywać.

Przykład użycia kształtów:

<Rectangle Width="200" Height="100" Fill="Red"/>
<Ellipse Width="100" Height="200" Fill="CornflowerBlue"/>
<Line X1="100" Y1="100" X2="500" Y2="500" StrokeThickness="10" Stroke="Red" />
<Polyline Points="100 100 200 300 500 200" StrokeThickness="10" Stroke="Aqua"/>
<Polygon Points="500 300 400 100 600 100" Fill="Green" />

Kolekcje kontrolek

Budowanie atrakcyjnego interfejsu nie byłoby możliwe, gdyby nie typy umożliwiające zarządzanie kontrolkami. Typy służące za kolekcje kontrolek możemy podzielić na wywodzące się z:

—  System.Windows.Controls.Panel – służą do pozycjonowania kontrolek w interfejsie,

—  System.Windows.Controls.ContentControl oraz Windows.UI.Xaml.Controls.ItemsControl – przeznaczone są do manipulacji zawartością w trakcie pracy programu, np. przewijania danych na ekranie.

Grid – najbardziej uniwersalny ze wszystkich paneli, który pozwala na tworzenie oddzielnych kolumn i wierszy do pozycjonowania elementów:

<Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="200"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
//zawartość
</Grid>

StackPanel – panel służący do wyświetlania kontrolek ustawionych w pionie lub poziomie, jedna za drugą:

<StackPanel Orientation="Horizontal" >
       //zawartość
</StackPanel>

Canvas – służy do pozycjonowania zawartości względem lewego górnego rogu panelu:

<Canvas Width="350" Height="350">
    <Rectangle 
        Canvas.Top="25" 
        Canvas.Left="25" 
        Fill="Red" 
        Height="100" 
        Width="100"/>
</Canvas>

ItemsControl – wyświetla dowiązane dane według określonego szablonu:

<ItemsControl ItemsSource="źródło_danych">
               <ItemsControl.ItemTemplate>
                   <DataTemplate>
                       //szablon
                   </DataTemplate>
               </ItemsControl.ItemTemplate>
</ItemsControl>

ScrollViewer – umożliwia przewijanie kontrolki nie mieszczącej się w granicach strony:

<ScrollViewer ZoomMode="Enabled"MinZoomFactor="1.0" MaxZoomFactor="10.0">
       //kontrolka
</ScrollViewer>

FlipView – umożliwia przełączanie zawartości w trakcie pracy programu:

<FlipView Width="350" Height="150">
    <FlipViewItem>
        <TextBox Text="tekst1" Width="100" Height="30" />    
    </FlipViewItem>
    <FlipViewItem>
        <TextBox Text="tekst2" Width="100" Height="30" />
   </FlipViewItem>
</FlipView>

AppBar

Aplikacja może posiadać pasek dolny i górny, na których można rozmieszczać kontrolki. Paski idealnie nadają się do wspomagania nawigacji pomiędzy stronami:

<Page.BottomAppBar>
    <AppBar Padding="10,0,10,0">
        <Grid>
            <Button Click="GoHome" HorizontalAlignment="Left" 
                    IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}"  
                    Style="{StaticResource HomeAppBarButtonStyle}"/>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                <Button IsEnabled="{Binding CanFlipPrevious}" Click="PreviousButton_Click" 
                        Style="{StaticResource PreviousAppBarButtonStyle}"/>
                <Button IsEnabled="{Binding CanFlipNext}" Click="NextButton_Click" 
                        Style="{StaticResource NextAppBarButtonStyle}"/>
            </StackPanel>
        </Grid>
    </AppBar>
</Page.BottomAppBar>