Стили и шаблоны элемента Window Window Styles and Templates

В этом разделе описываются стили и шаблоны для Window элемента управления. This topic describes the styles and templates for the Window control. Можно изменить значение по умолчанию, ControlTemplate чтобы обеспечить уникальность внешнего вида элемента управления. You can modify the default ControlTemplate to give the control a unique appearance. Дополнительные сведения см. в разделе Создание шаблона для элемента управления. For more information, see Create a template for a control.

Части окна Window Parts

WindowЭлемент управления не имеет именованных частей. The Window control does not have any named parts.

Состояния окна Window States

В следующей таблице перечислены визуальные состояния Window элемента управления. The following table lists the visual states for the Window control.

Имя VisualState VisualState Name	Имя VisualStateGroup VisualStateGroup Name	Описание Description
Допустимо Valid	ValidationStates ValidationStates	Элемент управления использует Validation класс, а Validation.HasError присоединенное свойство — false . The control uses the Validation class and the Validation.HasError attached property is false .
InvalidFocused InvalidFocused	ValidationStates ValidationStates	Validation.HasErrorПрисоединенное свойство имеет true фокус. The Validation.HasError attached property is true has the control has focus.
InvalidUnfocused InvalidUnfocused	ValidationStates ValidationStates	Validation.HasErrorПрисоединенное свойство true имеет элемент управления, не имеющий фокуса. The Validation.HasError attached property is true has the control does not have focus.

Пример для ControlTemplate окна Window ControlTemplate Example

В следующем примере показано, как определить ControlTemplate для Window элемента управления. The following example shows how to define a ControlTemplate for the Window control.

ControlTemplateИспользует один или несколько следующих ресурсов. The ControlTemplate uses one or more of the following resources.

Wpf windows style none

This forum has migrated to Microsoft Q&A. Visit Microsoft Q&A to post new questions.

Answered by:

Question

I like to create a WPF window which has no border at all and which is resizeable. With previous versions of Windows this used to be quite simple, you just had to use WindowStyle=»None» and ResizeMode=»CanResize» as given in the following xaml:

Window x : Class =» WpfApplication1 . MainWindow «

xmlns : x =»http://schemas.microsoft.com/winfx/2006/xaml»

Title =»MainWindow» Height =»350″ Width =»525″ ResizeMode =» CanResize «

WindowStyle =» None » Background =»#FF0000″>

With Windows 10 this is not working any more as a white top bar is always displayed:

First of all I would expect that no white bar is given when I request a border less window.

Secondly is there a work around to get rid of the white top bar?

NOTE: When I set the ResizeMode to ‘NoResize’ the white top bar disappears.

Thanks a lot in advance

Answers

If you want precise control over styling and you want to retain user resizing then I suggest you take a look at windowchrome.

I’ve not tried this on win10 but it may address your issue.

Take a look at this:

Specifically Window6 which has this style applied ( it’s in Dictionary1 ).

Obviously, it’s not doing exactly what your red window does but it will resize and the stuff that looks like an edge is just styling, you could have nothing there at all.

( Windows tend to look a bit odd that way though.)

Hope that helps.

All replies

If you want precise control over styling and you want to retain user resizing then I suggest you take a look at windowchrome.

I’ve not tried this on win10 but it may address your issue.

Take a look at this:

Specifically Window6 which has this style applied ( it’s in Dictionary1 ).

Obviously, it’s not doing exactly what your red window does but it will resize and the stuff that looks like an edge is just styling, you could have nothing there at all.

( Windows tend to look a bit odd that way though.)

Hope that helps.

Windows 10 is still in preview mode so maybe this will be fixed in the final version. At least you could always hope I guess.

I am not able to reproduce your issue as I am not running Windows 10 at the moment.

However, the best way to customize a window is to create your own custom window class and style it however you want. Then you have complete control over the way it looks. I have written a blog post about how to do this: http://blog.magnusmontin.net/2013/03/16/how-to-create-a-custom-window-in-wpf/

Hope that helps.

Please remember to close your threads by marking helpful posts as answer and then start a new thread if you have a new question.

Using Window Chrome worked like a charm.

Using Window Chrome worked like a charm.

I have also confirmed that settling the WindowChrome.WindowChrome property fixes this problem. It also removes a gray border that has always appeared around my Windows 7 windows that have AllowTransparency=False. Making this work only requires that I set the WindowChrome.WindowChrome property to a default WindowChrome object. Here is a code snippet from my Window Style.

However, when I did this, I noticed that my custom minimize, maximize, and close buttons at the top of my window (and defined with my Style) were not clickable. Fixing this required setting the CaptionHeight=0.

Finally, I also noticed that when I use this feature, I don’t receive SC_RESIZE events in my window message handler:

For this reason, I am conditionally using WindowChrome only for windows which require AllowsTransparency=False (rather than on every window in my program):

WPF: Нестандартное окно

На днях, после долгого перерыва, надо было поработать на WPF, и возникло желание заменить поднадоевший стандартный вид окон Windows 7 на что-нибудь более вдохновляющее, скажем в стиле Visual Studio 2012:

Переходить на Windows 8 ради этого еще не хотелось, как и добавлять в проекты ссылки на метро-подобные библиотеки и разбираться с ними — это будет следуюшим шагом. А пока было интересно потратить вечер и добиться такого результата с минимальными изменениями рабочего кода. Забегая вперед, скажу что результат, как и планировалось, получился довольно чистым: фрагмент следующего кода, если не считать нескольких аттрибутов пропущенных для наглядности, это и есть окно с первого скриншота. Все изменения ограничились заданием стиля.

Обновление 3 декабря: в репозиторий добавлена альтернативная имплементация использующая новые классы в .Net 4.5 (проект WindowChrome.Demo), что позволило избежать существенной части нативного программирования с WinAPI.

Дальше я остановлюсь на ключевых моментах и подводных камнях при создания стиля окна. Демонстрационный проект доступен на github’е, если вы захотите поразбираться с исходниками самостоятельно или же просто использовать этот стиль не вдаваясь в подробности.

Основная проблема

WPF не работает с NC-area. NC, она же «Non-client area», она же «не-клиентская часть», она же хром, обрабатывается на более низком уровне. Если вам захотелось изменить какой-то из элементов окна — бордюр, иконку, заголовок или кнопку, то первый совет, который попадается при поиске — это убрать стиль окна и переделать все самому. Целиком.

За всю историю развития WPF в этом отношении мало что изменилось. К счастью, у меня были исходники из старинного поста Алекса Яхнина по стилизации под Офис 2007, которые он писал работая над демо проектом по популяризации WPF для Микрософта, так что с нуля начинать мне не грозило.

В итоге нам надо получить один стиль, и по возможности, без дополнительных контролов: в дереве проекта XAML и код стиля расположились в директории CustomizedWindow, а основное окно в корне проекта.

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

Создаем стиль

Стиль для окна, как и для любого другого контрола в WPF задается при помощи ControlTemplate. Содержимое окна будет показываться ContentPresenter’ом, а функциональность которую проще сделать в коде c#, подключится через x:Class атрибут в ResourceDictionary. Все очень стандартно для XAML’а.

Сразу же определим кнопки управления окном в стиле Студии 2012. Это будет единственный дополнительный глобальный стиль на случай если потом возникнет желание использовать такие кнопки в приложении.

Нам нужна функциональность обычной кнопки, но с очень примитивной отрисовкой — фактически только фон и содержимое.

Изображения на кнопках проще всего сделать «в векторе». Например, вот так выглядит maximize:

Для текста заголовка используем стандартный шрифт Segoe UI. Единственная особенность здесь — убедиться, что текст отрисован без размытия, иначе заголовок окна будет выглядеть… плохо он будет выглядеть — как во второй строчке на скриншоте.

Кстати, для Path’а на кнопках с той же целью использовался EdgeMode=«Aliased», а
для текста в WPF 4+ появилась долгожданная возможность указать, что отображаться он будет на дисплее, а не на «идеальном устройстве», что и позволило добиться приемлимой четкости на наших неидеальных экранах.

Еще одна интересная особенность связана с «геометрией Windows 7» при распахивании окна на весь экран. Windows жульничает, масштабируя окно так, что бордюр целиком уходит за границу экрана, оставляя на мониторе только клиентскую часть окна. Естественно, что Windows при этом больше не отрисовывает бордюр и для стандартных окон все работает как ожидалось. WPF это никак не отрабатывает и, для таких окон как у нас, есть риск потерять часть изображения или начать рисовать на соседнем мониторе, если он подключен.

Остальные детали менее существенны, но если интересно, добро пожаловать в исходники.

Оживляем окно

.Net 4.0

Помимо реакции на кнопки и иконку, окно должно перемещаться и изменять размер при drag’е за заголовок, за края и уголки. Соответствующие горячие зоны проще всего задать при помощи невидимых контролов. Пример для левого верхнего (северо-западного) угла.

При наличие атрибута Class в ресурсах, методы этого класса можно вызывать просто по имени как обычные обработчики событий, чем мы и воспользовались. Сами обработчики, например MinButtonClick и OnSizeNorthWest, выглядят примерно так:

DragSize далее вызывает WinAPI (исходник) и заставляет Windows перейти в режим измененения размера окна как в до-дотнетовские времена.

.Net 4.5

В 4.5 появились удобные классы SystemCommands и WindowChrome. При добавлении к окну, WindowChrome берет на себя функции изменения размера, положения и состояния окна, оставляя нам более «глобальные» проблемы.

При желании, можно использовать WindowChrome и на .Net 4.0, но придется добавить дополнительные библиотеки, например WPFShell (спасибо afsherman за подсказку).

Почти готово. Зададим триггеры для контроля изменений интерфейса при изменении состояния окна. Вернемся в XAML и, например, заставим StatusBar’ы изменять цвет в зависимости от значения Window.IsActive.

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

