Related posts

• No related posts.

Related posts

• Книги по технологии Microsoft Silverlight (0)
• Навигация между страницами (15)
• Пример использования Web Service и Data Binding в Silver Light (3)
• Контролы - контейнеры (4)
• Простой MediaPlayer (6)

Детский портал и технология Silverlight

Вот теперь мы видим на деле, как технология Silverlight внедряется постепенно в нашу жизнь. И начинаем мы с малого поколения.
ВГТРК и Microsoft открыли детский портал «Бибигоша

Вот что было опубликовано на самом сайте Microsoft:
Сегодня Всероссийская государственная телевизионная и радиовещательная компания (ВГТРК) и компания Microsoft объявили о запуске детского портала «Бибигоша». Проект представляет уникальное сочетание современных технологических разработок Microsoft и богатого медиа наполнения от ВГТРК. Портал создан в рамках стратегического партнерства компаний при активном участии российского разработчика TVX Games.

Новый портал «Бибигоша» представляет собой полностью защищенное интернет-пространство, где ребенок сможет получить новые знания и с удовольствием провести время благодаря ресурсам медиа-библиотеки ВГТРК. При реализации проекта «Бибигоша» активно применялась новая технология Microsoft Silverlight 2, которая позволила разработчикам в кратчайшие сроки создать мощный целостный портал и предоставить функционально богатую историю пользователям. Кроме того, благодаря Silverlight 2 портал предъявляет минимальные требования к скорости интернет-соединения, что позволит детям из разных регионов страны воспользоваться его возможностями.

Первоисточник http://www.microsoft.com/rus/news/issues/2009/02/bibigosha.mspx

»

Related posts

• Книги по технологии Microsoft Silverlight (0)
• Microsoft Silverlight 2 релиз (3)

И так, для начала советую прочесть предыдущую статью. Для тех, кто этого делать не хочет, все таки попрошу себя пересилить и прочитать ;)
А кто не помнит, что было в ней напоминаю. Решаем следующую задачу. Мы получается коллекцию классов, которую мы выводим в виде элементов. Затем надо сделать необходимые действия. В нашем примере мы выделяем один из элементов.

И так посмотрим, представление в XAML:

<Grid  x:Name="LayoutRoot" Background="White">
	  <ItemsControl  x:Name="FilmList">
		  <ItemsControl.ItemTemplate>
			  <DataTemplate>
				  <StackPanel  Orientation="Horizontal" Background="Magenta"  Margin="0,5,0,5"  MouseLeftButtonDown="StackPanel_MouseLeftButtonDown" >
					  <Image  Source="{Binding Image}" Width="30" Height="30"  Margin="5" MouseLeftButtonDown="Image_MouseLeftButtonDown"  />
					  <TextBlock  Text="{Binding Title}" Margin="5" />
					  <TextBlock  Text="{Binding Time}" Margin="5" />
					  <TextBlock  Text="{Binding FileSize}" Margin="5" />
				  </StackPanel>
			  </DataTemplate>
		  </ItemsControl.ItemTemplate>
	  </ItemsControl>
  </Grid>

Вынесем повторяющиеся элементы в отдельный контрол, назовем его Item. И так создайте новый UserControl и вынесем в него следующий код:

<UserControl  x:Class="DataBindingExamples.Item"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="600">
	  <StackPanel  x:Name="LayoutRoot">
	  <!— НАШ ЭЛЕМЕНТ -->
		  <StackPanel  x:Name="ItemLayout" Orientation="Horizontal"  Background="Magenta" Margin="0,5,0,5"  MouseLeftButtonDown="ItemLayout_MouseLeftButtonDown">
			  <Image  x:Name="FilmImage" Width="30" Height="30"  Margin="5" />
			  <TextBlock  x:Name="TextTitle" Margin="5" />
			  <TextBlock x:Name="TextTime"  Margin="5" />
			  <TextBlock  x:Name="TextFileSize" Margin="5" />
		  </StackPanel>
	  <!— НАШ ЭЛЕМЕНТ -->
	  </StackPanel>
  </UserControl>

Я убрал все бинд выражения, также изменилось событие MouseLeftButtonDown. Теперь этот элемент мы будем размножать, но нам как-то необходимо устанавливайте свойство наших внутренних элементов. Для этого воспользуемся конструктором и будем в него передавать наши параметры. Еще  нам понадобиться событие, которое будет происходить при клике на этот элемент, и его мы в последствии будем вытаскивать наверх, чтобы знать, что данные элемент кликнут. Также мы создадим метод устанавливающий цвет заднего фона для удобства.

C#:

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.Imaging;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace DataBindingExamples
{
    public partial class Item : UserControl
    {
        //событие клика на элемент
        public event EventHandler ItemClick;
        //храним текущий ID записи
        public int CurrentId;

        //Конструтор нашего Item
        public Item( int id, string title, int time, string fileSize, string imageSource )
        {
            //Устанавливаем свойства внутренних контролов и инициализируем переменные
            InitializeComponent();
            ItemLayout.Tag = id;
            TextTitle.Text = title;
            TextTime.Text = time.ToString();
            TextFileSize.Text = fileSize;

            FilmImage.Source = new BitmapImage(new Uri(imageSource));
            CurrentId = id;
        }

        //Метод меняет фон элемента
        public void SetBackground(Color color)
        {
            ItemLayout.Background = new SolidColorBrush(color);
        }

        private void ItemLayout_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            //вызваем наше событие клика на элемент
            if (ItemClick != null)
                ItemClick(this, new ItemEventArgs(Convert.ToInt32(((StackPanel)sender).Tag)));
        }
    }

    //Создадим свой класс, чтобы передавать в параметрах ID кликнутого элемента
    public class ItemEventArgs : EventArgs
    {
        public ItemEventArgs(int id)
        {
            ID = id;
        }

        public int ID { get; set; }
    }
}

