Создание элементов интерфейса с помощью Microsoft Expression Blend

Указываем путь к изображениям и добавляем их к проекту.

Подтверждаем добавление.

В панели инструментов есть элемент управления Button (кнопка). Активизируем его и размещаем кнопку в контейнере Grid.

Добавляем надпись.

После этого добавляем элемент управления Image: >> -> Controls -> All -> Image.

Разместим элемент управления Image в контейнере Grid.

Нажмем правой кнопкой мыши по элементу управления Image -> View Xaml.

Появится код 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;
        }
    }
}
    

Результат: