Стили и шаблоны элемента 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.

Apply style for buttons in all Windows in WPF

I have a style setup in my XAML for the creation of round corner Button s in my WPF window. I would like this style to apply to all buttons on all windows in my application.

Is there a way, similar to CSS, that I could put this into another file and reference it somehow in all my windows? Or do I just need to copy and paste it every time.

4 Answers 4

You could use the application resources to do that.

Here’s a bit of code for example (in app.xaml)

and then, for your buttons (for example):

Hope this will help you to find what you’re looking for.

If you want to do it in a clean way, you can create a ResourceDictionary.xaml , that has the same funcion that CSS in Web design.

First, go to your project and add a ResourceDictionary . Inside it you can add styles for all the desired elements you want, for example, change color background of a Button that applies to all your buttons:

If you don’t specify an identifier on each Style , that style will apply to all controls that match with the TargetType you specified. If you want button to look different, you can do the same as above, but also include an identifier to that style, that will be used by each different button:

Then, on each .xaml that you want styles to be applied you have to add the reference to this ResourceDictionary.xaml that you are creating:

I think this is what you are looking for.

If you want to draw a rounded button, you need to override the Template property of the button. This means that you need to tell button every action he needs to do from the moment you override it. See here. So, in a little and reduced concept, you would like to write something like this:

See that here I override all basic properties needed to draw a basic funcitonal button, like Foreground , Background , Width . and the MouseOver event, to change colour when passing mouse over it. The CornerRadius property of the Border inside ControlTemplate is the radius you are looking for.

So basically, you are overriding the border property that comes by default for all buttons.

How to set the style in WPF Window.Resources.

I want to create multiple styles in the Window.Resources. Below is the code I tried, but it’s not working:

It throws an error saying:

The property «Content» is set more than once.

3 Answers 3

This error has nothing to do with styles, the window can only contain one child (which sets the Content ), use some container which can contain more than one child. e.g. a StackPanel or Grid .

set the target type for the second style

put the buttons inside a stackpanel or Grid

I guess BasedOn inherits the properties from other style type and you have

set in both the styles hence getting an error

Not the answer you’re looking for? Browse other questions tagged wpf xaml resources window styles or ask your own question.

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

site design / logo © 2021 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2021.4.16.39093

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

How to create a style for a control (WPF .NET)

With Windows Presentation Foundation (WPF), you can customize an existing control’s appearance with your own reusable style. Styles can be applied globally to your app, windows and pages, or directly to controls.

The Desktop Guide documentation for .NET 5 (and .NET Core) is under construction.

Create a style

You can think of a Style as a convenient way to apply a set of property values to one or more elements. You can use a style on any element that derives from FrameworkElement or FrameworkContentElement such as a Window or a Button.

The most common way to declare a style is as a resource in the Resources section in a XAML file. Because styles are resources, they obey the same scoping rules that apply to all resources. Put simply, where you declare a style affects where the style can be applied. For example, if you declare the style in the root element of your app definition XAML file, the style can be used anywhere in your app.

If you declare the style in one of the app’s XAML files, the style can be used only in that XAML file. For more information about scoping rules for resources, see Overview of XAML resources.

A style is made up of child elements that set properties on the elements the style is applied to. In the example above, notice that the style is set to apply to TextBlock types through the TargetType attribute. The style will set the FontSize to 15 and the FontWeight to ExtraBold . Add a for each property the style changes.

Apply a style implicitly

A Style is a convenient way to apply a set of property values to more than one element. For example, consider the following TextBlock elements and their default appearance in a window.

You can change the default appearance by setting properties, such as FontSize and FontFamily, on each TextBlock element directly. However, if you want your TextBlock elements to share some properties, you can create a Style in the Resources section of your XAML file, as shown here.

When you set the TargetType of your style to the TextBlock type and omit the x:Key attribute, the style is applied to all the TextBlock elements scoped to the style, which is generally the XAML file itself.

Now the TextBlock elements appear as follows.

Apply a style explicitly

If you add an x:Key attribute with value to the style, the style is no longer implicitly applied to all elements of TargetType. Only elements that explicitly reference the style will have the style applied to them.

Here is the style from the previous section, but declared with the x:Key attribute.

To apply the style, set the Style property on the element to the x:Key value, using a StaticResource markup extension, as shown here.

Notice that the first TextBlock element has the style applied to it while the second TextBlock element remains unchanged. The implicit style from the previous section was changed to a style that declared the x:Key attribute, meaning, the only element affected by the style is the one that referenced the style directly.

Once a style is applied, explicitly or implicitly, it becomes sealed and can’t be changed. If you want to change a style that has been applied, create a new style to replace the existing one. For more information, see the IsSealed property.

You can create an object that chooses a style to apply based on custom logic. For an example, see the example provided for the StyleSelector class.

Apply a style programmatically

To assign a named style to an element programmatically, get the style from the resources collection and assign it to the element’s Style property. The items in a resources collection are of type Object. Therefore, you must cast the retrieved style to a System.Windows.Style before assigning it to the Style property. For example, the following code sets the style of a TextBlock named textblock1 to the defined style TitleText .

Extend a style

Perhaps you want your two TextBlock elements to share some property values, such as the FontFamily and the centered HorizontalAlignment. But you also want the text My Pictures to have some additional properties. You can do that by creating a new style that is based on the first style, as shown here.

This TextBlock style is now centered, uses a Comic Sans MS font with a size of 26 , and the foreground color set to the LinearGradientBrush shown in the example. Notice that it overrides the FontSize value of the base style. If there’s more than one Setter pointing to the same property in a Style, the Setter that is declared last takes precedence.

The following shows what the TextBlock elements now look like:

This TitleText style extends the style that has been created for the TextBlock type, referenced with BasedOn=»>» . You can also extend a style that has an x:Key by using the x:Key of the style. For example, if there was a style named Header1 and you wanted to extend that style, you would use BasedOn=»» .

Relationship of the TargetType property and the x:Key attribute

As previously shown, setting the TargetType property to TextBlock without assigning the style an x:Key causes the style to be applied to all TextBlock elements. In this case, the x:Key is implicitly set to . This means that if you explicitly set the x:Key value to anything other than , the Style isn’t applied to all TextBlock elements automatically. Instead, you must apply the style (by using the x:Key value) to the TextBlock elements explicitly. If your style is in the resources section and you don’t set the TargetType property on your style, then you must set the x:Key attribute.

In addition to providing a default value for the x:Key , the TargetType property specifies the type to which setter properties apply. If you don’t specify a TargetType , you must qualify the properties in your Setter objects with a class name by using the syntax Property=»ClassName.Property» . For example, instead of setting Property=»FontSize» , you must set Property to «TextBlock.FontSize» or «Control.FontSize» .

Also note that many WPF controls consist of a combination of other WPF controls. If you create a style that applies to all controls of a type, you might get unexpected results. For example, if you create a style that targets the TextBlock type in a Window, the style is applied to all TextBlock controls in the window, even if the TextBlock is part of another control, such as a ListBox.

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, чтобы он тоже соответствовал нужному стилю. Но это уже будет упражнение на следующий свободный вечер.

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

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

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