Закругляем углы и отбрасываем тень

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

Закругляем углы

Для закругления углов используются свойства RadiusX и RadiusY. Возьмем для начала обычный прямоугольник, закрасим его в красный цвет и загруглим углы с радиусом 25.

<Rectangle Height="114" HorizontalAlignment="Left" 
                   Margin="25,12,0,0" Name="rectangle1"  
                   VerticalAlignment="Top" Width="157" Fill="#FFE21919"
                   RadiusX="25"
                   RadiusY="25"/>

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

<Image VerticalAlignment="Center"
               HorizontalAlignment="Center"
               Stretch="None"
               Source="http://netsources.narod.ru/images/tigr2010.jpg" Margin="25,129,418,22" 
       Height="160" Width="306">
    <Image.Clip>
        <RectangleGeometry RadiusX="15"
                                   RadiusY="15"
                                   Rect="0,0,190,143"/>
    </Image.Clip>
</Image>

Обратите внимание, что мы отсекаем часть изображения, которое берется с сайта netsources.narod.ru, при помощи Image.Clip, а затем выводим выбранную часть изображения с закругленными углами.

Отбрасываем тень

Очень красиво смотрится элемент, который отбрасывает тень. Сразу возникает ощущение объемности и легкости, как будто элементы немного парят над формой. Возьмем для разнообразия кнопку.

<Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="322,373,0,0" Name="button1" 
        VerticalAlignment="Top" Width="75">
    <Button.Effect>
        <DropShadowEffect Opacity="0.5"/>
    </Button.Effect>
</Button>

Данный эффект применим и к Image (попробуйте самостоятельно).

Попробуем совместить эффект отбрасывания тени с закругленными углами. Начнем опять с прямоугольника. На этот раз закрасим его в синий цвет и выберем другой радиус закругления углов.

<Rectangle VerticalAlignment="Center"
                   HorizontalAlignment="Center"
                   RadiusX="15"
                   RadiusY="15"
                   Width="150"
                   Height="113"
                   Fill="Blue" Margin="404,12,195,282">
    <Rectangle.Effect>
        <DropShadowEffect Opacity="0.5"/>
    </Rectangle.Effect>
</Rectangle>

Как видите, нам понадобилось только вставить дополнителный XAML-код с применением эффекта DropShadowEffect. Чтобы тень была более достоверной, мы сделали ее полупрозрачной (свойство Opacity). Смотрится вполне красиво.

Но, если мы попробуем применить данный способ к Image, то мы не увидим желаемого результата. Дело в том, что Clip отрезает эффект тени, и мы ничего не видим. Что же делать?

Попробуем пойти обходным путем. Создадим прямоугольник с закругленными углами и добавим ему эффект тени (смотри выше). Будем считать ее подложкой для изображения. Далее воспользуемся объектом ImageBrush. С его помощью мы можем заполнить созданный прямоугольник.

<Rectangle VerticalAlignment="Center"
                   HorizontalAlignment="Center"
                   RadiusX="15"
                   RadiusY="15"
                   Width="240"
                   Height="160" Margin="430,157,79,243">
    <Rectangle.Effect>
        <DropShadowEffect Opacity="0.5"/>
    </Rectangle.Effect>
    <Rectangle.Fill>
        <ImageBrush ImageSource="http://netsources.narod.ru/images/tigr2010.jpg"/>
    </Rectangle.Fill>
</Rectangle>

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

Иллюстрация к статье
Реклама

Болты крепеж винты.