И так элемент, готов он умеет делать все, что нам надо и теперь его можно использовать.

Создадим на нашей странице StackPanel в коллекцию, которого мы добавим наши Item.

XAML:

<UserControl  x:Class="DataBindingExamples.Page"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="600"  Height="800">
	  <Grid x:Name="LayoutRoot"  Background="White">
		  <StackPanel  x:Name="FilmsItems" />
	  </Grid>
  </UserControl>

Теперь нам необходимо, получить коллекцию классов от нашего вебсервиса, потом пробежать по ней получить коллекцию Item. И ее в свою очередь добавить в коллекцию FilmsItems.

C#:

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 DataBindingExamples.WebSrv;

namespace DataBindingExamples
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();

            //получаем нашу коллекцию фильмов
            var connector = new MyWebServiceSoapClient();
            connector.GetFimlsCompleted += connector_GetFimlsCompleted;
            connector.GetFimlsAsync();
        }

        void connector_GetFimlsCompleted(object sender, GetFimlsCompletedEventArgs e)
        {
            if (e.Error != null)
                return;

            if (e.Result.Count > 0)
            {
                List list = new List(e.Result);

                //Создаем наши Item  и добавляем в коллекцию FilmsItems
                foreach (Film current in list)
                {
                    Item item = new Item(current.Id, current.Title, current.Time, current.FileSize, current.Image);

                    //Подписываем на событие
                    item.ItemClick += item_ItemClick;
                    FilmsItems.Children.Add(item);
                }
            }
        }
        
        void item_ItemClick(object sender, ItemEventArgs e)
        {
            //бежим по коллекции StackPanel (FilmsItems)
            foreach (UIElement current in FilmsItems.Children)
            {
                //Выделяем текцщий элемент
                if (Convert.ToInt32(((Item)current).CurrentId) == e.ID)
                {
                    ((Item)current).SetBackground(Colors.Red);
                }
                else
                {
                    ((Item)current).SetBackground(Colors.Magenta);
                }
            }
        }
    }
}

И так проверяем, как видим наш элементы правильно отрабатывают, на события клика, и мы можем получать доступ к любым свойствам любых контролов нашего Item. Изменив, идентификатор доступа, либо добавив новый метод.

Удобно или нет, решать вам.
Этот способ дает нам намного больше гибкости и свободы, и не дает никаких ограничений.

Но в тоже время значительно трудоемок, и требует написания большего количества, двух отдельных контролов. Хотя если контрол используется во многих местах, вам все равно лучше его вынести.

Я надеюсь, эта статья помогла вам, более глубже, окунуться в DataBinding и пути решения проблем при работе с ним. Жду ваших вопросов.

Related posts

• Управление контролами в ItemsControl (часть 1 - с помощью VisualTreeHelper) (3)
• Custom Control (6)
• Пример использования Web Service и Data Binding в Silver Light (3)

Естественно существуют контролы, которые позволяют нам выводить повторяющиеся структуры, например GridView или ListBox. Первый все таки подходит для табличных данных, текстовой информации, да и дизайн мы особо то изменить не можем, я имею ввиду места вывода данных. ListBox более гибче, и он в принципе нам подходит, единственный недостаток его стандартный темплейт.  Хотя мы и можем поменять темплейт и заставить его работать, как это нам надо, задача у нас сейчас состоит немного в другом. 

Мы будем использовать ItemsControl он удобен для вывода любых данных с помощью DataBinding и позволяет нам менять шаблон, а в шаблоне по умолчанию содержится только StackPanel.

И так приступим. Кто не читал статью про DataBinding, советую для начала прочесть ее, чтобы вам было более понятно, что мы будем делать.
1) Создаем веб – сервис
2) Создаем наш класс, в нашем случае Film
3) Создаем метод которые вернет список наших Film
4) Получаем данные на стороне Silverlight
5) Биндим их к нашему ItemControls

Создайте проект. Затем в веб проекте добавляем веб сервис и у него создаем класс Film и метод отдающий список Film.
Подключаем Service Reference в проекте Silverlight.

Код нашего Веб сервиса:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

namespace DataBindingExamples.Web
{
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]

    public class MyWebService : System.Web.Services.WebService
    {

        [WebMethod]
        public string HelloWorld()
        {
            return "Hello World";
        }

        [WebMethod]
        public List GetFimls ()
        {
            List list = new List();

            for (var i = 0; i < 10; i++)
            {
                Film film = new Film();
                film.Id = i;
                film.Title = String.Format("Film Title {0} ", i);
                film.FileSize = String.Format("{0}", 100*i);
                film.Time = i*200;
                film.Image = String.Format("http://localhost/silverlight/{0}.jpg", i);

                list.Add(film);
            }

            return list;
        }
    }

    public class Film
    {
        public int Id { get; set; }
        public string Title { get; set; }
        public int Time { get; set; }
        public string FileSize { get; set; }
        public string Image { get; set; }
    }
}

