Блог Сергея Байдачного

Мой блог о технологиях

Archive for Январь 12th, 2010

Введение в SilverLight 4: Элемент управления ViewBox

with one comment

Чтобы продемонстрировать работу нового элемента управления ViewBox, достаточно рассмотреть небольшой пример:

<UserControl x:Class="ViewBox_Chapter0.MainPage"
    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>
            <Button Content="Hello" Width="400" Height="100"></Button>
        </StackPanel>
    </Grid>
</UserControl>

Если попробовать запустить приложение выше, и изменить размер окна браузера, то можно увидеть что размер кнопки остается неизменным. Если изменить размер окна браузера, сделав его меньшим размера кнопки, то она попросту перестанет влазить на экран. Таким образом, существует проблема изменения размеров интерфейса при изменении размеров окна браузеров. Конечно, данную проблему можно решить с помощью элемента компоновки Grid, но при работе со сложными интерфейсами, элемент Grid не помогает. Поэтому появление элемента ViewBox, позволяющего сжимать и расширять свое содержимое, является даже запоздалым.

Замечание. Элемент ViewBox был доступен и разработчикам более ранней версии SilverLight, но не входил в стандартную поставку, а поставлялся в составе специальной библиотеки с открытым кодом, разрабатываемой сообществом.

Рассмотрим пример выше, но добавим элемент компоновки ViewBox:

<UserControl x:Class="ViewBox_Chapter0.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid x:Name="LayoutRoot" Background="White">
        <Viewbox MaxHeight="200" MaxWidth="800" 
            MinHeight="50" MinWidth="200">
            <StackPanel>
                <Button Content="Hello" Width="400" Height="100"></Button>
            </StackPanel>
        </Viewbox>
    </Grid>
</UserControl>

Теперь, при изменении размеров окна браузера, также изменяется и размер нашей кнопки.

Рассмотрим элемент ViewBox более детально. Фактически тут можно выделить всего три основных свойства: Child, Stretch, StretchDirection.

Свойство Child содержит ссылку на тот элемент, размерами которого управляет ViewBox. Тут может быть только один элемент, но это может быть и контейнер (как в примере выше).

Свойство Stretch определяет, каким образом содержимое ViewBox размещается внутри выделенного пространства. Тут возможно одно из следующих значений:

· None – сохранять исходный размер контента;

· Fill – полностью заполнить элемент ViewBox, не сохраняя пропорции;

· Uniform – сохранять пропорции контента;

· UniformToFill – полностью заполнить элемент ViewBox, с сохранением пропорций контента. Естественно, что с этим параметром, в большинстве случаев, весь контент отобразить не удается и он выходит за границы ViewBox.

Последнее свойство StretchDirection позволяет разрешить только сжатие или расширение содержимого и принимает одно из значений:

· UpOnly – только расширять контент, если размер ViewBox больше размера самого контента;

· DownOnly – только сжимать контент, если размер ViewBox меньше размера самого контента;

· Both – позволяет расширять и сжимать контент (установлено по умолчанию).

Таким образом, в SilverLight 4 на один полезный элемент компоновки стало больше.

Реклама

Written by Sergiy Baydachnyy

12.01.2010 at 10:28

Опубликовано в SilverLight

Tagged with

Введение в SilverLight 4: Поддержка колесика мыши

leave a comment »

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

Реализуем простое приложение, интерфейс которого содержит изображение, к которому мы применим трехмерную проекцию по оси X. Вот код интерфейса приложения:

<UserControl x:Class="MouseWheel_Chapter0.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
> 
    <Grid x:Name="LayoutRoot" Background="White">
        <Image Source="Penguins.jpg" Width="640" 
            Height="480" MouseWheel="Image_MouseWheel">
            <Image.Projection>
                <PlaneProjection x:Name="proj"></PlaneProjection>
            </Image.Projection>
        </Image>
    </Grid>
</UserControl>

Как видно, тут мы определили обработчик события MouseWheel, которое генерируется именно при вращении колесика мыши. Код обработчика довольно простой:

private void Image_MouseWheel(object sender, MouseWheelEventArgs e)
{
    proj.RotationX += e.Delta/10;
}

Запустите приложение, щелкните на картинке и начните вращать колесико мыши – картинка будет вращаться вокруг оси X.

Нужно отметить, что все встроенные элементы, работающие с набором записей, поддерживают работу с колесиком мыши по умолчанию. Сюда относятся такие элементы как DataGrid, ListBox и др.

Written by Sergiy Baydachnyy

12.01.2010 at 07:47

Опубликовано в SilverLight

Tagged with