<< Создание PasswordBox в Silverlight |

Обработка события изменения размера окна в 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);
}

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

Итак, создаем новый проект и добавляем две 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;
            }
        }
    }
}