Теперь нам нужен контрол, который будет отображать наши фильмы. Создаем ItemsControl и внутри прописываем DataBinding для всех полей нашего класса.

Код XAML:

<UserControl x:Class="DataBindingExamples.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="600" Height="800">
<Grid x:Name="LayoutRoot" Background="White">
	<ItemsControl x:Name="FilmList">
			<ItemsControl.ItemTemplate>
			<DataTemplate>
				<StackPanel Orientation="Horizontal" Background="Bisque" Margin="0,5,0,5">
					<Image  Source="{Binding Image}" Width="30" Height="30" Margin="5" />
					<TextBlock Text="{Binding  Title}" Margin="5" />
					<TextBlock  Text="{Binding Time}" Margin="5" />
					<TextBlock  Text="{Binding FileSize}" Margin="5" />
				</StackPanel>
			</DataTemplate>
		</ItemsControl.ItemTemplate>
	</ItemsControl>
</Grid>
</UserControl>

Все очень просто теперь в CodeBehind добавлеем полученные данные от WebService в наш ItemsCotrol.

Код C#

using System;
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 DataBindingExamples.WebSrv;

namespace DataBindingExamples
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();

            var connector = new MyWebServiceSoapClient();
            connector.GetFimlsCompleted += connector_GetFimlsCompleted;
            connector.GetFimlsAsync();
        }

        void connector_GetFimlsCompleted(object sender, GetFimlsCompletedEventArgs e)
        {
            if (e.Error != null)
                return;

            if (e.Result.Count > 0)
            {
                List list = new List(e.Result);
                FilmList.ItemsSource = list;
            }
        }
    }
}

Посмотрим на результат. Все отлично. Выводиться как мы хотели. Но есть один очень большой недостаток. Который мне очень долго не удавлось исправить. У нас нет никакого события, которые позволяет, что то делать с элементами, которые генерируются, на основе нашего List.

Например, у нас стоит задача выделять какой то элемент при клике на него. Мы это можем сделать, повесив обработчик OnClick на наш StackPanel. Вот так:

Код XAML:

<StackPanel Orientation="Horizontal" Background="Bisque" Margin="0,5,0,5" MouseLeftButtonDown="StackPanel_MouseLeftButtonDown"  >
  <Image  Source="{Binding Image}" Width="30" Height="30" Margin="5" />
	  <TextBlock  Text="{Binding Title}" Margin="5" />
	  <TextBlock  Text="{Binding Time}" Margin="5" />
	  <TextBlock  Text="{Binding FileSize}" Margin="5" />
  </StackPanel>

Обрабатываем событие:

Код C#:

private void StackPanel_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
	//для примера мы меняем его фон
	((StackPanel)sender).Background = new SolidColorBrush(Colors.Red);
}

Но если мы кликнем на другой элемент, мы поменяем его фон, а вот предыдущий у нас тоже останется выделенным, то есть мы не имеем к нему доступ. То есть мы не может получить доступ к коллекции элементов ItemsControl.

Конечно, это создает очень много неудобств и ограничение функционала. Изучение справки и помощь моего друга, помогло нам найти решение.  VisualTreeHelper класс помогающий нам проходить по коллекции элементов контрола с помощью его методов.

Для начала немного объясню, что у нас получается или точнее во что у нас генерируется ItemsControl. После того, как мы присвоили свойству ItemSource наш List мы получаем пример такую вот структуру.

<!--  Корневой  элемент представления контента ItemsControl -->
  <ItemsPresenter>
	  <!--  StackPanek по умолчанию, про которую я говорил содержит коллекцию элементов  ItemsControl -->
	  <StackPanel>
		  <ContentPresenter>
		  <!--  Наша текущая панель которую нам надо получить -->
			  <StackPanel>
				  <Image  />
				  <TextBlock  />
				  <TextBlock  />
				  <TextBlock  />
			  </StackPanel>
		  </ContentPresenter>
		  <ContentPresenter>
			  <StackPanel>
				  <Image  />
				  <TextBlock  />
				  <TextBlock  />
				  <TextBlock  />
			  </StackPanel>
		  </ContentPresenter>
		  <ContentPresenter>
			  <StackPanel>
				  <Image  />
				  <TextBlock  />
				  <TextBlock  />
				  <TextBlock  />
			  </StackPanel>
		  </ContentPresenter>
	  </StackPanel>
  </ItemsPresenter>
 

И так нам нужно достучаться до внутренних элементов и делаем мы это вот так:

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 DataBindingExamples.WebSrv;

