Создание элементов интерфейса с помощью Microsoft Expression Blend
Указываем путь к изображениям и добавляем их к проекту.
Подтверждаем добавление.
В панели инструментов есть элемент управления Button (кнопка). Активизируем его и размещаем кнопку в контейнере Grid.
Добавляем надпись.
После этого добавляем элемент управления Image: >> -> Controls -> All -> Image.
Разместим элемент управления Image в контейнере Grid.
Нажмем правой кнопкой мыши по элементу управления Image -> View Xaml.
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="p4.MainPage"
Width="640" Height="480">
<Grid x:Name="LayoutRoot" Background="White">
<Button Content="Отобразить картинку!" HorizontalAlignment="Left" Height="47"
Margin="13,20,0,0" VerticalAlignment="Top" Width="177"/>
<Image Margin="17,95,19,31"/>
</Grid>
</UserControl>
Добавим свойство Name в элемент управления Image:
<Image Margin="17,95,19,31" Name="img"/>
Добавим событие Click в код xaml кнопки: Click="bttn_Click"
В итоге мы имеем следующий код MainPage.xaml:
<UserControl x:Class="p4_1.MainPage"
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"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="White">
<Button Name="bttn" Click="bttn_Click" Content="Отобразить картинку!" HorizontalAlignment="Left"
Height="47" Margin="13,20,0,0" VerticalAlignment="Top"
Width="177" />
<Image Name="img" />
</Grid>
</UserControl>
Затем перейдем в окно кода и впишем:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Media.Imaging;
namespace p4_1
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
}
private void bttn_Click(object sender, RoutedEventArgs e)
{
string[] picture = new string[] {"1.png", "2.png", "3.png", "4.png", "5.png", "6.png", "7.png" };
int n = picture.Length - 1;
Random rand = new Random();
string str = "Images/" + picture[rand.Next(n)];
BitmapImage bmi = new BitmapImage(new Uri(str, UriKind.RelativeOrAbsolute));
img.Source = bmi;
}
}
}
При нажатии на кнопку отображаются фотографии случайным образом.
Упражнение 11.2. Работа с холстом
В ходе выполнения данной работы вместо контейнера Grid (сетка) мы будем использовать холст (Canvas).
Создаем новый проект Silverlight в Microsoft Expression Blend. Назовем проект p4_2.
Правой кнопкой мыши щелкаем по файлу MainPage.xaml Edit Externally
При этом в блокноте открывается код:
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="p4_2.MainPage"
Width="640" Height="480">
<Grid x:Name="LayoutRoot" Background="White"/>
</UserControl>
Раздел контейнера <Grid…> нужно заменить на
<Canvas Name="cn1">
</Canvas>
Затем из панели элементов нужно перетащить кнопку, задать ее размеры и сделать надпись:
Кнопке будет соответствовать следующий код xaml:
<Button FontSize="18" Name="bttn" Click="bttn_Click" Content="Выбрать цветок!" Height="50"
Canvas.Left="10" Canvas.Top="10" Width="170"/>
Далее, добавляем раскрывающийся список ComboBox (cmbFlower) и элемент управления ContentControl (cnt)
В результате мы получаем следующий код xaml:
<UserControl x:Class="p4_2.MainPage"
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"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Canvas Name="cn1">
<Button FontSize="18" Name="bttn" Click="bttn_Click"
Content="Выбрать цветок!" Height="50" Canvas.Left="10"
Canvas.Top="10" Width="170"/>
<ComboBox Canvas.Left="200" Canvas.Top="10" Name="cmbFlower"
FontSize="18" Width="170" Height="50">
</ComboBox>
<ContentControl FontSize="18" Canvas.Left="10" Canvas.Top="90"
Height="50" Name="cnt" Width="500" />
</Canvas>
</UserControl>
Добавим нашему приложению функциональности. Код MainPage.xaml.cs:
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace p4_2
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
FillcmbFlower();
}
private void FillcmbFlower()
{
cmbFlower.Items.Add("Роза");
cmbFlower.Items.Add("Ландыш");
cmbFlower.Items.Add("Магнолия");
cmbFlower.Items.Add("Шафран");
cmbFlower.Items.Add("Хризаетемма");
}
private void bttn_Click(object sender, RoutedEventArgs e)
{
string strFlower, str;
strFlower = System.Convert.ToString(cmbFlower.SelectedValue);
str = "Ваш любимый цветок ... " + strFlower + ". Отличный выбор!";
cnt.Content = str;
}
}
}
Результат:
