The Button control

Intet grafisk brugerflade framework ville være komplet uden knap-kontrollen, så selvfølgelig har WPF en inkluderet, og lige som resten af framework-kotrollerne, er den meget fleksibel og giver dig mulighed for at opnå næsten alt. Man lad os ført starte med nogle grundlæggende eksempler.

En simpel knap

Lige som mange andre WPF-kontroller, kan en knap blive vist ved bare at tilføje et Button-tag til dit vindue. Hvis du skriver tekst i mellem taggene (eller en anden kontrol), vil det blive indhold på knappen:

<Button>Hello, world!</Button>

Ret simpelt ikke? Knappen gør selvfølgelig ikke noget endnu, men hvis du peger på den, vil du se at den får en over-effekt som standard. Lad os få knappen til at gøre noget, ved at tilmelde til dens Click(klik)-hændelse (click event) (mere information om denne process findes i artiklen omkring tilmelding til hændelser i XAML)

<Button Click="HelloWorldButton_Click">Hello, World!</Button>

I koden bag ved skal du have et matchende metode til at håndtere klikket:

private void HelloWorldButton_Click(object sender, RoutedEventArgs e)
{
    MessageBox.Show("Hello, world!");
}

Hvis du nu klikker på knappen vil der komme en besked op!

Formateret indhold

Internt vil tekst inde i indholdet (Content) af knappen blive lavet om til en TextBlock-kontrol. Hvilket også betyder at du kan styre de samme aspekter af tekstens formatering. Der er flere egenskaber på knap-kontrollen der kan gøre dette. Blandt andet (men ikke kun) Foreground(forgrund), Background(baggrund) , FontWeight(skrift-vægt) og så videre. Sagt på en anden måde er det meget nemt at ændre formateringen på teksten inde i knap-kontrollen:

<Button Background="Beige" Foreground="Blue" FontWeight="Bold">Formatted Button</Button>

Hvis du sætter disse egenskaber direkte knappen vil teksten på knappen blive formateret efter det. Hvis du vil have noget mere avanceret indhold på knappen; læs videre.

Knapper med avanceret indhold

Vi har allerede snakket om dette flere gange, men en af de rigtige fede ting med WPF er evnen til at udskifte den simple tekst inde i kontrollen med andre WPF-kontroller. Dette betyder også at knapper ikke kun er begrænset til simpel tekst, formateret på en måde - du kan bare tilføje flere tekst-kontroller med forskellig formatering. WPF-knappen understøtter kun en direkte underliggende kontrol, men hvis du tilføjer et panel, som kan indeholde så mange kontroller du har brug for. Du kan bruge den til at lave knapper med forskellige typer formatering:

<Button>
    <StackPanel Orientation="Horizontal">
    <TextBlock>Formatted </TextBlock>
    <TextBlock Foreground="Blue" FontWeight="Bold" Margin="2,0">Button</TextBlock>
    <TextBlock Foreground="Gray" FontStyle="Italic">[Various]</TextBlock>
    </StackPanel>
</Button>

Du er selvfølgelig ikke kun begrænset til tekst - du kan komme en hvilken som helst kontrol ind i dine knapper, hvilket leder os til et emne jeg ved mange vil spørge efter. Knapper med billeder!

Knapper med billeder (ImageButton)

I mange brugergrænseflade-frameworks, vil der være en almindelig knap og en eller flere varianter, som har flere muligheder. En af de mest brugte varianter er ImageButton(billedknap). Det er som navnet indikerer, en knap som normalt kan have et billede før teksten. Man in WPF er der ikke beghov for at have en separat kontrol for at kunne det - som du lige har set, kan vi komme flere kontroller ind i en knap. Du kan lige så nemt tilføje en billede(Image)-kontrol til den, sådan her:

<Button Padding="5">  
    <StackPanel Orientation="Horizontal">  
    <Image Source="/WpfTutorialSamples;component/Images/help.png" />  
    <TextBlock Margin="5,0">Help</TextBlock>  
    </StackPanel>  
</Button>

Det er ret nemt at lave en billedknap i WPF. Du kan selvfølgelig flytte kontrollerne rundt. F.eks. hvis du vil have billedet efter teksten osv.

Indvendig udfyldning (padding)

Du har måske opdaget at knapper i WPF-frameworket ikke har indvending udfyldning (padding) per standard. Dette betyder at teksten er meget tæt på knappens kanter, hvilket kan se forkert ud, fordi at knapper der er andre steder (så som på internettet, i andre programmer, osv.), har indvendig udfyldning i siderne. Ingen grund til bekymring, for knappen har en Padding(indvendig udfyldning) egenskab:

<Button Padding="5,2">Hello, World!</Button>

Dette vil anvende en indvendig udfyldning på 5 pixels i siderne, og 2 af pixels i top og bund. Det kan dog være trættende at skulle lave indvendig udfyldning på alle knapper, så derfor er her et lille tip: Du kan sætte den indvendige udfyldning globalt. Enten i hele applikationen eller bare i dette specifikke vindue, ved brug af en stil(Style) (mere omkring dette senere). Her er et eksempel på hvordan vi kan sætte det på vinduet ved hjælp af Window.Resources(vindueressourcer) egenskaben:

<Window.Resources>
    <Style TargetType="{x:Type Button}">
    <Setter Property="Padding" Value="5,2"/>
    </Style>
</Window.Resources>

Den indvendige udfyldning vil du blive brugt på alle dine knapper. Du kan selvfølgelig også overskive den ved at specificere Padding-egenskaben direkte på knappen. Alle knapperne i dette eksempel vil se sådanne ud med en fælles indvendig udfyldning:

Resumé

As you can see from this article, using buttons in the WPF framework is very easy and you can customize this important control almost endlessly.