namespace DataBindingExamples
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();

            var connector = new MyWebServiceSoapClient();
            connector.GetFimlsCompleted += connector_GetFimlsCompleted;
            connector.GetFimlsAsync();
        }

        void connector_GetFimlsCompleted(object sender, GetFimlsCompletedEventArgs e)
        {
            if (e.Error != null)
                return;

            if (e.Result.Count > 0)
            {
                List list = new List(e.Result);
                FilmList.ItemsSource = list;
            }
        }

        private void StackPanel_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            //Достаем ItemsPresenter для Нашего ItemsControl
            ItemsPresenter itemsPresenter = (ItemsPresenter)VisualTreeHelper.GetChild(FilmList, 0);
            //Достаем StackPanel для Нашего ItemsControl
            StackPanel rootStackPanel = (StackPanel)VisualTreeHelper.GetChild(itemsPresenter, 0);

            //бежим по коллекции ContentPresenter которые у нас генерируются в ItemsControl
            foreach (ContentPresenter current in rootStackPanel.Children)
            {
                //Наконец то получаем нужную нам StackPanel проверяем является ли она текущей, и выделяем ее
                StackPanel currentStackPanel = (StackPanel)VisualTreeHelper.GetChild(current, 0);
                if (currentStackPanel == (StackPanel)sender)
                    currentStackPanel.Background = new SolidColorBrush(Colors.Red);
                else
                    currentStackPanel.Background = new SolidColorBrush(Colors.Magenta);
            }
        }
    }
}

Вот что у нас получается, то есть мы можем теперь делать, что хотим с коллекцией элементов генерируемых в ItemsControl.

Достоинва:

Нет ни каких ограничений с доступом к любым элементам.

Недостатки:

Метод получения элементов не совсем очевиден. Громоздкий способ их получения, тем более, если внутренний элмент сложный. Придется переделывать весь доступ, если мы измени порядок или набор элементов.

PS – статья может показаться не совсем понятной некоторым посетителям из-за ее сложности. Постараюсь ответить на все вопросы.

Чтобы у вас отображались картинки. Создайте в IIS виртуальный каталог с именем silverlight, если у вас не стоит IIS (а он у вас должен стоять!), то воспользуйтесь другим вариантом. Положите файлы в корень проекта silverlight. Назовите все файлы соотвественно: 1.jpg, 2.jpg .. и т.д.

Related posts

• DataBinding (часть 2 - метод вынесения контрола) (3)
• Пример использования Web Service и Data Binding в Silver Light (3)

И так как вы уже поняли анимация очень интересная и очень эффективная вещь. Для создания красивых интерфейсов, а также красивых эффектов в вашем приложении. Но согласитесь, не всегда удобно писать такое количество кода. Пытаясь создать необходимую анимацию. Конечно, иногда без этого не обойтись особенно тогда когда мы создаем объекты, и анимацию динамически. Но иногда мы можем быстро и эффективно создать любую анимацию с помощью удобных средств, которые нам предоставляет Blend Studio.

И так приступим. Все в принципе достаточно просто.
1) Создается объект
2) Обозначается его начальное место положение или его начальные свойства
3) Указывается его конечно место положение или его результирующие свойства
4) Создается анимация

Открываем Blend Studio, запускаем новый проект.

Для наибольшей давайте создадим опять же какой-нибудь прямоугольник. Задайте ему цвет фона и цвет границы.

Переключаем рабочее состояние студии на Анимацию, для этого идем Window -> Active WorkSpace -> Animation WorkSpace (Или нажмите F6). Я не считаю, что решение в организации рабочего пространства, придуманное Microsoft самое лучшее, но все же он позволяет спокойно управлять всеми анимациями в нашем приложении.

Создадим новый StoryBoard, который будет содержать наши анимации. Назовем его MyFirstAnimation. После того как, мы создали StoryBoard у нас появился TimLine на котором мы указываем в какой момент времени, что у нас будет происходить. Точнее говоря, мы будем расставлять ключевые кадры нашей анимации.

Чтобы добавить новый ключевой кадр нужно проделать следующие действия:

1. в дереве объектов выбираем наш объект
2. Выбираем на временной линейки момент времени, когда должен закончиться переход к новым значениям
3. Затем нажимаем на плюс под панелью анимации, рядом с таймером.
4. Чтобы делать изменения над объектом в нужный момент времени, необходимо переместить желтый ползунок на данный момент времени, где у нас установлен ключевой кадр, и затем изменять свойства объекта

Также ключевые кадры создадутся автоматически, если вы установили ползунок времени в нужное положение и начали изменять свойства объекта.

И так чтобы проверить нашу анимацию возвращаем наш ползунок в начальное положение и нажимаем кнопочку «play». Как видите все работает. После, некоторой практики вы убедитесь, что это действительно просто и эффективно.

Давайте посмотрим, что же нам сгенерировала Blend Studio. Как видите все анимации добвались в наш StoryBoard. А сам StoryBoard добавлен в ресурсы нашего контрола. То есть мы его можем использовать, где угодно на нашем контроле. Естественно мы можем переместить нашу анимацию куда угодно, и самим определять ее доступность.

И конечно же определять в какой именно момент нам запускать анимацию.

Blend Studio позволяет нам быстро и эффективно создать любую анимацию! При этом не написав не одной строки кода, она все сделает за нас ;).

Данный метод хорош, когда мы не знаем, как создавать ту или иную анимацию, и этот способ можно использовать как шпаргалку.
Когда мы только учимся работать с анимацией.
Когда это действительно удобно создавать уникальную анимацию в Blend Studio. В остальных и большинстве случаев, вы это будете делать в Code behind.

Related posts

• Анимация (0)
• Работа с видео (Часть 2) (4)
• Знакомство с анимацией Microsoft SilverLights (0)

