Billedkontrollen

WPF billedkontrollen giver dig mulighed for at fremvise billeder inde i dine applikationer. Det er en meget alsidig kontrol med mange nyttige metoder og muligheder, som du vil lære om i denne artikel. Men lad os først se det mest grundlæggende eksempel på at inkludere et billede i et vindue:

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

Resultatet vil se sådan her ud:

Source-egenskaben som vi benyttede i dette eksempel for at specificere det billede der skal vises, er nok den vigtigste egenskab ved denne kontrol, så lad os dykke lidt dybere ned i det emne til at starte med.

Source-egenskaben

Som du kan se ud fra vores første eksempel så gør Source-egenskaben det nemt at angive, hvilket billede der skal vises inde i selve billedkontrollen – i dette specifikke eksempel brugte vi et fjerntliggende billede, som billedkontrollen automatisk henter og fremviser, lige så snart som det bliver synligt. Dette er et fint eksempel på hvor alsidig billedstyringen er, men i mange situationer vil du sandsynligvis samle billederne sammen med din applikation i stedet for at indlæse dem fra en ekstern kilde. Dette kan gøres lige så let!

Som du sikkert ved, kan du tilføje ressourcefiler til dit projekt – de kan eksistere inde i dit nuværende Visuel Studio projekt og ses i Solution Explorer ligesom enhver anden WPF-relateret fil (Windows, brugerkontroller osv.). Et relevant eksempel på en ressourcefil er et billede, som du blot kan kopiere til en relevant mappe i ens projekt for derved at få det inkluderet. Det vil derefter blive kompileret ind i din applikation (medmindre du specifikt beder Visuel Studio om ikke at gøre det) og kan herefter tilgås ved hjælp af URL-formatet for ressourcer. Så hvis du har et billede kaldet ”google.png” inde i en mappe kaldet ”Billeder”, kunne syntaksen se sådan ud:

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

Disse URI’er bliver ofte omtalt som ”Pack URI’s” og er et tungt emne med mange flere detaljer, men for nu skal du blot bemærke, at det består af to væsentlige dele:

• Den første del (/WpfTutorialSamples;component) hvor assemblynavnet (WpfTutorialSamples i applikation) er kombineret med ordet ”component”.
• Den anden del, hvor den relative sti til ressourcen er specificeret ved: /Images/google.png

Ved at bruge denne syntaks kan du nemt henvise til ressourcer der er inkluderet i din applikation. For at forenkle tingene vil WPF frameworket også acceptere en simpel relativ URL – dette vil være tilstrækkeligt i de fleste tilfælde, medmindre du foretager dig noget mere kompliceret i din applikation med hensyn til ressourcer. Ved at bruge en simpel relativ URL ville det se sådan her ud:

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

Indlæsning af billeder dynamisk via (Code-beehind)

At angive billedkilden direkte i din XAML vil fungere i mange tilfælde, men nogle gange har du brug for at indlæse et billede dynamisk, fx baseret på et brugervalg. Dette er muligt at gøre fra Code-behind. Her vises hvordan du indlæse et billede fundet på brugerens computer baseret ud fra deres valg i 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);
    }
}

Bemærk hvordan jeg opretter en BitmapImage instans som jeg videresender et Uri objekt til, baseret ud fra den valgte sti fra dialogboksen. Vi kan bruge nøjagtigt samme teknik til at indlæse et billede der er inkluderet i applikationen som en ressource:

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

Vi bruger den samme relative sti som vi brugte i et af de foregående eksempler – bare sørg for at indtaste UriKind.Relative værdien når du opretter Uri instansen, så den ved at den angivne sti ikke er en absolut sti. Her er XAML kilden, samt et skærmbillede af vores Code-Behind eksempel:

<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>

Stretch-egenskaben

Næstefter Source-Egenskaben, som er vigtig af indlysende årsager, tror jeg, at den næstmest interessante egenskab ved billedkontrollen må være egenskaben Stretch. Den styrer hvad der sker, når dimensionerne på det indlæste billede ikke stemmer helt overens med dimensionerne på billedkontrollen. Dette vil ske hele tiden, da størrelsen på dit vindue kan styres af brugeren, og medmindre dit layout er meget statisk, betyder det at størrelsen på billedkontrollen/kontrollerne også vil ændre sig.

Som du kan se fra dette næste eksempel, kan Stretch-egenskaben gøre en hel del forskel i, hvordan et billede vises:

<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>

Det kan være lidt svært at se, men alle fire billedkontroller viser det samme billede, men med forskellige værdier for Stretch-egenskaben. Sådan fungere de forskellige tilstande:

• Uniform: Dette er standardtilstand. Billedet skaleres automatisk, så det passer inden for billedområdet. Størrelsesforholdet af billedet bevares.
• UniformToFill: Billedet skaleres så det fylder billedområdet fuldstændigt. Billedets størrelsesforhold bevares.
• Fill: Billedet vil blive skaleret, så det passer til området for billedkontrollen. Størrelsesforholdet bevares muligvis IKKE, fordi højden og bredden af billedet skaleres uafhængigt af hinanden.
• None: Hvis billedet er mindre end selve billedkontrollen, bliver der ikke gjort noget. Hvis det derimod er større end billedkontrollen, vil billedet blive beskåret, så det passer ind i billedkontrollen, hvilket er ensbetydende med, at kun en del af det vil være synligt.

Resume

WPF billedkontrollen gør det nemt for dig at vise et billede i din applikation, uanset om det er fra en fjern kilde, en indlejret ressource eller fra en lokal computer. Dette blev demonstreret i denne artikel.