Обработка события изменения размера окна в Silverlight 2

К сожалению для веб разработчиков, у пользователей различные разрешения монитора, а значит и различные размеры окна браузера, плюсом к этому, пользователь может изменять размеры окна уже после старта проекта, поэтому нужно адаптировать Silverlight-приложения к конкретной ситуации на клиентской машине. Самый известный способ - создание резинового макета. Для реализации такого макета нам поможет обработчик события Resized.

Оповещатель о событии находится в классе App:

App.Current.Host.Content.Resized

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

void Page_Loaded(object sender, RoutedEventArgs e)
 {
     App.Current.Host.Content.Resized += 
         new EventHandler(Content_Resized);
}

Сделаем небольшой пример. Пусть есть две панели меню - горизонтальная и вертикальная, которые всегда должны занимать всю ширину/высоту окна браузера. Вот что получится в итоге:

SLResizeSample

Итак, создаем новый проект и добавляем две StackPanel. Вот полный XAML-код:

<UserControl x:Class="WindowResize.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    >
    <Grid x:Name="LayoutRoot" Background="White">
        <!-- Вертикальная панель -->
        <StackPanel x:Name="menuVertical" 
                    VerticalAlignment="Top"
                    HorizontalAlignment="Left"
                    Width="100">
            <Button Content="Кнопка Меню" />
            <Button Content="Кнопка Меню" />
            <Button Content="Кнопка Меню" />
            <Button Content="Кнопка Меню" />
            <Button Content="Кнопка Меню" />
        </StackPanel>
        <!-- Горизонтальная панель -->
        <StackPanel x:Name="menuHorizontal"
                    Margin="100,0,0,0"
                    Orientation="Horizontal"
                    Height="50"
                    VerticalAlignment="Top"
                    HorizontalAlignment="Left" >
            <Button Content="Кнопка Меню" />
            <Button Content="Кнопка Меню" />
            <Button Content="Кнопка Меню" />
            <Button Content="Кнопка Меню" />
            <Button Content="Кнопка Меню" />
        </StackPanel>
    </Grid>
</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 WindowResize
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(Page_Loaded);
        }

        void Page_Loaded(object sender, RoutedEventArgs e)
        {
            //Привязываем обработчик
            App.Current.Host.Content.Resized += 
                new EventHandler(Content_Resized);
        }

        void Content_Resized(object sender, EventArgs e)
        {
            //По изменению размера окна браузера,
            //вызываются соответсвующие функции для
            //перерасчета высоты или ширины каждого
            //элемента в панелях
            ResizeHorizontalMenu();
            ResizeVerticalMenu();
            
        }
        void ResizeVerticalMenu()
        {
            //Вычисляется новая высота для каждой 
            //кнопки. LayoutRoot - родительский
            //контрол, в котором располагаются все остальные 
            //визуальные элементы. Он занимает все окно, так
            //как специально не были заданы его ширина и высота.
            //Чтобы получить его реальную высоту (т.е. 
            //ту высоту, которая отображается пользователю)
            //можно воспользоваться свойством ActualHeight.
            //Далее делим всю высоту на количество
            //элементов в панели меню.
            double newHeight = LayoutRoot.ActualHeight /
                (double)menuVertical.Children.Count;
            //Для каждой кнопки в панели задаем
            //новое значение высоты
            foreach (UIElement el in menuVertical.Children)
            {
                Button btn = el as Button;
                btn.Height = newHeight;
            }
        }
        void ResizeHorizontalMenu()
        {
            //То же самое, что и с вертикальной панелью,
            //только сделана поправка на горизонтальный
            //отступ, который равен ширине вертикальной
            //панели
            double menuHorizontalMarginLeft = 
                menuVertical.ActualWidth;
            double newWidth = (LayoutRoot.ActualWidth - 
                menuHorizontalMarginLeft) /
                (double)menuHorizontal.Children.Count;
            foreach (UIElement el in menuHorizontal.Children)
            {
                Button btn = el as Button;
                btn.Width = newWidth;
            }
        }
    }
}

Из комментариев должно быть все понятно. Посмотреть на пример можно тут - http://silverlight.services.live.com/invoke/36889/WindowResize/iframe.html

Posted on 21.08.2008 18:23:35 by admin

Permalink | Комментарии (0) | Post RSSRSS comment feed |

