sobota, 14 listopada 2009

Kontrolka w kontrolce, czyli o Content w WPF

Zapewnie wielu z was myślało o zwariowanych pomysłach umieszczenia w np. Buttonie TextBoxa. Dzięki nowemu modelowi, który wprowadzono w WPF takie sztuczki są możliwe. Prawie każda kontrolka w WPF dziedziczy po klasie ContentControl. Dzięki temu kontrolki uzyskują możliwość przechowywania w sobie innych kontrolek. Najłatwiej zobaczyć to na przykładzie. Wspominałem na początku o możliwości umieszczenia w Buttonie kontrolki TextBox. Spróbujmy więc osiągnąć taki efekt:


Kod potrzebny aby wygenerować taki efekt jest niezwykle prosty:
   21         <Button>
   22             <TextBox MinWidth="50"></TextBox>
   23         </Button>

Oczywiście w Buttonie możemy umieścić inne rzeczy jak np. jakiś obrazek, TextBlock itd.

Przyjrzyjmy się teraz kontrolką, które mogą przyjąć tylko jedną kontrolkę.

ScrollViewer
W WPF nie ma innego kontenera który umożliwia przewijanie swojej zawartości w tak prosty sposób jaki to robi ScrollViewer. Jako wewnętrzny kontener, stosujemy przeważnie dla niego Grid. Przykład:

 Efekt ten uzyskałem dzięki położeniu w ScrollViewerze Grida, a w nim 9 wierszy i 9 przycisków. Kod:

    6         <ScrollViewer>
    7             <Grid>
    8                 <Grid.RowDefinitions>
    9
   10                     <RowDefinition MinHeight="25"></RowDefinition>
   11                     <RowDefinition MinHeight="25"></RowDefinition>
   12                     <RowDefinition MinHeight="25"></RowDefinition>
   13                     <RowDefinition MinHeight="25"></RowDefinition>
   14                     <RowDefinition MinHeight="25"></RowDefinition>
   15                     <RowDefinition MinHeight="25"></RowDefinition>
   16                     <RowDefinition MinHeight="25"></RowDefinition>
   17                     <RowDefinition MinHeight="25"></RowDefinition>
   18                     <RowDefinition MinHeight="25"></RowDefinition>
   19                     <RowDefinition MinHeight="25"></RowDefinition>
   20                 </Grid.RowDefinitions>
   21                 <Button Grid.Row="0"></Button>
   22                 <Button Grid.Row="1"></Button>
   23                 <Button Grid.Row="2"></Button>
   24                 <Button Grid.Row="3"></Button>
   25                 <Button Grid.Row="4"></Button>
   26                 <Button Grid.Row="5"></Button>
   27                 <Button Grid.Row="6"></Button>
   28                 <Button Grid.Row="7"></Button>
   29                 <Button Grid.Row="8"></Button>
   30                 <Button Grid.Row="9"></Button>
   31             </Grid>
   32         </ScrollViewer>


Scroll jest aktywny w momencie gdy jest zbyt mało miejsca aby wyświetlić zawartość Grida. Gdy rozciągniemy okno Scroll przestaje być aktywny.

GroupBox
Reprezentuje prosty prostokąt z tytułem. Można w nim zgrupować kontrolki które np służą do wybierania jakichś opcji. Przykład:

Kod aby taki efekt uzyskać:

 
    5     <Grid>
    6         <Grid.RowDefinitions>
    7             <RowDefinition></RowDefinition>
    8             <RowDefinition></RowDefinition>
    9             <RowDefinition></RowDefinition>
   10         </Grid.RowDefinitions>
   11         <Grid.ColumnDefinitions>
   12             <ColumnDefinition></ColumnDefinition>
   13             <ColumnDefinition></ColumnDefinition>
   14             <ColumnDefinition></ColumnDefinition>
   15         </Grid.ColumnDefinitions>
   16         <GroupBox Grid.Column="1" Grid.Row="1" Header="Opcje">
   17             <StackPanel>
   18                 <CheckBox>
   19                     <CheckBox.Margin>
   20                         <Thickness Top="4" Bottom="4"></Thickness>
   21                     </CheckBox.Margin>
   22                     Opcja pierwasz
   23                 </CheckBox>
   24                 <CheckBox>
   25                     <CheckBox.Margin>
   26                         <Thickness Top="4" Bottom="4"></Thickness>
   27                     </CheckBox.Margin>
   28                     Opcja druga
   29                 </CheckBox>
   30                 <CheckBox>
   31                     <CheckBox.Margin>
   32                         <Thickness Top="4" Bottom="4"></Thickness>
   33                     </CheckBox.Margin>
   34                     Opcja trzecia
   35                 </CheckBox>
   36                 <Button>
   37                     <Button.Margin>
   38                         <Thickness Top="20"></Thickness>
   39                     </Button.Margin>
   40                     Ok
   41                 </Button>
   42             </StackPanel>
   43         </GroupBox>
   44     </Grid>

TabItem
TabItem reprezentuje pojedynczą stronę w kontrolce TabControl. Za pomocą tej kontrolki można uzyskać modne w dzisiejszych aplikacjach zakładki:

 Kod dzięki któremu uzyskamy taki efekt:
 

    5     <Grid>
    6         <TabControl>
    7             <TabItem Header="Opcje czcionki">
    8                 <StackPanel>
    9                     <Button>Kliknij mnie</Button>
   10                     <CheckBox>Zaznacz mnie</CheckBox>
   11                     <RadioButton>Wybierz mnie</RadioButton>
   12                 </StackPanel>
   13             </TabItem>
   14             <TabItem Header="Opcje wideo"></TabItem>
   15             <TabItem Header="Opcje dzwiku"></TabItem>
   16         </TabControl>
   17     </Grid>

Expander
Pozwala użytkownikowi na ukrywanie/otwieranie jego zawartości poprzez klikanie na małą strzałkę. Najlepiej wyjaśni to przykład:

 Kod:

    5     <StackPanel>
    6         <Expander Grid.Row="0" Background="Azure">
    7             <StackPanel>
    8                 <Button>Przycisk</Button>
    9                 <RadioButton>RadioButton</RadioButton>
   10                 <CheckBox>CheckBox</CheckBox>
   11             </StackPanel>
   12         </Expander>
   13         <Expander Grid.Row="1" Background="BlanchedAlmond"></Expander>
   14     </StackPanel>

Dekoratory
Border - czyli najprościej ujmując kolor brzegu. Zawiera takie właściwości jak Background (kolor tła), BorderBrush i BorderThickness (kolor brzegu i jego grubość), CornerRadius (zaokrąglenie brzegów), Padding (dodaje przestrzeń pomiędzy brzegiem a zawartością kontrolki) .

Vievbox - umożliwia przeskalowywanie grafiki zawartej w nim (najlepiej do tego nadaje się oczywiście grafika wektorowa); rzadko przechowuje się w nim inne kontrolki.

Tyle na dziś. W następnej części kursu poznamy specjalny rodzaj zdarzeń i właściwości wykorzystywanych w WPF.

1 komentarz: