Grens

Het Border controle-element tekent een rand, achtergrond of beide tegelijkertijd rond een ander element. Hiermee Border maakt u een visueel kader rond inhoud of voegt u afstand toe tussen UI-elementen.

Stijlen en sjablonen

Het Border besturingselement neemt over van Decorator en biedt visuele stijlmogelijkheden via de rand- en achtergrondeigenschappen.

Inhoudseigenschap

De inhoudseigenschap voor dit besturingselement is Child. Met deze eigenschap kunt u één kind-element binnen de rand plaatsen.

Onderdelen

Dit besturingselement definieert geen sjabloononderdelen.

Visuele statussen

Dit besturingselement gebruikt geen visuele statussen.

Belangrijke concepten

Als u begrijpt hoe Border werkt in het WPF-indelingssysteem, kunt u effectieve visuele ontwerpen maken.

Grenzen als een decorator

Het Border besturingselement is een Decorator, wat inhoudt dat het slechts één kindelement kan bevatten. Als u meerdere elementen binnen een rand wilt plaatsen, verpakt u deze in een paneel, zoals StackPanel of Grid.

Randeigenschappen

Rand biedt verschillende belangrijke eigenschappen voor het aanpassen van visuele elementen:

• BorderBrush - Hiermee stelt u de kleur of het patroon van de randlijn in.
• BorderThickness - Definieert hoe dik de rand aan elke zijde wordt weergegeven.
• Background - Vult het gebied binnen de rand met een kleur of patroon.
• CornerRadius - Hiermee maakt u afgeronde hoeken voor een zachter uiterlijk.
• Padding - Hiermee voegt u ruimte toe tussen de rand en de onderliggende inhoud.

Overwegingen voor indeling

Border neemt deel aan het WPF-indelingssysteem door het enkele onderliggende element te meten en te rangschikken. De dikte en opvulling van de rand zijn van invloed op de uiteindelijke grootteberekeningen, dus houd rekening met deze waarden bij het ontwerpen van uw indeling.

Voorbeelden

In de volgende voorbeelden ziet u veelvoorkomende scenario's voor grensgebruik.

Basisrandgebruik

Met de volgende XAML wordt een eenvoudige rand rond een tekstvak gemaakt:

<Border BorderBrush="Black" BorderThickness="2" CornerRadius="5" Padding="5">
    <TextBox Text="Enter text here" />
</Border>

Stijl met borstels

U kunt kleurovergangen en andere borstels gebruiken om geavanceerdere randeffecten te maken:

<Border BorderThickness="3" CornerRadius="10" Padding="10">
    <Border.BorderBrush>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="Blue" Offset="0" />
            <GradientStop Color="LightBlue" Offset="1" />
        </LinearGradientBrush>
    </Border.BorderBrush>
    <Border.Background>
        <SolidColorBrush Color="LightGray" />
    </Border.Background>
    <TextBlock Text="Styled content" />
</Border>

Meerdere elementen bevatten

Aangezien Border slechts één onderliggend element kan bevatten, gebruikt u een deelvenster om meerdere elementen te groeperen.

<Border BorderBrush="Gray" BorderThickness="1" CornerRadius="3" Padding="8">
    <StackPanel>
        <TextBlock Text="Title" FontWeight="Bold" />
        <TextBlock Text="Description text goes here." />
        <Button Content="Action" />
    </StackPanel>
</Border>

Zie ook

• Border
• Decorator
• overzicht uitlijning, marges en opvulling
• Paneel