Categories: Silverlight

Tags: , ,

Оценок нет

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Obama и Silverlight Deep Zoom

Вот это действительно потрясающе:

Официальный сайт приложения: http://www.deepzoomobama.com

Posted on 09.07.2008 15:16:00 by Admin

Permalink | Комментарии (0) | Post RSSRSS comment feed |

Categories: Silverlight | Streaming

Tags: , ,

Текущий рейтинг: 5.0 (2 голосов)

  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Создание контекстного меню в silverlight или как обработать щелчок правой кнопкой мыши.

Интересно, что для таких, вроде бы, привычных вещей как меню по нажатию правой кнопки мыши, в silverlight нет специальных классов. Но это не проблема, сейчас вы сами в этом убедитесь. Вот что в итоге получится:

Начнем. Итак, напишем простенький XAML:

<UserControl x:Class="RightButtonContext.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="Auto" Height="Auto">
    <Canvas x:Name="LayoutRoot" Background="GreenYellow">
        <TextBlock Text="NO" x:Name="myTextBlock" />
       <!-- Меню -->
        <StackPanel Visibility="Collapsed" x:Name="menu" Width="100">
            <Button Content="Кликни меня!!"/>
            <Button Content="Или меня!"/>
            <Button Content="О разработчиках"/>
        </StackPanel>
    </Canvas>
</UserControl>

 

Открываем .cs файл и пишем следующее:

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;
//Необходимо добавить пространство имен,
//в котором содержатся классы для взаимодействия
//с HTML документом
using System.Windows.Browser;
 
namespace RightButtonContext
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
            //Присоединяем обработчик для
            //события нажатия правой кнопки мыши
            HtmlPage.Document.AttachEvent("oncontextmenu",
                this.OnContextMenu);
            //Обработчик для события опускания
            //левой кнопки мыши
            this.MouseLeftButtonDown += 
             new MouseButtonEventHandler(Page_MouseLeftButtonDown);
        }
 
        void Page_MouseLeftButtonDown(object sender,
            MouseButtonEventArgs e)
        {
            menu.Visibility = Visibility.Collapsed;
        }
 
        private void OnContextMenu(object sender,
            HtmlEventArgs e)
        {
            //Назначаем текст для отображения
            //в textblock, в данном случае
            //координаты курсора
            myTextBlock.Text = "Позиция курсора: "
                + e.OffsetX + "," + e.OffsetY;
            //Устанавливаем координаты появления меню
            menu.SetValue(Canvas.TopProperty, (double)e.OffsetY);
            menu.SetValue(Canvas.LeftProperty, (double)e.OffsetX);
            //Делаем меню видимым
            menu.Visibility = Visibility.Visible;
            //Предотвращаем стандартное событие,
            //т.е. появление меню плагина
            e.PreventDefault();
        }
        private void OnPageClick(object sender,
            HtmlEventArgs e)
        {
            //Делаем меню невидимым
            menu.Visibility = Visibility.Collapsed;
        }
    }
}

Также нужно сменить атрибут плагина windowless на true. Открываем .aspx файл с СЛ контентом, находим тег <asp:Silverlight /> и добавляем строчку Windowless="true":

 <asp:Silverlight ID="Xaml1" Windowless="true" 
    runat="server" Source="~/ClientBin/RightButtonContext.xap"
    MinimumVersion="2.0.30523" Width="100%" Height="100%" />

 

На этом все. Можно тестировать! Самое интересное, что вы можете отреагировать на нажатие как угодно! Хоть на другой сайт перейти ;)

Posted on 02.07.2008 14:09:00 by Admin

Permalink | Комментарии (0) | Post RSSRSS comment feed |

Categories: Silverlight

Tags: , , ,

Оценок нет

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Видео-уроки Silverlight. Получение информации из базы данных посредством WCF.

В ролике показано как получить информацию из базы данных при помощи WCF и LinqToSql классов и привязать к DataGrid (7 минут).

screenshot_sldatafromdb 

Posted on 25.06.2008 17:03:13 by Admin

Permalink | Комментарии (0) | Post RSSRSS comment feed |

Categories: Silverlight | Video

Tags: , , , , ,

Оценок нет

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Видео-уроки Silverlight. Использование VisualStateManager

