کنترل Image
با استفاده از این کنترل میتوانید یک تصویر را در برنامه خود نمایش دهید. کاربرد این کنترل فقط نمایش یک تصویر ساده در برنامه نیست و شما میتوانید از آن داخل کنترلهای دیگر نیز استفاده کنید. برای مثال میتوانید یک تصویر را داخل یک Button قرار دهید. شما میتوانید از فرمتهای گوناگونی مانند bmp ،gif ،jpg ،png ،ico و tiff استفاده کنید.
در ابتدا لازم است تا یک تصویر را به پروژه خود اضافه کنید. برای این منظور ابتدا در پنجره Solution Explorer بر روی نام پروژه راست کلیک کنید و از منوی Add بر روی گزینه Existing Item کلیک کرده و تصویر مورد نظر خود را انتخاب کنید :
پس از اینکار تصویر انتخابی شما به پروژه اضافه میشود :
اکنون برای اینکه یک تصویر را در برنامه نمایش دهید کافی است عنصر <Image> را به صورت زیر به کدهای XAML برنامه اضافه کنید :
<Grid> <Image Source="Koala.jpg"/> </Grid>
برای اینکه تصویر مورد نظر خود را در این کنترل نمایش دهید کافی است نام تصویر را مقابل خاصیت Source بنویسید. حال زمانی که این برنامه را اجرا کنید خروجی زیر را نمایش میدهد :
با استفاده از ماوس ابعاد پنجره بالا را تغییر دهید، مشاهده خواهید کرد ابعاد تصویر نیز متناسب با آن تغییر میکند. اما شما با استفاده از خاصیت Stretch میتوانید این رفتار پیش فرض را تغییر دهید. در جدول زیر میتوانید مقادیر مختلف این خاصیت را مشاهده کنید :
مقدار | توضیحات |
Uniform | مقدار پیش فرض خاصیت Stretch است و باعث میشود تا تصویر، تمام فضای لایهای که در آن قرار دارد را با حفظ نسبت عرض و ارتفاع پوشش دهد. این مقدار از کشیده شدن و برش خوردن تصویر جلوگیری کرده و نسبت عرض و ارتفاع آن را حفظ میکند. |
UniformToFill | این مقدار باعث میشود تا تصویر، تمام فضای لایهای که در آن قرار دارد را با حفظ نسبت عرض و ارتفاع پوشش دهد. اما اگر نسبت عرض و ارتفاع تصویر اصلی متفاوت از نسبت عرض و ارتفاع لایهای باشد که در آن قرار دارد، بخش اضافی از تصویر بریده میشود. |
Fill | این مقدار باعث میشود تا تصویر بدون حفظ نسبت عرض و ارتفاع، تمام فضای لایهای که در آن قرار دارد را پوشش دهد. به عبارت دیگر اندازه عرض و ارتفاع ویدئو را بدون توجه به نسبت آنها تغییر میدهد و در برخی موارد باعث کشیده شده تصویر میشود. |
None | این مقدار باعث میشود تا تصویر با اندازه اصلی نمایش داده شود. اگر ابعاد تصویر بزرگتر از ابعاد لایهای باشد که در آن قرار دارد، آنگاه فقط بخشی از تصویر نمایش داده میشود. |
برای اینکه تفاوت بین مقادیر مختلف این خاصیت را بهتر درک کنید به مثال زیر توجه کنید :
<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 میتوانید از کوچکتر یا بزرگتر شدن تصویر جلوگیری کنید. در جدول زیر میتوانید مقادیر مختلف این خاصیت را مشاهده کنید :
مقدار | توضیحات |
UpOnly | این مقدار باعث میشود تا فقط بتوانید ابعاد تصویر را بزرگتر کنید و امکان اینکه تصویر را کوچکتر از ابعاد اصلی آن کنید وجود ندارد. اگر کنترلی که Image را داخل آن قرار دادید کوچکتر از ابعاد اصلی تصویر باشد، بخش اضافی آن برش میخورد. |
DownOnly | این مقدار باعث میشود تا فقط بتوانید ابعاد تصویر را کوچکتر کنید و امکان اینکه تصویر را بزرگتر از ابعاد اصلی آن کنید وجود ندارد. اگر کنترلی که Image را داخل آن قرار دادید بزرگتر از ابعاد اصلی تصویر باشد، بخش اضافی آن برش میخورد. |
Both | مقدار پیش فرض خاصیت StretchDirection است و به شما اجازه میدهد تا ابعاد تصویر را به طور دلخواه بزرگتر یا کوچکتر کنید. |
دسترسی به کنترل Image از طریق کد نویسی
شما میتوانید از کدهای سی شارپ هم برای نمایش یک تصویر در کنترل Image استفاده کنید. برای این منظور کافی است ابتدا یک نام را برای کنترل Image در نظر بگیرید، سپس با نوشتن آن نام در کدهای سی شارپ به کنترل خود دسترسی پیدا کنید :
<Grid> <Image Name="imageBox"/> </Grid>
در اینجا ما نام imageBox را برای کنترل Image در نظر گرفتیم. حال با استفاده از کد سی شارپ زیر میتوانید مقدار خاصیت Source را مشخص کنید :
imageBox.Source = new BitmapImage(new Uri("Koala.jpg", UriKind.Relative));
با استفاده از UriKind میتوانید نوع مسیر تصویر انتخابی را مشخص کنید. در جدول زیر میتوانید مقادیر مختلف نوع شمارشی UriKind را مشاهده کنید :
مقدار | توضیحات |
Relative | اگر این مقدار را انتخاب کنید آدرس تصویر انتخابی شما را نسبت به فایل اجرایی برنامه در نظر میگیرد. |
Absolute | اگر این مقدار را انتخاب کنید مجبورید آدرس کامل تصویر را بنویسید. برای مثال : C:/images/Koala.jpg |
RelativeOrAbsolute | به صورت خودکار یکی از حالتهای Relative یا Absolute را در نظر میگیرد. |