Файл: Справочник для опытных и как пособие для начинающих программистов. Компактдиск содержит исходные коды примеров из книги.doc
ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 11.01.2024
Просмотров: 918
Скачиваний: 1
ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.
Toolbox дважды щелкнем по элементам управления Button и Image.
Скопируем в папку проекта изображение poryv.png, а затем добавим это изображение в проект командой Project | Add Existing Item. Теперь перейдем на вкладку программного кода Page1.xaml.cs и введем текст программы, представленный в листинге 16.3.
Листинг 16.3. WPF-приложение демонстрирует одну из возможностей анимации
// WPF-приложение выводит на Web-страницу командную кнопку и изображение. При щелчке на кнопке и на
// изображении демонстрируются возможности анимации кнопка расширяется, а затем медленно уменьшается до
// исходных размеров; аналогично поведение изображения
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media.Imaging;
// Другие директивы using удалены, поскольку они не используются в данной программе
namespace WpfXbapAниме
{
///
/// Interaction logic for Page1.xaml
///
public partial class Page1 : Page
{
public Page1()
{
InitializeComponent();
this.WindowTitle = "Анимационный эффект";
button1.Width = 100;
button1.Content = "Привет!";
button1.Focus();
image1.Source = new Bitmaplmage(new Uri("poryv.png", UriKind.Relative));
image1.Width = 100; image1 .Height = 100;
}
private void button1_Click(object sender, RoutedEventArgs e)
{
var Аниме = new System.Windows.Media.Animation.DoubleAnimation()
// Изменить размер от 160 до 100 пикселов:
Аниме.From = 160; Аниме.То = 100;
// Продолжительность анимационного эффекта 5 секунд:
Аниме.Duration = TimeSpan.FromSeconds(5);
// Начать анимацию:
Button1.BeginAnimation(Button.WidthProperty, Аниме);
}
private void imagel_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{ // Щелчок на изображении:
var Аниме = new System.Windows.Media.Animation.DoubleAnimation();
Аниме.From = 160; Аниме.To = 100;
Аниме.Duration = TimeSpan.FromSeconds(5);
imagel.BeginAnimation(Image.WidthProperty, Аниме);
imagel.BeginAnimation(Image.HeightProperty, Аниме);
}
}
}
Сразу после инициализации компонентов страницы InitializeComponent устанавливаем ширину кнопки и размеры изображения равными 100 пекселам. Размеры изображения автор взял из его свойств (контекстное меню изображения Свойства | Сводка). При щелчке на кнопке создаваемого WPF-приложения инициализируем новый экземпляр класса DoubleAnimation. Далее указываем, в каких пределах изменять ширину кнопки и продолжительность процесса анимации, и, наконец, командой BeginAnimation начинаем анимационный эффект с командной кнопкой Button1. Аналогичные установки и команды выполняем при щелчке мышью на изображении, только анимационным преобразованиям подвергаем одновременно ширину и высоту(
Height) изображения.
Фрагмент работы программы показан на рис. 16.2.
Рис. 16.2. Изображение плавно уменьшается
Убедиться в работоспособности программы можно, открыв решение в папке WpfХbarАниме.
Пример 121. Эффект постепенной замены (прорисовки) одного изображения другим
Создадим WPF-приложение, выполняемое в браузере, содержащее на Web-странице два изображения. В качестве изображений мы выбрали презентационные рисунки автомобилей Chevrolet Cavalier и BMW МЗ. Поскольку расположение их на странице является одинаковым, а также их размеры совпадают, пользователь видит только одно "верхнее" изображение. Таким образом, при загрузке страницы мы видим лишь автомобиль BMW МЗ. При щелчке мышью на видимом изображении оно становится все более прозрачным, постепенно "проявляя" "нижнее" изображение. Анимационный эффект длится пять секунд, в конце которого пользователь видит уже автомобиль Chevrolet Cavalier. Повторный щелчок мышью на изображении Chevrolet постепенно "проявляет" опять "верхнее" изображение, и мы вновь имеем честь видеть автомобиль BMW.
Для решения поставленной задачи запустим Visual Studio 2010, выберем среди инсталлированных шаблонов Windows шаблон WPF Browser Application и назовем его WpfXbapДвaИзo. Далее, перейдя на вкладку дизайна Page1.xaml, на панели элементов Toolbox дважды щелкнем по элементу Image. Поскольку нам требуются два таких элемента, сделаем это еще раз. Мы можем совершенно не волноваться, как будут расположены эти элементы на Web-странице, и какие их размеры будут заданы, поскольку об этом мы позаботимся в программном коде. Теперь скопируем в папку проекта изображения c1.bmp и c2.bmp (рисунки автомобилей Chevrolet Cavalier и BMW МЗ), а затем добавим эти изображения в проект командой Project | Add Existing Item. В окне Solution Explorer появятся значки этих двух файлов. Теперь перейдем на вкладку программного кода Page1.xaml.cs и введем текст программы, представленный в листинге 16.4.
Листинг 16.4. Постепенная замена одного изображения другим
// WPF-приложение содержит на Web-странице два изображения. Поскольку месторасположение обоих изображений //задано одинаково, а также совпадают размеры изображений, пользователь будет видеть только второе "верхнее"
// изображение. После щелчка на изображении оно становится все более прозрачным, постепенно "проявляя" тем самым
// "нижнее" изображение. После исчезновения "верхнего" изображения мы будем видеть только "нижнее"изображение.
// При повторном щелчке на изображении, наоборот, прозрачность верхнего изображения постепенно снижается, и в
// конце анимационного эффекта мы опять видим только "верхнее" изображение
using System;
using System. Windows;
using System. Windows .Controls;
using System.Windows.Input;
using System.Windows.Media.Imaging;
// Другие директивы using удалены, поскольку они не используются в данной программе
namespace WpfXbapДваИзо
{
///
/// Логика взаимодействия для Page1.xaml
///
public partial class Page1 : Page
{
bool Флажок = false;
public Page1()
{
InitializeComponent();
this.WindowTitle = "Щелкни на изображении";
// Изображение автомобиля Chevrolet Cavalier:
image1.Source = new Bitmaplmage(new Uri("c1.bmp", UriKind.Relative));
// Изображение автомобиля BMW M3:
image2.Source = new Bitmaplmage(new Uri(“c2.bmp", UriKind.Relative));
// Размеры изображений:
Image1.Width = 591; image1.Height = 258;
image2.Width = 591; image2.Height = 258;
// Расстояния от краев Web-страницы до сетки Grid:
Image1.Margin = new Thickness(10, 10, 0, 0) ;
image2 .Margin = new Thickness (10, 10, 0, 0);
// Присоединяем один обработчик двух событий:
Image1.MouseDown += new MouseButtonEventHandler(image_MouseDown);
image2.MouseDown += new MouseButtonEventHandler(image_MouseDown);
// image2.Opacity = 1; Свойство Opacity задает уровень непрозрачности
}
private void image_MouseDown(object sender, RoutedEventArgs e)
{ // Процедура обработки события "щелчок" на любом из изображений.
// Изменяем состояние флажка на противоположное:
Флажок = !Флажок; // Создаем объект анимации:
var Аниме = new System.Windows.Media.Animation.DoubleAnimation();
// Устанавливаем пределы изменения степени непрозрачности:
if (Флажок == true)
{ Аниме.From = 1; Аниме.То = 0; }
else
{ Аниме.From = 0; Аниме.То = 1; }
// Продолжительность анимационного эффекта задаем равной 5 секундам:
Аниме.Duration = TimeSpan.FromSeconds(5);
// Запускаем анимацию для "верхнего" изображения:
image2.BeginAnimation)Image.OpacityProperty, Аниме);
}
}
}
Как видно из программного кода, вначале задаем булеву переменную Флажок так, чтобы она была "видна" из обеих процедур класса Page1. Исходя из состояний этой переменной false или true, будем менять первое изображение на второе или наоборот. Сразу после вызова процедуры InitializeComponent задаем принадлежность рисунков c1.bmp и c2.bmp изображениям image1 и image2. Также задаем их размер и месторасположение на странице относительно сетки Grid. Присоединяем одну процедуру обработки двух событий, а именно, щелчок любой кнопкой мыши на одном изображении и на другом. Ниже пишем непосредственно процедуру обработки упомянутых событий
image_MouseDown. В этой процедуре в зависимости от состояния флажка задаем пределы изменения степени непрозрачности либо от 1 до 0, либо от 0 до 1. Затем запускаем анимацию для "верхнего" изображения. На рис. 16.3 показан фрагмент работы программы.
Рис. 16.3. После щелчка на изображении BMW МЗ постепенно прорисовывается автомобиль Chevrolet
Убедиться в работоспособности программы можно, открыв решение в папке WpfXbapДваИзо.
Пример 122. Закрашивание области текста горизонтальным линейным градиентом
Создадим автономное настольное WPF-приложение, включающее в себе текстовый блок, содержащий некоторый текст. Чтобы подчеркнуть значимость написанного, закрасим область текста с применением градиента. Градиент— это вид заливки в компьютерной графике, в которой необходимо задать цвета ключевых точек, а цвета остальных точек рассчитываются линейной интерполяцией. Таким образом, можно получать плавные переходы из одного цвета в другой, задав координаты и цвет начальной и конечной точек.
Для решения этой задачи запустим Visual Studio 2010, выберем среди инсталлированных шаблонов Windows шаблон WPF Application, т. е. автономное WPF-приложение, и назовем его WpfGradientText. Далее, перейдя на вкладку дизайна MainWindows.xaml, на панели элементов Toolbox дважды щелкнем по элементу TextBlock. Его размеры будем задавать в программном коде, поэтому сразу переходим на вкладку кода MainWindows.xaml.cs (листинг 16.5).
Листинг 16.5. Плавный переход от одного цвета к другому в области текстового блока
// Автономное WPF-приложение содержит текстовый блок. Цвет текста в этом блоке закрашен с применением градиента. //Между начальной t=0.0 и конечной t=1.0 точками области текста заданы две ключевые точки t=0.25 и t=0.75.
// Каждой точке ставим в соответствие цвета: желтый, красный, синий и зеленый. Между этими цветами задаем плавный // переход от одного цветак другому с помощью градиента
using System.Windows;
using System.Windows.Media;
// Другие директивы using удалены, поскольку они не используются в данной программе
namespace WpfGradientText
{
///
/// Interaction logic for MainWindow.xaml
///
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.Title = "Игорь Губерман";
textBlock1.Text = "Какие дамы, и не раз, шептали: \"Дорогой,\п" +
"Конечно, да, но не сейчас, не здесь, и не с тобой! \"";
textBlock1.Width = 470; textBlock1.Height = 50;
Скопируем в папку проекта изображение poryv.png, а затем добавим это изображение в проект командой Project | Add Existing Item. Теперь перейдем на вкладку программного кода Page1.xaml.cs и введем текст программы, представленный в листинге 16.3.
Листинг 16.3. WPF-приложение демонстрирует одну из возможностей анимации
// WPF-приложение выводит на Web-страницу командную кнопку и изображение. При щелчке на кнопке и на
// изображении демонстрируются возможности анимации кнопка расширяется, а затем медленно уменьшается до
// исходных размеров; аналогично поведение изображения
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media.Imaging;
// Другие директивы using удалены, поскольку они не используются в данной программе
namespace WpfXbapAниме
{
///
/// Interaction logic for Page1.xaml
///
public partial class Page1 : Page
{
public Page1()
{
InitializeComponent();
this.WindowTitle = "Анимационный эффект";
button1.Width = 100;
button1.Content = "Привет!";
button1.Focus();
image1.Source = new Bitmaplmage(new Uri("poryv.png", UriKind.Relative));
image1.Width = 100; image1 .Height = 100;
}
private void button1_Click(object sender, RoutedEventArgs e)
{
var Аниме = new System.Windows.Media.Animation.DoubleAnimation()
// Изменить размер от 160 до 100 пикселов:
Аниме.From = 160; Аниме.То = 100;
// Продолжительность анимационного эффекта 5 секунд:
Аниме.Duration = TimeSpan.FromSeconds(5);
// Начать анимацию:
Button1.BeginAnimation(Button.WidthProperty, Аниме);
}
private void imagel_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{ // Щелчок на изображении:
var Аниме = new System.Windows.Media.Animation.DoubleAnimation();
Аниме.From = 160; Аниме.To = 100;
Аниме.Duration = TimeSpan.FromSeconds(5);
imagel.BeginAnimation(Image.WidthProperty, Аниме);
imagel.BeginAnimation(Image.HeightProperty, Аниме);
}
}
}
Сразу после инициализации компонентов страницы InitializeComponent устанавливаем ширину кнопки и размеры изображения равными 100 пекселам. Размеры изображения автор взял из его свойств (контекстное меню изображения Свойства | Сводка). При щелчке на кнопке создаваемого WPF-приложения инициализируем новый экземпляр класса DoubleAnimation. Далее указываем, в каких пределах изменять ширину кнопки и продолжительность процесса анимации, и, наконец, командой BeginAnimation начинаем анимационный эффект с командной кнопкой Button1. Аналогичные установки и команды выполняем при щелчке мышью на изображении, только анимационным преобразованиям подвергаем одновременно ширину и высоту(
Height) изображения.
Фрагмент работы программы показан на рис. 16.2.
Рис. 16.2. Изображение плавно уменьшается
Убедиться в работоспособности программы можно, открыв решение в папке WpfХbarАниме.
Пример 121. Эффект постепенной замены (прорисовки) одного изображения другим
Создадим WPF-приложение, выполняемое в браузере, содержащее на Web-странице два изображения. В качестве изображений мы выбрали презентационные рисунки автомобилей Chevrolet Cavalier и BMW МЗ. Поскольку расположение их на странице является одинаковым, а также их размеры совпадают, пользователь видит только одно "верхнее" изображение. Таким образом, при загрузке страницы мы видим лишь автомобиль BMW МЗ. При щелчке мышью на видимом изображении оно становится все более прозрачным, постепенно "проявляя" "нижнее" изображение. Анимационный эффект длится пять секунд, в конце которого пользователь видит уже автомобиль Chevrolet Cavalier. Повторный щелчок мышью на изображении Chevrolet постепенно "проявляет" опять "верхнее" изображение, и мы вновь имеем честь видеть автомобиль BMW.
Для решения поставленной задачи запустим Visual Studio 2010, выберем среди инсталлированных шаблонов Windows шаблон WPF Browser Application и назовем его WpfXbapДвaИзo. Далее, перейдя на вкладку дизайна Page1.xaml, на панели элементов Toolbox дважды щелкнем по элементу Image. Поскольку нам требуются два таких элемента, сделаем это еще раз. Мы можем совершенно не волноваться, как будут расположены эти элементы на Web-странице, и какие их размеры будут заданы, поскольку об этом мы позаботимся в программном коде. Теперь скопируем в папку проекта изображения c1.bmp и c2.bmp (рисунки автомобилей Chevrolet Cavalier и BMW МЗ), а затем добавим эти изображения в проект командой Project | Add Existing Item. В окне Solution Explorer появятся значки этих двух файлов. Теперь перейдем на вкладку программного кода Page1.xaml.cs и введем текст программы, представленный в листинге 16.4.
Листинг 16.4. Постепенная замена одного изображения другим
// WPF-приложение содержит на Web-странице два изображения. Поскольку месторасположение обоих изображений //задано одинаково, а также совпадают размеры изображений, пользователь будет видеть только второе "верхнее"
// изображение. После щелчка на изображении оно становится все более прозрачным, постепенно "проявляя" тем самым
// "нижнее" изображение. После исчезновения "верхнего" изображения мы будем видеть только "нижнее"изображение.
// При повторном щелчке на изображении, наоборот, прозрачность верхнего изображения постепенно снижается, и в
// конце анимационного эффекта мы опять видим только "верхнее" изображение
using System;
using System. Windows;
using System. Windows .Controls;
using System.Windows.Input;
using System.Windows.Media.Imaging;
// Другие директивы using удалены, поскольку они не используются в данной программе
namespace WpfXbapДваИзо
{
///
/// Логика взаимодействия для Page1.xaml
///
public partial class Page1 : Page
{
bool Флажок = false;
public Page1()
{
InitializeComponent();
this.WindowTitle = "Щелкни на изображении";
// Изображение автомобиля Chevrolet Cavalier:
image1.Source = new Bitmaplmage(new Uri("c1.bmp", UriKind.Relative));
// Изображение автомобиля BMW M3:
image2.Source = new Bitmaplmage(new Uri(“c2.bmp", UriKind.Relative));
// Размеры изображений:
Image1.Width = 591; image1.Height = 258;
image2.Width = 591; image2.Height = 258;
// Расстояния от краев Web-страницы до сетки Grid:
Image1.Margin = new Thickness(10, 10, 0, 0) ;
image2 .Margin = new Thickness (10, 10, 0, 0);
// Присоединяем один обработчик двух событий:
Image1.MouseDown += new MouseButtonEventHandler(image_MouseDown);
image2.MouseDown += new MouseButtonEventHandler(image_MouseDown);
// image2.Opacity = 1; Свойство Opacity задает уровень непрозрачности
}
private void image_MouseDown(object sender, RoutedEventArgs e)
{ // Процедура обработки события "щелчок" на любом из изображений.
// Изменяем состояние флажка на противоположное:
Флажок = !Флажок; // Создаем объект анимации:
var Аниме = new System.Windows.Media.Animation.DoubleAnimation();
// Устанавливаем пределы изменения степени непрозрачности:
if (Флажок == true)
{ Аниме.From = 1; Аниме.То = 0; }
else
{ Аниме.From = 0; Аниме.То = 1; }
// Продолжительность анимационного эффекта задаем равной 5 секундам:
Аниме.Duration = TimeSpan.FromSeconds(5);
// Запускаем анимацию для "верхнего" изображения:
image2.BeginAnimation)Image.OpacityProperty, Аниме);
}
}
}
Как видно из программного кода, вначале задаем булеву переменную Флажок так, чтобы она была "видна" из обеих процедур класса Page1. Исходя из состояний этой переменной false или true, будем менять первое изображение на второе или наоборот. Сразу после вызова процедуры InitializeComponent задаем принадлежность рисунков c1.bmp и c2.bmp изображениям image1 и image2. Также задаем их размер и месторасположение на странице относительно сетки Grid. Присоединяем одну процедуру обработки двух событий, а именно, щелчок любой кнопкой мыши на одном изображении и на другом. Ниже пишем непосредственно процедуру обработки упомянутых событий
image_MouseDown. В этой процедуре в зависимости от состояния флажка задаем пределы изменения степени непрозрачности либо от 1 до 0, либо от 0 до 1. Затем запускаем анимацию для "верхнего" изображения. На рис. 16.3 показан фрагмент работы программы.
Рис. 16.3. После щелчка на изображении BMW МЗ постепенно прорисовывается автомобиль Chevrolet
Убедиться в работоспособности программы можно, открыв решение в папке WpfXbapДваИзо.
Пример 122. Закрашивание области текста горизонтальным линейным градиентом
Создадим автономное настольное WPF-приложение, включающее в себе текстовый блок, содержащий некоторый текст. Чтобы подчеркнуть значимость написанного, закрасим область текста с применением градиента. Градиент— это вид заливки в компьютерной графике, в которой необходимо задать цвета ключевых точек, а цвета остальных точек рассчитываются линейной интерполяцией. Таким образом, можно получать плавные переходы из одного цвета в другой, задав координаты и цвет начальной и конечной точек.
Для решения этой задачи запустим Visual Studio 2010, выберем среди инсталлированных шаблонов Windows шаблон WPF Application, т. е. автономное WPF-приложение, и назовем его WpfGradientText. Далее, перейдя на вкладку дизайна MainWindows.xaml, на панели элементов Toolbox дважды щелкнем по элементу TextBlock. Его размеры будем задавать в программном коде, поэтому сразу переходим на вкладку кода MainWindows.xaml.cs (листинг 16.5).
Листинг 16.5. Плавный переход от одного цвета к другому в области текстового блока
// Автономное WPF-приложение содержит текстовый блок. Цвет текста в этом блоке закрашен с применением градиента. //Между начальной t=0.0 и конечной t=1.0 точками области текста заданы две ключевые точки t=0.25 и t=0.75.
// Каждой точке ставим в соответствие цвета: желтый, красный, синий и зеленый. Между этими цветами задаем плавный // переход от одного цветак другому с помощью градиента
using System.Windows;
using System.Windows.Media;
// Другие директивы using удалены, поскольку они не используются в данной программе
namespace WpfGradientText
{
///
/// Interaction logic for MainWindow.xaml
///
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.Title = "Игорь Губерман";
textBlock1.Text = "Какие дамы, и не раз, шептали: \"Дорогой,\п" +
"Конечно, да, но не сейчас, не здесь, и не с тобой! \"";
textBlock1.Width = 470; textBlock1.Height = 50;