De Image control

De WPF Image control zal u toelaten om afbeeldingen te tonen binnen uw applicaties. Het is een zeer veelzijdige control, met veel nuttige opties en methoden, zoals u in dit artikel zult leren. Maar laat ons eerst eens kijken naar het meest basic voorbeeld om een afbeelding op te nemen in een Window:

<Image Source="https://upload.wikimedia.org/wikipedia/commons/3/30/Googlelogo.png" />

Het resultaat zal er zo uitzien:

De Source property, die we in dit voorbeeld gebruikten om aan te duiden welke afbeelding moest getoond worden, is waarschijnlijk de belangrijkste property van deze control. Laat ons dus maar beginnen met dieper op dit onderwerp in te gaan.

De Source property

Zoals u in ons eerste voorbeeld kunt zien maakt de Source property het gemakkelijk om aan te duiden welke afbeelding moet getoond worden binnen de Image control - in dit specifieke voorbeeld gebruikten we een afgelegen afbeelding, welk door de Image Control automatisch wordt opgehaald en afgebeeld van zodra hij zichtbaar wordt. Het is een mooi voorbeeld van de veelzijdigheid van de Image control, maar in veel gevallen zult u liever de afbeeldingen bundelen aan uw applicatie in plaats van ze vanop afstand te moeten opladen. Dit kan op even eenvoudige wijze gedaan worden.

Zoals u waarschijnlijk weet, kunt u bronbestanden toevoegen aan uw project - deze kunnen aanwezig zijn binnen uw Visual Studio project en bekeken worden in de Solution Explorer net zoals elk ander WPF-gerelateerd bestand (Windows, User Controls enz.). Een relevant voorbeeld van een bronbestand is een afbeelding die u eenvoudig kunt kopiëren naar een relevante folder van uw project om eraan toe te voegen. Het zal dan mee in uw applicatie gecompileerd worden (tenzij u VS uitdrukkelijk gevraagd hebt om dit niet te doen) en kan dan aangesproken worden met het URL format voor bronbestanden. Dus, wanneer u een afbeelding hebt met de naam "google.ping" binnen een folder met de naam "Images", dan kan de syntax er als volgt uitzien:

<Image Source="/WpfTutorialSamples;component/Images/google.png" />

Deze URI's, vaak benoemd als "Pack URI's", zijn een moeilijk onderwerp met heel wat meer details, maar op dit ogenblik onthoud je enkel dat het opgebouwd is uit twee delen:

• Het eerste deel (/WpfTutorialSamples;component), waarvan de assembly naam (WpfTutorialSamples in mijn applicatie) gecombineerd wordt met het woord "component"
• Het tweede deel, waarvan de relatieve path van het bronbestand vermeld is: /Images/google.png

Gebruikmakend van deze syntax, kunt u gemakkelijk verwijzen naar bronbestanden binnen uw applicatie. Teneinde de zaken te vereenvoudigen, zal de WPF framework ook een simpele relatieve URL aanvaarden - dit zal in de meeste gevallen volstaan, tenzij u meer complexe dingen doet in uw applicatie, in verband met bronbestanden. Met gebruik van een eenvoudige relatieve URL, zou het er zo uitzien:

<Image Source="/Images/google.png" />

Afbeeldingen dynamisch laden (Code-behind)

De Image Source rechtstreeks in uw XAML benoemen zal in veel gevallen goed werken, maar soms moet u toch een afbeelding dynamisch opladen, bvb. afhankelijk van de keuze van een gebruiker. Dit kunt u doen vanaf de Code-behind. Hier ziet u hoe u een afbeelding kunt ophalen die gevonden wordt op de computer van een gebruiker, gebaseerd op zijn selectie vanuit een OpenFileDialog:

private void BtnLoadFromFile_Click(object sender, RoutedEventArgs e)
{
    OpenFileDialog openFileDialog = new OpenFileDialog();
    if(openFileDialog.ShowDialog() == true)
    {
    Uri fileUri = new Uri(openFileDialog.FileName);
    imgDynamic.Source = new BitmapImage(fileUri);
    }
}

Kijk hoe ik een BitmapImage instantie creëer, waaraan ik een Uri object lever, steunend op de geselecteerde path van de dialoog. We kunnen exact dezelfde techniek toepassen om een afbeelding op te laden die als bronbestand aanwezig is in de applicatie.

private void BtnLoadFromResource_Click(object sender, RoutedEventArgs e)
{
    Uri resourceUri = new Uri("/Images/white_bengal_tiger.jpg", UriKind.Relative);
    imgDynamic.Source = new BitmapImage(resourceUri);        
}

We gebruiken dezelfde relatieve path als we reeds gebruikten in een van de vorige voorbeelden - wees er wel zeker van dat je u in de UriKind.Relative waarde bevindt wanneer u de Uri instantie aanmaakt, zodat het weet dat de toegevoegde path geen absolute path is. Hier volgt de XAML source, alsook een screenshot, van ons Code-behind voorbeeld:

<Window x:Class="WpfTutorialSamples.Basic_controls.ImageControlCodeBehindSample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfTutorialSamples.Basic_controls"
    mc:Ignorable="d"
    Title="ImageControlCodeBehindSample" Height="300" Width="400">
    <StackPanel>
    <WrapPanel Margin="10" HorizontalAlignment="Center">
        <Button Name="btnLoadFromFile" Margin="0,0,20,0" Click="BtnLoadFromFile_Click">Load from File...</Button>
        <Button Name="btnLoadFromResource" Click="BtnLoadFromResource_Click">Load from Resource</Button>
    </WrapPanel>
    <Image Name="imgDynamic" Margin="10"  />
    </StackPanel>
</Window>

De Stretch property

Na de Source property, die om meerdere redenen zeer belangrijk is, denk ik dat de tweede belangrijkste property van de Image control waarschijnlijk de Stretch property is. Ze regelt wat er gebeurt wanneer de dimensies van de opgeladen afbeelding niet helemaal stroken met de dimensies van de Image control. Dit gebeurt altijd sedert dat de afmetingen van uw Windows door de gebruiker kunnen bestuurd worden en, tenzij uw layout zeer statisch is, betekent dit dat de grootte van de Image control eveneens zal veranderen.

Zoals blijkt uit het volgende voorbeeld, kan de Stretch property een groot verschil maken in de wijze waarop een afbeelding op het scherm verschijnt:

<Window x:Class="WpfTutorialSamples.Basic_controls.ImageControlStretchSample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfTutorialSamples.Basic_controls"
    mc:Ignorable="d"
    Title="ImageControlStretchSample" Height="450" Width="600">
    <Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Label Grid.Column="0" HorizontalAlignment="Center" FontWeight="Bold">Uniform</Label>
    <Label Grid.Column="1" HorizontalAlignment="Center" FontWeight="Bold">UniformToFill</Label>
    <Label Grid.Column="2" HorizontalAlignment="Center" FontWeight="Bold">Fill</Label>
    <Label Grid.Column="3" HorizontalAlignment="Center" FontWeight="Bold">None</Label>
    <Image Source="/Images/white_bengal_tiger.jpg" Stretch="Uniform" Grid.Column="0" Grid.Row="1" Margin="5" />
    <Image Source="/Images/white_bengal_tiger.jpg" Stretch="UniformToFill" Grid.Column="1" Grid.Row="1" Margin="5" />
    <Image Source="/Images/white_bengal_tiger.jpg" Stretch="Fill" Grid.Column="2" Grid.Row="1" Margin="5" />
    <Image Source="/Images/white_bengal_tiger.jpg" Stretch="None" Grid.Column="3" Grid.Row="1" Margin="5" />
    </Grid>
</Window>

Het valt misschien moeilijk uit te leggen, maar alle vier de Image controls laten dezelfde afbeelding zien, maar met verschillende waarden voor de Stretch property. Hier is hoe de verschillende manieren werken:

• Uniform: Dit is de standaard mode. De afbeelding wordt automatisch geschaald zodanig dat ze past in de Image area. De Aspect ratio van de afbeelding wordt bewaard.
• UniformToFill: De afbeelding wordt geschaald zodanig dat ze de volledige Image area opvult. De Aspect ratio van de afbeelding wordt bewaard.
• Fill: De afbeelding wordt geschaald zodat ze past in de area van de Image control. De Aspect ratio wordt NIET bewaard, omdat de hoogte en de breedte onafhankelijk van elkaar worden geschaald.
• None: Als de afbeelding kleiner is dan de Image control, gebeurt er niets. Als ze groter dan de Image control, zal de afbeelding simpelweg verknipt worden tot ze past in de Image control, wat betekent dat ze slechts gedeeltelijk zichtbaar zal zijn.

Samenvatting

De WPF Image control maakt het u gemakkelijk om een afbeelding te tonen in uw applicatie, zowel van een afgelegen source, een ingepakt bronbestand of van de eigen computer, zoals aangetoond in dit artikel.