И так приступим. Конечно же, как всегда начну с азов. Чтобы было понятней как что и почему.
Что у нас из себя представляет анимация? Это последовательность быстро сменяющихся статичных картинок, которые в совокупности дают нам эффект движения. Наш глаз сам собирает из в движение. Мы просто строим эту последовательность. Естественно современные средства создания анимации, давно уже прошли тот этап, когда нам надо формировать каждый кадр (вспомните блокноты, в которых рисовали птичек и т.п. вещи). Теперь у нас есть возможность это все обойти. Нам нужно задавать только начальное и конечное положение объекта в пространстве, а Silverlight сделает остальное за нас.
Например, у нас есть прямоугольник, мы хотим, чтобы у нас он сместился по горизонтали на 200 пикселей. Начальная точка нам известна, мы уже находимся в ней. Задаем конечную точку, и прямоугольник смещается на 200 пикселей. Это теория, теперь практика.

Анимации бывают двух типов:

1. Анимации по значениям
2. Анимация на основе ключевых точек

Анимация по значениям – это как раз случай указанный выше. Когда мы указываем, от какого, до какого значения будет изменяться свойство нашего объекта.

Анимация на основе ключевых точек – это случай когда мы указываем ключевые точки в которых происходит изменение свойств объекта, этих точек может быть множество. Например, когда мы указываем движения по треугольнику, где ключевые точки это вершины треугольника.

И так чтобы создать анимацию, делаем следующие шаги:

1) Создаем наш Rectangle:

Можно также создать его и в коде, если вам так удобней.

2) Теперь для того чтобы запустить анимацию нам надо знать сколько, она будет длиться. Для задания времени используется объект Duration.

3) Создаем анимацию, указываем ей длительность.

4) Указываем объект, к которому будет применена анимация

5) Указываем свойство, которое мы будем изменять

6) Указываем новое значение

7) Создаем объект StoryBoard, и добавляем анимацию в его коллекцию

8) Запускаем StoryBoard

Код XAML:

<UserControl x:Class="AnimationExamples.Page"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="400" Height="300">
  <Canvas x:Name="LayoutRoot" Background="White">
  	<Rectangle x:Name="MyRectangle" Width="100" Height="50" Fill="Aqua" />
  	<Button x:Name="Start" Content="Start" Width="50" Height="25" Canvas.Top="100"  Click="Start_Click"  />
  </Canvas>
  </UserControl>

Код C#:

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;

namespace AnimationExamples
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
        }

        private void Start_Click(object sender, RoutedEventArgs e)
        {
            //для того чтобы у нас прямоугольник устанавливался в начальное положение для повторной анимации
            MyRectangle.SetValue(Canvas.LeftProperty, (double)0);

            //Устаналиваем длительность 1 сек
            //в данном случае длительность анимации и всей коллекции совпадают
            Duration duration = new Duration(TimeSpan.FromSeconds(1));

            //создаем анимацию
            DoubleAnimation da = new DoubleAnimation();
            //Создаем коллекцию анимаций Storyboard
            Storyboard sb = new Storyboard();

            //Задаем длительность
            da.Duration = duration;
            sb.Duration = duration;

            //Устанавливаем объект к которому будет применятся анимация
            Storyboard.SetTarget(da, MyRectangle);
            //Устанавливаем свойство, которое будем изменять
            Storyboard.SetTargetProperty(da, new PropertyPath("(Canvas.Left)"));

            //Устанавливаем новое значение свойства
            da.To = 200;
            //Добавляем в коллекцию
            sb.Children.Add(da);
            //начинаем анимацию
            sb.Begin();
        }
    }
}

Добавим еще какую-нибудь анимацию, например, вращение.

XAML:

<UserControl x:Class="AnimationExamples.Page"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="400" Height="300">
  <Canvas x:Name="LayoutRoot" Background="White">
  <Rectangle x:Name="MyRectangle" Width="100" Height="50" Fill="Aqua" >
  	<Rectangle.RenderTransform>
  		<TransformGroup>
  			<RotateTransform Angle="0" />
  		</TransformGroup>
  	</Rectangle.RenderTransform>
  </Rectangle>
  <Button x:Name="Start" Content="Start" Width="50" Height="25" Canvas.Top="100"  Click="Start_Click"  />
  </Canvas>
  </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;

namespace AnimationExamples
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
        }

        private void Start_Click(object sender, RoutedEventArgs e)
        {
            //для того чтобы у нас прямоугольник устанавливался в начальное положение для повторной анимации
            MyRectangle.SetValue(Canvas.LeftProperty, (double)0);
            TransformGroup tg = new TransformGroup();
            RotateTransform rt = new RotateTransform();
            rt.Angle = 0;
            tg.Children.Add(rt);
            MyRectangle.RenderTransform = tg;

            //Устаналиваем длительность 1 сек
            //в данном случае длительность анимации и всей коллекции совпадают
            Duration duration = new Duration(TimeSpan.FromSeconds(1));

            //создаем анимацию
            DoubleAnimation da = new DoubleAnimation();
            //Создаем коллекцию анимаций Storyboard
            Storyboard sb = new Storyboard();

            //Задаем длительность
            da.Duration = duration;
            sb.Duration = duration;

            //Устанавливаем объект к которому будет применятся анимация
            Storyboard.SetTarget(da, MyRectangle);
            //Устанавливаем свойство, которое будем изменять
            Storyboard.SetTargetProperty(da, new PropertyPath("(Canvas.Left)"));

            //Устанавливаем новое значение свойства
            da.To = 200;
            
            //********* ВРАЩЕНИЕ ***************
            DoubleAnimation daRotate = new DoubleAnimation();
            //Устанавливаем объект к которому будет применятся анимация
            Storyboard.SetTarget(daRotate, MyRectangle);
            //Устанавливаем свойство, которое будем изменять
            Storyboard.SetTargetProperty(daRotate, new PropertyPath("(Rectangle.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)"));
            //Устанавливаем новое значение свойства
            daRotate.To = 360;

            //Добавляем в коллекцию
            sb.Children.Add(daRotate);
            sb.Children.Add(da);
            //начинаем анимацию
            sb.Begin();
        }
    }
}

