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.