قبل از خواندن این مقاله، لطفاً مقالات زیر را مرور کنید.
مقدمه
دوباره خوش آمدید! ما همیشه اینجا هستیم تا موضوع جدیدی را در توسعه برنامه جهانی پلتفرم ویندوز بیاوریم زیرا همه چیز در مورد Windows Phone است. این آخرین بخش ما از کنترلهای پلتفرم ویندوز جهانی است. امروز در مورد کنترل تصویر در UWP صحبت خواهیم کرد. واقعا عالیه و حتما خوشتون میاد بنابراین، اجازه دهید در UWP Image Control کرک کنیم.
کار با Image Control
میتوانید یک کنترل تصویر را از جعبه ابزار بگیرید یا فقط یک کد ساده بنویسید، همانطور که در زیر نوشته شده است، همراه با تنظیم چهار دکمه Radio. ما در قسمت اول این بخش در مورد RadioButtons صحبت کرده ایم. اگر با RadioButton آشنایی ندارید، به راحتی به آن نگاهی بیندازید. بنابراین، طراحی ما مانند تصویر زیر است.
افزودن تصویر به پروژه ما
حالا، قبل از اینکه قدم برداریم، باید کمی کار کنیم. ما باید یک تصویر به پروژه خود اضافه کنیم. فقط روی Solution Explorer کلیک راست کرده و به Add >> New Folder بروید. نامی مانند «تصاویر» به آن بدهید.
حالا بر روی پوشه “Images” کلیک راست کرده و به Add >> Existing Item بروید. برای انتخاب تصویر مورد نظر خود به فهرست مقصد بروید. انتخاب کنید و اضافه کنید.
طراحی UI و Code Behind
Now، در کد XAML، مسیر تصویری را که در ویژگی منبع Image Control اضافه کرده اید نشان دهید. کد XAML در زیر آورده شده است.
- <Grid>
- <Image x:Name="Image1" HorizontalAlignment="Left" Height="473" VerticalAlignment="Top" Width="380" Source="Images/sample.jpg" Stretch="None" Margin="10,10,0,0" />
- <RadioButton x:Name="NoneButton" Content="None" HorizontalAlignment="Left" VerticalAlignment="Top" Checked="StretchModeButton_Checked" Margin="10,488,0,0" />
- <RadioButton x:Name="FillButton" Content="Fill" HorizontalAlignment="Left" VerticalAlignment="Top" Checked="StretchModeButton_Checked" Margin="222,488,0,0" />
- <RadioButton x:Name="UniformButton" Content="Uniform" HorizontalAlignment="Left" VerticalAlignment="Top" Checked="StretchModeButton_Checked" Margin="10,555,0,0" />
- <RadioButton x:Name="UniformToFillButton" Content="UniformToFill" HorizontalAlignment="Left" VerticalAlignment="Top" Checked="StretchModeButton_Checked" Margin="222,555,0,0" />
- </Grid>
لیست 1
در اینجا، ما مسیر کامل تصویر خود را در خط هفت نشان داده ایم. ما عمدتاً چهار ویژگی بزرگنمایی تصویر را نشان خواهیم داد - Fill، Uniform، Uniform to Fill و Normal (هیچ). چهار RadioButton ما این عملیات را انجام خواهند داد. کد سی شارپ در اینجا آورده شده است.
- private void StretchModeButton_Checked(object sender, RoutedEventArgs e)
- {
- RadioButton button = sender as RadioButton;
- if (Image1 != null) {
- switch (button.Name) {
- case "FillButton":
- Image1.Stretch = Windows.UI.Xaml.Media.Stretch.Fill;
- break;
- case "NoneButton":
- Image1.Stretch = Windows.UI.Xaml.Media.Stretch.None;
- break;
- case "UniformButton":
- Image1.Stretch = Windows.UI.Xaml.Media.Stretch.Uniform;
- break;
- case "UniformToFillButton":
- Image1.Stretch = Windows.UI.Xaml.Media.Stretch.UniformToFill;
- break;
- default:
- break;
- }
- }
- }
لیست 2
در اینجا، ما یک منطق بسیار ساده مانند عملیات Switch Case را اعمال کرده ایم. همانطور که در خط شماره نشان داده شده است، فقط هر RadioButton را با نام آن صدا می کنیم. 8، 11، 14، و 17، و با Windows Media Class تماس بگیرید. Image1 نام کنترل تصویر ما است. این خطوط بسیار کوچک از کدها واقعا مفید هستند.
اجرای برنامه
اگر برنامه را اجرا کنید، دقیقاً شبیه این خواهد بود.