Пример анимации с испозование KeyFrame:

XAML:

<UserControl x:Class="AnimationExamples.Page"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="400" Height="300">
  <Canvas x:Name="LayoutRoot" Background="White">
  	<Rectangle x:Name="MyRectangle" Width="100" Height="50" Fill="Aqua" >
  		<Rectangle.RenderTransform>
			<TransformGroup>
				<RotateTransform x:Name="AngelTransform" Angle="0" />
			</TransformGroup>
  		</Rectangle.RenderTransform>
  	</Rectangle>
  	<Button x:Name="Start" Content="Start" Width="50" Height="25" Canvas.Top="100"  Click="Start_Click"  />
  </Canvas>
  </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;

namespace AnimationExamples
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
        }

        private void Start_Click(object sender, RoutedEventArgs e)
        {
            //для того чтобы у нас прямоугольник устанавливался в начальное положение для повторной анимации
            MyRectangle.SetValue(Canvas.LeftProperty, (double)0);

            //Устаналиваем длительность 1 сек
            //в данном случае длительность анимации и всей коллекции совпадают
            Duration duration = new Duration(TimeSpan.FromSeconds(1));

            //создаем анимацию
            DoubleAnimationUsingKeyFrames da = new DoubleAnimationUsingKeyFrames();
            //Создаем коллекцию анимаций Storyboard
            Storyboard sb = new Storyboard();

            //Создаем наши точки (keyFrame) и определяем длительность и значение
            LinearDoubleKeyFrame keyFrame = new LinearDoubleKeyFrame();
            keyFrame.KeyTime = TimeSpan.FromSeconds((0.25));
            keyFrame.Value = 50;
            da.KeyFrames.Add(keyFrame);

            LinearDoubleKeyFrame keyFrame1 = new LinearDoubleKeyFrame();
            keyFrame1.KeyTime = TimeSpan.FromSeconds((0.75));
            keyFrame1.Value = 250;
            da.KeyFrames.Add(keyFrame1);

            LinearDoubleKeyFrame keyFrame2 = new LinearDoubleKeyFrame();
            keyFrame2.KeyTime = TimeSpan.FromSeconds((0.5));
            keyFrame2.Value = 350;
            da.KeyFrames.Add(keyFrame2);

            //Задаем длительность
            da.Duration = duration;
            sb.Duration = duration;

            //Устанавливаем объект к которому будет применятся анимация
            Storyboard.SetTarget(da, MyRectangle);
            //Устанавливаем свойство, которое будем изменять
            Storyboard.SetTargetProperty(da, new PropertyPath("(Canvas.Left)"));

            //Добавляем в коллекцию
            sb.Children.Add(da);
            //начинаем анимацию
            sb.Begin();
        }
    }
}

Здесь показаны простые анимации, которые помогут вам понять основы анимации и начать делать свои. В следующем уроке я покажу как создавать анимацию с помощью Blend Studio.

Related posts

• Создание Анимации в Blend Studio (1)
• Работа с видео (Часть 2) (4)
• Знакомство с анимацией Microsoft SilverLights (0)

Оригинал

Обновились и основные программные продукты для работы с Silverlight 2:
- Новый патч для Visual Studio 2008
- Новая Blend Studio 2

Все необходимые средства можно скачать - Здесь
Дополнительную информацию на офицальном сайте Silverlight -

Ну и конечно же, качаем обязательно сам плагин для брауезров:

Silverlight

Ключевые возможности Silverlight 2 включают в себя:

* Поддержка .NET Framework вместе с библиотекой Rich Base Class Library: совместимое подмножество полной версии .NET Framework;
* Мощные встроенные элементы управления: включают в себя DataGrid, ListBox, Slider, ScrollViewer, Calendar controls и другие;
* Поддержка усовершенствованных образов и шаблонов: теперь проще создавать нужный вид приложений;
* Технология Deep Zoom: обеспечивает уникальную интерактивность и навигацию по изображениям с высоким разрешением;
* Комплексная поддержка работы в сети: уникальная поддержка для применения REST WS*/SOAP, POX, RSS и стандартных HTTP-сервисов, позволяющая пользователям создавать приложения, которые легко интегрируются с серверными системами;
* Расширенная языковая поддержка .NET Framework: лишь Silverlight 2 поддерживает различные языки программирования, среди которых: Visual Basic, C#, JavaScript, IronPython and IronRuby, что позволяет быстро сориентироваться разработчикам, уже владеющим этими языками;
* Улучшенная защита контента: Silverlight DRM на основе защиты контента PlayReady для связанных сред Silverlight;
* Улучшенная масштабируемость сервера и расширенная поддержка рекламных носителей: поддержка новых возможностей быстрой загрузки, лучших технологий поисковой оптимизации и встроенной рекламы следующего поколения;
* Партнерская экосистема: партнеры Microsoft по Visual Studio, среди которых ComponentOne, Infragistics и Telerik предоставляют продукты, усиливающие возможности создания приложений Silverlight при использовании Visual Studio;
* Кросс-платформенная и кросс-браузерная поддержка: поддержка Mac, Windows и Linux в Firefox, Safari, Internet Explorer.