Вот стиль именно этого StatusBar’а мы сейчас и задали. При желании и времени так же можно задать и стиль для других классов контролов, например подправить ScrollBar, чтобы он тоже соответствовал нужному стилю. Но это уже будет упражнение на следующий свободный вечер.

Собираем все вместе

Все. Нам осталось только подключить стиль к проекту через ресурсы приложения:

И можно использовать его в любом окне.

Пошаговое руководство. стиль содержимого WPF Walkthrough: Style WPF content

В этой статье показано, как применять стили к элементу управления Windows Presentation Foundation (WPF), размещенному в форме Windows Forms. This article show you how to apply styling to a Windows Presentation Foundation (WPF) control hosted on a Windows Form.

Предварительные требования Prerequisites

Для выполнения шагов, описанных в этом руководстве, вам понадобится Visual Studio. You need Visual Studio to complete this walkthrough.

Создание проекта Create the project

Откройте Visual Studio и создайте новый проект Windows Forms приложения в Visual Basic или Visual C# с именем StylingWpfContent . Open Visual Studio and create a new Windows Forms Application project in Visual Basic or Visual C# named StylingWpfContent .

При размещении содержимого WPF поддерживаются только проекты C# и Visual Basic. When hosting WPF content, only C# and Visual Basic projects are supported.

Создание типов элементов управления WPF Create the WPF control types

После добавления в проект типа элемента управления WPF можно разместить его в элементе управления ElementHost. After you add a WPF control type to the project, you can host it in an ElementHost control.

Добавьте в решение новый проект WPF UserControl. Add a new WPF UserControl project to the solution. Используйте имя по умолчанию для этого типа элемента управления ( UserControl1.xaml ). Use the default name for the control type, UserControl1.xaml . Дополнительные сведения см. в разделе Пошаговое руководство. Создание нового содержимого WPF на Windows Forms во время разработки. For more information, see Walkthrough: Creating New WPF Content on Windows Forms at Design Time.

Убедитесь в том, что элемент UserControl1 выбран в представлении конструирования. In Design view, make sure that UserControl1 is selected.

В окне Свойства задайте Width Height для свойств и значение 200. In the Properties window, set the value of the Width and Height properties to 200.

Добавьте System.Windows.Controls.Button элемент управления в UserControl и присвойте Content свойству значение Cancel. Add a System.Windows.Controls.Button control to the UserControl and set the value of the Content property to Cancel.

Добавьте второй System.Windows.Controls.Button элемент управления в UserControl и задайте Content для свойства значение ОК. Add a second System.Windows.Controls.Button control to the UserControl and set the value of the Content property to OK.

Выполните построение проекта. Build the project.

Применение стиля к элементу управления WPF Apply a Style to a WPF Control

Для изменения внешнего вида и поведения элемента управления WPF к нему можно применить различные стили. You can apply different styling to a WPF control to change its appearance and behavior.

Откройте Form1 в конструкторе Windows Forms. Open Form1 in the Windows Forms Designer.

На панели элементов дважды щелкните, UserControl1 чтобы создать экземпляр UserControl1 в форме. In the Toolbox, double-click UserControl1 to create an instance of UserControl1 on the form.

Экземпляр UserControl1 размещается в новом элементе управления ElementHost с именем elementHost1 . An instance of UserControl1 is hosted in a new ElementHost control named elementHost1 .

На панели смарт-тегов elementHost1 нажмите кнопку Изменить размещенное содержимое из раскрывающегося списка. In the smart tag panel for elementHost1 , click Edit Hosted Content from the drop-down list.

UserControl1 открывается в конструкторе WPF. UserControl1 opens in the WPF Designer.

В представлении XAML вставьте следующий код XAML после открывающего тега . In XAML view, insert the following XAML after the opening tag. Этот код XAML создает градиент с контрастной градиентной границей. This XAML creates a gradient with a contrasting gradient border. При нажатии на элемент управления градиенты изменяются, формируя образ нажатой кнопки. When the control is clicked, the gradients are changed to generate a pressed button look. Более подробную информацию см. в разделе Стилизация и использование шаблонов. For more information, see Styling and Templating.

Примените SimpleButton стиль, определенный на предыдущем шаге, к кнопке Отмена, вставив следующий код XAML в тег кнопки Отмена . Apply the SimpleButton style defined in the previous step to the Cancel button by inserting the following XAML in the tag of the Cancel button.

Объявление кнопки будет похоже на следующий XAML: Your button declaration will resemble the following XAML:

Выполните построение проекта. Build the project.

Откройте Form1 в конструкторе Windows Forms. Open Form1 in the Windows Forms Designer.

Новый стиль применяется для элемента управления button. The new style is applied to the button control.

В меню Отладка выберите команду начать отладку , чтобы запустить приложение. From the Debug menu, select Start Debugging to run the application.

Нажмите кнопки ОК и Отмена и просмотрите различия. Click the OK and Cancel buttons and view the differences.