Image Kontrolü

WPF Image kontrolü uygulamanız içinde resimler göstermenize imkan sağlar. Bu makalede göreceğiniz üzere bir çok yararlı seçenekleri ve metodları olan esnek yapılı bir kontroldür. Fakat ilk olarak Pencerede bir resim gösteren en basit örnekle başlayalım :

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

Sonuç şuna benzer görünecektir :

Bu örnekte kullandığımız Source özelliği gösterilecek resmi belirtir ve bu kontrolün en önemli özelliğidir. Bu yüzden deşmeye bununla başlayalım.

Source özelliği

İlk örneğimizde gördüğünüz üzere Source özelliği Image kontrol içinde gösterilecek resmi belirlemek için kullanılır - bu örnekte internetten bir resim kullandık ve Image kontrolü göründüğü andan sonra en kısa zamanda bu resmi internetten çekerek gösterir. Bu Image kontrolün ne kadar esnek olduğuna güzel bir örnek, ancak birçok durumda resimleri uzak kaynaktan kullanmak yerine uygulamanız ile aynı pakette vermek istersiniz. Bu kolaylıkla yapılabilir!

Belki biliyorsunuz, uygulamanıza kaynak dosyaları ekleyebilirsiniz - çalıştığınız Visual Studio projesi içinde bulunurlar ve çözüm gezgininde (solution explorer) diğer WPF bağlantılı dosyalar gibi görünürler (pencereler , kodlar vs gibi). Kaynak dosyasına uygun örneklerden biri resim dosyaları, dosyayı dahil etmek için projenin uygun bir klasörüne kopyalarsınız ve (eğer siz VS'ya bunu yapmamasını ayrıca belirtmezseniz) projeniz derlenirken bunlar da dahil olur. Sonrasında kaynaklar için kullanılan URL formatıyla bu resimlere ulaşabilirsiniz. Yani "Images" adında bir klasörde "google.png" adında bir resim varsa kod şuna benzer :

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

Bu URI yazımı genelde "Pack URI'ler" olarak adlandırılır ve çok daha ayrıntıları olan ağır bir konudur, ama şimdilik esasen iki parçadan oluştuğuna dikkat edin :

• İk parça (/WpfTutorialSamples;component) derleme adının nerede olduğunu "component" kelimesi ile birlikte gösterir (WpfTutorialSamples benim uygulamam içinde demek)
• İkinci parça /Images/google.png ile kaynağın bağıl yolunu belirtir

Bu deyim yapısını kullanarak uygulamanız içindeki kaynaklara kolayca referans verebilirsiniz. Bunu basitleştirmek için WPF framework ayrıca basit bağıl URL de kabul eder - bu eğer uygulamanızda kaynaklara dair daha karmaşık bir şeyler yapmadıysanız yeterlidir. Basit bağıl URL kullanarak şöyle de yazılabilir :

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

Resimleri dinamik olarak yüklemek (arkaplan kodunda)

Birçok durumda resim kaynağını XAML içinde direk belirtmek sağlıklı çalışacaktırfakat bazen örn. kullanıcının tercihine göre resmi dinamik olarak yüklemeniz gerekebilir. Bunu arkaplan kodunda yapmak mümkündür. Buradaki örnek, bilgisayarınızda bulunan bir resmi OpenFileDialog ile seçtirerek nasıl yapacağınızı gösteriyor :

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);
    }
}

Diyalogda seçilen dosya path değerinden bir Uri nesnesi oluşturarak onunla da bir BitmapImage oluşturduğuma dikkat edin. Tamamıyla aynı tekniği kullanarak uygulamamızın kaynaklarında yer alan bir resmi de yükleyebiliriz :

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

Daha önceki örneklerimizden birinde gösterilen bağıl path şeklini kullandık - UriKind.Relative değerini Uri oluşumu tanımlarken girerek mutlak değil bağıl bir path olduğunu belirtiyoruz. Bu arkaplan kodu örneğinin XAML dosyası şöyle :

<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 özelliği

Önemi açıkça belli Source özelliğinden sonra bence ikinci önemli Image kontrol özelliği Stretch. Yüklenen resmin boyutları ile Image kontrolün boyutları uyuşmadığında ne olacağını kontrol eder. Bu eğer pencere yerleşiminiz çok sabit yapılmamışsa kullanıcı pencereyi boyutlandırdığında ortaya çıkar, bu durumda Image kontrolün de boyutları değişecektir.

Bu sonraki örnekte göreceğiniz üzere Stretch özelliği resmin nasıl görüneceğini oldukça değiştirir :

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

Anlatması zor ama dört Image kontrolü de aynı resmi gösteriyor, fakat Stretch özelliklerinde farklı değerler var. İşte değişik modların nasıl çalıştığı :

• Uniform: Bu default mode. Resim içinde bulunulan kontrolün boyutlarına sığacak şekilde boyut değiştirir ama resmin Aspect ratio (yani en-boy oranı) korunarak.
• UniformToFill: Resim en-boy oranı korunarak içinde bulunduğu kontrolün tamamını doluracak şekilde boyutlandırılır. En ya da boydan fazla gelen kısımlar görünmez.
• Fill: Resim Image kontrol boyutlarına göre en-boy oranı korunmadan boyutlandırılır, çünkü genişlik ve yükseklik birbirinden bağımsız değiştirilir. Bir nevi çekilip sündürülmüş gibi olur.
• None:resmin boyutları değiştirilmez, eğer resim Image kontrolden küçükse hiç bir şey olmaz, ama resim daha büyükse Image kontrol boyutlarına göre kırpılır. Yani bir kısmı görünür.

Sonuç

WPF Image kontrolü bu makalede görüldüğü gibi ister uzak kaynaktan olsun, ister uygulamaya birleştirilmiş kaynaktan olsun, ister yerel bilgisayarda herhangi bir yerden olsun resimleri uygulamanızda kullanmanız için kolay kullanılır bir kontrol.