P.S. Статью будем пополнять по мере того, как будет поступать информация о новшествах появившихся в релизе. Так, что заглядывайте.

Related posts

• Детский портал использовал технолоию Silverlight (0)

После выхода на свет Silver Light beta 2 я столкнулся с проблемой, что у меня не работают события MouseLeftButtonDown и MouseLeftButtonUp. Ну как уже известно, Майкрософт изменило порядок обработки событий и фактически они существуют, но ничего не делают.

И так представленный мной пример – видео плеера, будет работать некорректно в бета 2. Что конечно совсем не радует, что же делать в таком случае.

Создадим свой класс CustomSlider в нем сделаем обработчики событий у ползунка (Thumb), которые позволят нам отслеживать необходимые нам действия. Оформим его в виде отдельного файла CustomSlider.cs:

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Controls.Primitives;

namespace Quantumart.Silverlight.Controls
{
	public class CustomSlider : Slider
	{
		//Определяем стиль по умолчанию  - от стандартного Slider
		public CustomSlider()
			: base()
		{
			DefaultStyleKey = typeof(Slider);
		}

		///
		///Происходит в тот момент, когда мы кликнули по ползунку и начали перетаскивать его
		///
		public event EventHandler ThumbDragStarted;

		///
		/// Происходит когда мы закончили перенос ползунка
		///
		public event EventHandler ThumbDragCompleted;
		public override void OnApplyTemplate()
		{
			base.OnApplyTemplate();

			//Достаем ползунок
			Thumb thumb = this.GetTemplateChild("HorizontalThumb") as Thumb;

			//Если он существует, его можно и удалить;))
			if (thumb != null)
			{
				//задаем обработчики событий DragStarted и DragCompleted
				thumb.DragStarted += new DragStartedEventHandler(thumb_DragStarted);
				thumb.DragCompleted += new DragCompletedEventHandler(thumb_DragCompleted);
			}
		}

		//обработчик события по завершению переноса ползунка
		void thumb_DragCompleted(object sender, EventArgs e)
		{
			OnThumbDragCompleted(this, new EventArgs());
		}

		//обработчик собюытия ан начало переноса ползунка
		void thumb_DragStarted(object sender, EventArgs e)
		{
			OnThumbDragStarted(this, new EventArgs());
		}

		//вызываем  необходимые нам события
		public virtual void OnThumbDragStarted(object sender, EventArgs e)
		{
			if (ThumbDragStarted != null)
				ThumbDragStarted(sender, e);
		}

		//вызываем  необходимые нам события
		protected virtual void OnThumbDragCompleted(object sender, EventArgs e)
		{
			if (ThumbDragCompleted != null)
				ThumbDragCompleted(sender, e);
		}
	}
}

 
 

Теперь используем наш слайдер в XAML:

<UserControl x:Class="Quantumart.Silverlight.Controls.MPLayer"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:CC="clr-namespace: Silverlight.Controls;assembly= Silverlight.Controls"
  Width="400" Height="100" xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">
  	<Grid x:Name="LayoutRoot" ShowGridLines="True">
		< CC:CustomSlider x:Name="PlayerSlider" Width="300" Canvas.Left="55"
			ThumbDragStarted="PlayerSlider_ThumbDragStarted"
			ThumbDragCompleted="PlayerSlider_ThumbDragCompleted" /></Grid>
  </UserControl>

Выполняем действия по происшествию событий:

private void PlayerSlider_ThumbDragStarted(object sender, EventArgs e)
{
	//Какие то действия по началу
}

private void PlayerSlider_ThumbDragCompleted(object sender, EventArgs e)
{
	//Какие то действия по окончанию
}

Вот такой выход есть решения этой проблемы он не единственный. Второй вариант несколько проще, но идет с использование VSM. Для нам необходимо использовать Blend Studio.

Создаем новый проект. И добавляем стандартный слайдер.

Теперь нам надо отредактировать темплейт стандартного слайдера. Для этого кликаем в верхней части экрана (см. скрин).

После того как мы вошли в редактирование темплейта.

В левой панели откроется компоненты из которых состоит наш слайдер, нас интересует HorizontalThumb. Заходим в его свойства, и переходим на панель событий находим события DragStarted и DragCompleted.

