8

Задачей является создание кастомного стиля окна обладающего следующими свойствами:

  • Тень в четыре направления (left, top, right, bottom)
  • Наличие хрома или, иначе, области за которую можно окно перетаскивать
  • Возможность изменения размера окна мышью
  • Тень приравнивается к областям, которые не имеют цвета на прозрачных окнах: это означает, что мы можем не только наблюдать за элементами других окон, которые находятся за тенью, но и работать с ними прямо сквозь тень (точно таким же свойством обладают окна с установленным в True свойством AllowsTransporency и не имеющего никакого цвета фона).
  • Анимации сворачивания и разворачивания окон в Windows

Проблематика:

  1. Хром окна всегда расположен сверху. Мы можем лишь задать его высоту (WindowChrome.CaptureHeight). Отсюда вытекает невозможность создания верхней тени, ведь она будет лишь фоном хрома и за неё можно будет потянуть окно. Решением может быть либо отрисовка тени на более низком уровне (WinApi; понятия не имею как), либо отказ от WindowChrome и использование Border, у которого есть обработчик MouseLeftButtonDown с вызовом в нём Window.DragMove метода.

  2. Пункт 4 их списка выше. Вот тут и идей я даже не имею. Разве что, опять же, рисовка тени окна на более низком чем WPF уровне...

  3. Анимацию сворачивания и разворачивания окна при WindowStyle в None не работают. Но можно сделать следующим образом: при сворачивании поменять стиль окна с None на любой другом, и, соответственно, при разворачивании делать наоборот. Но уж как-то совершенно в лоб.
  4. WindowChrome.ResizeBorderThickness позволяет задать толщину бордюра для ресайза окна. Но он и понятия никакого не имеет об отступах - там где у нас тень, там и будет расположен.
7
  • А чем вас не устраивает стандартный стиль? Там ведь тоже тень на все 4 стороны?
    – VladD
    4 июн 2017 в 18:04
  • Это я заметил, да. Но я то создаю кастомный стиль. Он мне нужен не ради только теней. Я там свои кнопки сделаю, свой цвет, свой бордюр и т.д. Да и некоторые элементы мне нужно расположить прямо на хроме. Это уж точно мне не-none стиль не позволит.
    – D .Stark
    5 июн 2017 в 8:15
  • А вам обязательно-обязательно WindowStyle="None"?
    – VladD
    5 июн 2017 в 21:33
  • Ну а как же. Да.
    – D .Stark
    6 июн 2017 в 5:58
  • А для чего? Чтобы убрать стандартную рамку? Для этого достаточно по идее просто переопределить шаблон окна.
    – VladD
    6 июн 2017 в 10:07

1 ответ 1

9
+50

У меня вот такой стиль убирает Chrome и оставляет тени:

<Style TargetType="{x:Type Window}" x:Key="ModifiedWindow">
    <Setter Property="SnapsToDevicePixels" Value="True"/>
    <Setter Property="OverridesDefaultStyle" Value="True"/>
    <!--
    <Setter Property="AllowsTransparency" Value="True"/>
    <Setter Property="WindowStyle" Value="None"/>
    -->
    <Setter Property="ResizeMode" Value="CanResizeWithGrip"/>
    <Setter Property="WindowChrome.WindowChrome">
        <Setter.Value>
            <WindowChrome NonClientFrameEdges="None" CornerRadius="0" 
                          ResizeBorderThickness="5" CaptionHeight="30"/>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Window}">
                <Border BorderThickness="1" BorderBrush="DarkGray" Background="DarkGray">
                    <Grid Background="{TemplateBinding Background}">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="30"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Border Background="White" Grid.Row="0"/>
                        <AdornerDecorator Grid.Row="1">
                            <ContentPresenter Margin="{TemplateBinding Padding}"
                                              Content="{TemplateBinding Content}"/>
                        </AdornerDecorator>
                        <ResizeGrip x:Name="WindowResizeGrip" Grid.Row="1"
                                    HorizontalAlignment="Right" VerticalAlignment="Bottom"
                                    Visibility="Collapsed" IsTabStop="False" />
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="ResizeMode" Value="CanResizeWithGrip">
                        <Setter TargetName="WindowResizeGrip" Property="Visibility"
                                Value="Visible" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Вот два окна, которые получаются в результате:

на какое сам сядешь?

Жёлтое окно — стандартное, зелёное — стилизованное.

Обратите внимание, что белый прямоугольник в зелёном окне — часть стиля, его можно увидеть в шаблоне:

<Border Background="White" Grid.Row="0"/>

и убрать при желании.


Решение проблемы с максимизацией у меня выглядит так: добавляем имя:

<Grid.RowDefinitions>
    <RowDefinition Height="30" Name="TopRow"/>
    <RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border Background="White" Grid.Row="0" VerticalAlignment="Bottom" Padding="0"
        Name="TopLine">
    <!-- это вместо иконки, для примера -->
    <Path Stroke="DarkMagenta" StrokeThickness="2" Stretch="Uniform"
          Data="M0,0 L1,1 M1,0 L 0,1" HorizontalAlignment="Left"/>
</Border>

и в триггеры:

<Trigger Property="WindowState" Value="Maximized">
    <Setter Property="WindowChrome.WindowChrome">
        <Setter.Value>
            <WindowChrome NonClientFrameEdges="None" CornerRadius="0" 
                          ResizeBorderThickness="5" CaptionHeight="37"/>
        </Setter.Value>
    </Setter>
    <Setter TargetName="TopRow" Property="Height" Value="37"/>
    <Setter TargetName="TopLine" Property="Padding" Value="7,7,0,0"/>
</Trigger>

Такое нужно потому, что окно в максимизированном состоянии размещается по координатам (-7, -7). (Информация из этого ответа.) Откуда взять константу 7 «цивилизованным путём», я пока не знаю. (Кажется, информация есть здесь.)

3
  • Комментарии не предназначены для расширенной дискуссии; разговор перемещён в чат.
    – Nick Volynkin
    6 июл 2017 в 2:59
  • @VladD Не могли бы вы сообщить свой адрес электронной почты? Хотел бы задать вопрос, который, пожалуй, не подходит для обсуждения на SO :)
    – D .Stark
    30 янв 2019 в 16:43
  • Достаточно будет ответить на сообщение по почте)
    – D .Stark
    31 янв 2019 в 10:17

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.