Перехожу на видео-уроки, ибо так намного нагляднее и интереснее ;)

Screenshot - UsingVisualStateManager
Это мой первый вебкаст, так что пишите что нравится и не нравится, в следующих роликах постараюсь учесть все пожелания :)

Posted on 22.06.2008 18:36:50 by Admin

Permalink | Комментарии (0) | Post RSSRSS comment feed |

Categories: Silverlight | Video

Tags: , ,

Оценок нет

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Поздравьте меня с 3 местом ;)

Поздравляю всех, кто участвовал в конкурсе Silverlight проектов от Ineta!!!!

Было не так много работ, как хотелось бы, но зато они все были достойны призов. Занять 3 место довольно неплохо, значит, не зря трудился во имя просвещения silverlight :-)

Posted on 21.02.2008 17:35:02 by Admin

Permalink | Комментарии (0) | Post RSSRSS comment feed |

Categories: Life | Silverlight

Tags:

Оценок нет

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Silverlight, сокеты и конкуренция

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

Первую версию плагина продвигали как конкурента флэша, да, именно флеша, а не флекса, как считают некоторые, так как в ней (SL) отсутсвуют контролы, какие либо вменяемые средства коммуникации с сервером, кроссдоменность, вообще все приходиться рисовать самому, и, по сути, первая версия пригодна только для красиво-оформленного представления видео-контента, в чем мы и убеждаемся, заходя на silverlight.net.

Как бы не кричали, что SL уничтожит Flash, но пока я не видел ни одного проекта на silverlight, который бы невозможно было сделать на Flash/Flex. Хотя мне нравится СЛ, но видя слабости технологии, я не могу промолчать.

Вторая версия, без сомнения, найдет на порядок больше поклонников, и ее уже можно позиционировать как конкурента флексу, она станет действительно хорошей платформой для коммерческих приложений. На форумах идет куча дискуссий о том, что необходимо добавить во вторую версию silverlight, пожеланий столько, что даже незнаю, как разработчики собираются запихнуть все в 4Mb, но я искренне желаю чтобы это у них получилось ;)

Станет ли SL лидером в мире RIA сказать трудно, ведь такие гиганты как Adobe и Sun не будут сидеть сложа руки, и, я надеюсь, найдут способ привлечь разработчиков.

Posted on 20.02.2008 17:34:04 by Admin

Permalink | Комментарии (0) | Post RSSRSS comment feed |

Categories: Silverlight

Tags: ,

Оценок нет

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Flickr Cube Widget

Думаю, что все читатели блога слышали про silverlight конкурс от Ineta, недавно решил тоже что-нибудь замутить, хотелось чего-то оригинального, и все вылилось вот во что:

Фотки берутся с Flickr.com, после поиска по введенному тегу, поэтому за содержание я не отвечаю ;)

Самое главное, что добавить себе на страницу такой же ничего не стоит, нужно всего лишь вставить html-код и скопировать маленькую папку с нужными ресурсами.

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

Posted on 11.02.2008 17:16:07 by Admin

Permalink | Комментарии (0) | Post RSSRSS comment feed |

Categories: Silverlight

Tags: , , ,

Оценок нет

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Farseer Physics Engine - 2D физика для XNA и Silverlight

Если вам по душе разработка игр, то непременно следует посмотреть на Farseer Physics Engine - опенсорсный движок для XNA и СЛ 2.0.

Проект еще на ранней стадии, но это не мешает покопаться в коде уже сейчас.

Posted on 27.01.2008 17:14:54 by Admin

Permalink | Комментарии (0) | Post RSSRSS comment feed |

Categories: Silverlight

Tags: , ,

Оценок нет

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Silverlight доступен через Windows Update

С 22 января стал доступен для загрузки через Windows Update Silverlight-плагин первой версии! Так что, распространение по миру пойдет гораздо быстрее. Конечно, до распространенности флеша ему еще очень далеко, но, все-таки, сдвиги есть!

Особенно радует то, что, после релиза 2-й версии SL, куча дотнетовцев будут использовать именно SL в качестве клиента, а не Ajax, что также скажется на популярности плагина.

Posted on 27.01.2008 17:13:29 by Admin

Permalink | Комментарии (0) | Post RSSRSS comment feed |

Categories: Silverlight | Windows

Tags: ,

Оценок нет

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5