Это способ очень удобен тем, что на самом деле нам с вами не надо писать код, все за нас генерируется Blend Studio. Что мне не нравиться в этом подходе, что необходимо все это делать обязательно через Blend Studio. Генерируемый код иногда вызывает сбои в работе самой Blend Studio, это конечно неприятно, но и мне как не очень нравиться когда слишком много XAML кода, он становится крайне сложно поддерживаемый и непонятный. И к тому же плохо отлаживаемый! Это конечно чисто мое мнение. Оба метода работают, и могут быть использованы. Да и на самом деле они делают одно и тоже обрабатывают события Thumb.

Related posts

• No related posts.

Сегодня я сделаю простой User Control и покажу его использование. Мы создадим простые часики, которые будут показывать дату и время, иметь несколько настроек. Мы можем менять цвет фона, цвет текста, и формат вывода даты.

Для начала создаем два User Control Page.xaml, Clock.xaml. На Clock создадим одно текстовое поле и все J

Clock.xaml:

<UserControl x:Class="CustomControl.Clock"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="200" Height="50">
  <Grid  x:Name="LayoutRoot" Background="White"  VerticalAlignment="Center" HorizontalAlignment="Center">
  	<TextBlock  x:Name="Time"   Text="SomeText" Foreground="Red" />
  </Grid></UserControl>

Чтобы вы видели, что наш контрол изменит свой вид по умолчанию мы задали ему цвет фона, цвет текста и какой то текст.

http://silverlightru.net/

По умолчанию у нас будет грузиться страница Page.xaml. Если вы хотите посмотреть, что у нас получилось в нашем Clock.xaml, тогда надо в файле App.xaml.cs поменять:

this.RootVisual = new Page();

на

this.RootVisual = new Clock ();

Убедились что все работает, как мы задумывали и возвращаем все обратно.

Теперь нам необходимо создать свойства для наших свойств контрола, которые мы будем менять, это фон, цвет текста, и формат. Затем мы обрабатываем эти значения в событии Loaded контрола Clock. Встаем задача, так как у нас формат задается определенным образом, то нам надо как-то это учитывать, чтобы пользователь не мучился, какой же формат правильный, но и мог увидеть, какие вообще форматы существуют. Для этого создадим перечисление форматов (enum). В чем еще преимущество в том, что enum наш будет отображаться в Visual Studio при вызову intelecence.

http://silverlightru.net/

Код С#:

namespace CustomControl
{
    public partial class Clock : UserControl
    {
        public SolidColorBrush TextColor { get; set; } //Цвет текста
        public SolidColorBrush LayoutColor { get; set; } //Цвет фона
        public Formats Format { get; set; } //Наш список форматов
        public Clock()
        {
            InitializeComponent();

			//создаем обработчик события, чтобы использовать значения наших свойств
            Loaded += new RoutedEventHandler(Clock_Loaded);
        }

        void Clock_Loaded(object sender, RoutedEventArgs e)
        {
			//устанавливаем свойство цвета текста
            if (TextColor != null)
                Time.Foreground = TextColor;

			//устанавливаем свойство цвета фона
            if (LayoutColor != null)
                LayoutRoot.Background = LayoutColor;

			//устанавливаем свойство текста и задаем ему формат
            Time.Text = DateTime.Now.ToString(Format.ToString());
        }

		//Форматы доступные для использования в DateTime структуре
        public enum Formats { 
            d, D, t, T, f, F, g, G, M, R, s, u, U, Y, o
        }
    }
}

Наш контрол создан, он работает. Но как же нам использовать наш контрол там, где нам нужно и задавать ему разные настройки? Вернемся к нашему Page.xaml. Для того, чтобы использовать Custom Controls, необходимо подключить assembly к которому они относятся и также указать namespace в котором находится наш контрол.

Открываем Page.xaml и добавляем туда следующую строчку, так как наши контролы можно было не указывать assembly, но чтобы было понятней, я привожу нормальную запись.

XAML:

<UserControl x:Class="CustomControl.Page"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
<!—Подключаем наш assembly -->

     xmlns:CC="clr-namespace:CustomControl;assembly=CustomControl"
     Width="400" Height="300">
    <Grid  x:Name="LayoutRoot" Background="White">
        <CC:Clock  TextColor="Aquamarine" LayoutColor="Bisque"  Format="G" />
    </Grid>
</UserControl>

Расмотрим строку:
xmlns:CC="clr-namespace:CustomControl;assembly=CustomControl"

СС – специальный префикс, который мы будем использовать для обозначения нашего контрола. Например:

<CC:Clock TextColor="Aquamarine"  LayoutColor="Bisque" Format="G" />

clr-namespace:CustomControl; - Указываем namespace CustomControl надо поменять при необходимости на ваш namespace

assembly=CustomControl; - Указываем assembly CustomControl надо поменять при необходимости на ваш assembly

Далее задаем уже используем наш контрол, задавая ему необходимые свойства TextColor, LayoutColor, Format.

Используйте Custom Control там, где вам удобно, если вам кажется, что логика программы должна быть вынесена в виде отдельного контрола, сделайте это. Если ваш код универсален и может быть использован во многих местах, опять используйте Custom Control.

http://silverlightru.net/

http://silverlightru.net/

http://silverlightru.net/

 P.S. Вообще, в данной ситуации наш контрол должен быть скорей назван Calendar, я в начале задумывал его немного по другому. Кого это смущает могу перименовать

Related posts

• DataBinding (часть 2 - метод вынесения контрола) (3)
• Пример создания простого Silverlight приложения (часть 3) (1)