Окна нестандартной формы

83

Окна необычной формы часто являются товарным знаком современных прикладных приложений вроде редакторов фотографий, программ для создания кинофильмов и МРЗ-проигрывателей; скорее всего, они будут встречаться в WPF-приложениях даже более часто.

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

Базовая процедура для создания окна нестандартной формы подразумевает выполнение следующих шагов:

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

Ниже в качестве примера приведен код создания пустого прозрачного окна с применением первого подхода и предоставлением файла PNG для прозрачных областей:

<Window x:Class="Windows.TransparentBackground"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Windows" Height="300" Width="300"
    WindowStyle="None" AllowsTransparency="true"
    MouseLeftButtonDown="window_MouseLeftButtonDown"        
    >
  <Window.Background>    
    <ImageBrush ImageSource="shapes.png"></ImageBrush>
  </Window.Background>
    <Grid>
      <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
      </Grid.RowDefinitions>
      <Button Margin="20">A Sample Button</Button>   
      <Button Margin="20" Grid.Row="2" Click="cmdClose_Click">Close</Button>   
    </Grid>
</Window>

Это окно необычной формы (состоящее из окружности и квадрата) имеет не только пробелы, сквозь которые может просматриваться находящееся за ним содержимое, но кнопки, которые выходят за границы изображения и накладываются на прозрачную область, из-за чего кажется, будто бы они существуют сами по себе, без окна:

Окно нестандартной формы, использующее фоновый рисунок

Те, кому приходилось программировать с использованием Windows Forms ранее, наверняка заметят, что окна нестандартной формы в WPF имеют более четкие края, особенно на изгибах. Все дело в том, что WPF умеет выполнять сглаживание между фоном окна и находящимся за ним содержимым для создания более гладкого края.

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

<Window x:Class="_27___Window.UnrealWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="UnrealWindow" Height="300" Width="300" x:Name="MyWindow"
        AllowsTransparency="True" Background="Transparent" WindowStyle="None">
    <Grid>
        <Border Width="auto" Height="auto" BorderBrush="LimeGreen" BorderThickness="2"
                CornerRadius="0,30,0,30">
            <Border.Background>
                <LinearGradientBrush>
                    <GradientBrush.GradientStops>
                        <GradientStopCollection>
                            <GradientStop Color="#e7ebf7" Offset="0.0"></GradientStop>
                            <GradientStop Color="#cee3ff" Offset="0.5"></GradientStop>
                        </GradientStopCollection>
                    </GradientBrush.GradientStops>
                </LinearGradientBrush>
            </Border.Background>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto"></RowDefinition>
                    <RowDefinition></RowDefinition>
                    <RowDefinition Height="auto"></RowDefinition>
                </Grid.RowDefinitions>
                <TextBlock Text="Title my Window" Padding="5"></TextBlock>
                <Grid Grid.Row="1" Background="#B5CBEF">
                    <TextBlock VerticalAlignment="Center" FontSize="18" 
                               Foreground="White" HorizontalAlignment="Center">My Content</TextBlock>
                </Grid>
                <TextBlock Text="Footer" Padding="5" Grid.Row="2" HorizontalAlignment="Center"></TextBlock>
            </Grid>
        </Border>
    </Grid>
</Window>
Окно нестандартной формы, использующее элемент Border

В этом окне содержится элемент Grid с тремя строками, которые используются для строки заголовка, строки нижнего колонтитула и размещаемого между ними содержимого. В строке с содержимым находится еще один элемент Grid, который имеет другой фон и может содержать другие необходимые элементы (в текущий момент в нем находится только один единственный элемент TextBlock).

Для завершения внешнего вида этого окна осталось создать только кнопки, имитирующие размещаемые в правом верхнем углу стандартные кнопки для разворачивания, сворачивания и закрытия окна.

Пройди тесты
Лучший чат для C# программистов