WPF 12 – ListBox a StackPanel

V tomto, už dvanástom diely série WPF sa tentokrát pozrieme len na dva prvky, a to na ListBox a StackPanel.

Úvod

Ako som už napísal, dnes sa pozrieme na StackPanel a ListBox, čo sú dva kontajnerové prvky. To znamená, že je do nich možné umiestniť viac prvkov. StackPanel slúži skôr ako alternatíva ku Gridu a podobným prvkom, zatiaľ čo ListView slúži na tvorbu zoznamov.

StackPanel

StackPanel je prvok používaný k naskladaniu prvkov pod seba, pričom budú v základnom nastavení automatický zaberať jeho celú šírku. StackPanel nemá žiadne špeciálne vlastnosti, a tak si ukážeme rovno ukážku jeho použitia.

<StackPanel HorizontalAlignment="Left" Height="80" Margin="10,10,0,0" VerticalAlignment="Top" Width="472">
    <Button x:Name="button" Content="Button" Height="20"/>
    <Button x:Name="button1" Content="Button" Height="20"/>
    <Button x:Name="button2" Content="Button" Height="20"/>
    <Button x:Name="button3" Content="Button" Height="20"/>
</StackPanel>

Tento StackPanel má výšku 80 pixelov a obsahuje štyri 20 pixelov vysoké tlačidlá. Tým je nimi vyplnený. Všimnite si, že pri tlačidlách nieje vybraná šírka, a tak sú automatický roztiahnuté. Pokiaľ by ste prvkom nastavili ručne šírku, budú automaticky vycentrované do stredu riadku StackPanelu.

<StackPanel HorizontalAlignment="Left" Height="80" Margin="10,10,0,0" VerticalAlignment="Top" Width="472">
    <Button x:Name="button" Content="Button" Height="20" Width="50"/>
    <Button x:Name="button1" Content="Button" Height="20" Width="50"/>
    <Button x:Name="button2" Content="Button" Height="20" Width="50"/>
    <Button x:Name="button3" Content="Button" Height="20" Width="50"/>
</StackPanel>

ListBox

ListBox vo WPF slúži na zobrazenie zoznamu, v ktorom si môže používateľ kliknutím vyberať. Jeho obsahom môžu byť klasicky ľubovolné prvky, no existuje aj špecificky pre neho vytvorený prvok ListBoxItem.

ListBox opäť neponúka nejaké zvláštne vlastnosti, no jedna by sa našla. Jedná sa o SelectionMode, ktorý určuje, ako bude možné označovať prvky. V základnom stave je nastavený mód Single, čo znamená, že je možné naraz označiť len jeden prvok, no obsahuje aj módy Multiple a Extended, ktoré dovoľujú označiť viac prvkov naraz.

stBox x:Name="listBox" HorizontalAlignment="Left" Height="165" Margin="46,27,0,0" VerticalAlignment="Top" Width="388" SelectionMode="Multiple">
    <ListBoxItem Content="Item"/>
    <Button Content="Tlačidlo"/>
    <ListBox>
        <ListBoxItem Content="ListBoxItem"/>
        <Button Content="A ďalšie tlačidlo"/>
    </ListBox>
</ListBox>

Tento ListBox obsahuje tri prvky, pričom prvý je ListBoxItem, druhé je tlačidlo a posledný je ďalší ListBox.

To je na dnešný diel všetko a uvidíme sa zase nabudúce, keď sa pravdepodobne pozrieme len na TabControl, no možno nám zostane čas aj na DataGrid.