آموزش برنامه نویسی

کنترل Image

با استفاده از این کنترل می‌توانید یک تصویر را در برنامه خود نمایش دهید. کاربرد این کنترل فقط نمایش یک تصویر ساده در برنامه نیست و شما می‌توانید از آن داخل کنترل‌های دیگر نیز استفاده کنید. برای مثال می‌توانید یک تصویر را داخل یک Button قرار دهید. شما می‌توانید از فرمت‌های گوناگونی مانند bmp ،gif ،jpg ،png ،ico و tiff استفاده کنید.

در ابتدا لازم است تا یک تصویر را به پروژه خود اضافه کنید. برای این منظور ابتدا در پنجره Solution Explorer بر روی نام پروژه راست کلیک کنید و از منوی Add بر روی گزینه Existing Item کلیک کرده و تصویر مورد نظر خود را انتخاب کنید :

پس از اینکار تصویر انتخابی شما به پروژه اضافه می‌شود :

اکنون برای اینکه یک تصویر را در برنامه نمایش دهید کافی است عنصر <Image> را به صورت زیر به کدهای XAML برنامه اضافه کنید :

<Grid>
    <Image Source="Koala.jpg"/>
</Grid>

برای اینکه تصویر مورد نظر خود را در این کنترل نمایش دهید کافی است نام تصویر را مقابل خاصیت Source بنویسید. حال زمانی که این برنامه را اجرا کنید خروجی زیر را نمایش می‌دهد :

با استفاده از ماوس ابعاد پنجره بالا را تغییر دهید، مشاهده خواهید کرد ابعاد تصویر نیز متناسب با آن تغییر می‌کند. اما شما با استفاده از خاصیت Stretch می‌توانید این رفتار پیش فرض را تغییر دهید. در جدول زیر می‌توانید مقادیر مختلف این خاصیت را مشاهده کنید :

برای اینکه تفاوت بین مقادیر مختلف این خاصیت را بهتر درک کنید به مثال زیر توجه کنید :

<Grid ShowGridLines="True">
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>

    <Image Source="Koala.jpg" Stretch="None"/>
    <TextBlock Foreground="Black" 
            FontWeight="Bold" 
            FontSize="20">None</TextBlock>

    <Image Grid.Column="1" Source="Koala.jpg" Stretch="Uniform"/>
    <TextBlock Grid.Column="1" 
            Foreground="Black" 
            FontWeight="Bold" 
            FontSize="20">Uniform</TextBlock>

    <Image Grid.Row="1" Source="Koala.jpg" Stretch="UniformToFill"/>
    <TextBlock Grid.Row="1" 
            Foreground="Black" 
            FontWeight="Bold" 
            FontSize="20">UniformToFill</TextBlock>

    <Image Grid.Column="1" Grid.Row="1" Source="Koala.jpg" Stretch="Fill"/>
    <TextBlock Grid.Column="1" 
            Grid.Row="1" 
            Foreground="Black" 
            FontWeight="Bold" 
            FontSize="20">Fill</TextBlock>
</Grid>

زمانی که این برنامه را اجرا کنید خروجی زیر را نمایش می‌دهد :

با استفاده از خاصیت StretchDirection می‌توانید از کوچکتر یا بزرگتر شدن تصویر جلوگیری کنید. در جدول زیر می‌توانید مقادیر مختلف این خاصیت را مشاهده کنید :

دسترسی به کنترل Image از طریق کد نویسی

شما می‌توانید از کدهای سی شارپ هم برای نمایش یک تصویر در کنترل Image استفاده کنید. برای این منظور کافی است ابتدا یک نام را برای کنترل Image در نظر بگیرید، سپس با نوشتن آن نام در کدهای سی شارپ به کنترل خود دسترسی پیدا کنید :

<Grid>
    <Image Name="imageBox"/>
</Grid>

در اینجا ما نام imageBox را برای کنترل Image در نظر گرفتیم. حال با استفاده از کد سی شارپ زیر می‌توانید مقدار خاصیت Source را مشخص کنید :

imageBox.Source = new BitmapImage(new Uri("Koala.jpg", UriKind.Relative));

با استفاده از UriKind می‌توانید نوع مسیر تصویر انتخابی را مشخص کنید. در جدول زیر می‌توانید مقادیر مختلف نوع شمارشی UriKind را مشاهده کنید :