All geek questions in one place

Possible location-based installation in WPF?

In CSS, you can create HTML elements based on their location in the element tree:

div#container div#menu a

I would like to do the same in WPF, so only the links in the menu section are stylized.

  • Question No. 1: How can this be done in WPF?

I was thinking of the following for Separators nested in a StatusBar:

 <Style TargetType="{x:Type StatusBar}"> <Setter Property="Background" Value="Transparent" /> <Setter Property="Padding" Value="0,0,20,0" /> <Style.Resources> <Style TargetType="{x:Type Separator}"> <Setter Property="Width" Value="20" /> <Setter Property="Background" Value="Green" /> </Style> </Style.Resources> </Style>

This part of XAML is included in the resource dictionary. StatusBar is displayed with a transparent background and the correct addition. However, the green delimiter, unfortunately, is not displayed. It just shows the default 1px wide series by default.

  • Question # 2: If this is the right solution, does anyone know why this is not working?

Thanks in advance.

+6
source share
3 answers

I came across an answer myself. The code I mentioned is correct for every case except the Separator. The Separator element must be defined with a special key, described in detail here: http://devlicio.us/blogs/christopher_bennage/archive/2008/06/19/styling-separators-in-wpf.aspx .

+1
source

It is certainly possible. Take a look at http://www.klopfenstein.net/lorenz.aspx/nested-cascading-styles-in-wpf

+2
source

I wrote a blog post some time ago, where I took the CSS selector mechanism (Fizzler) and applied it to WPF:

http://www.scottlogic.co.uk/blog/colin/2009/03/using-css-selectors-for-styling-in-wpf/

It allows you to use the CSS selector for target elements and apply styles to them. It also combines styles so that if multiple CSS selectors match, the styles from each are combined together.

See the following example:

 <css:StyleSheet x:Key="cssStyles"> <css:StyleSheet.Rules> <css:StyleRule Selector=".form Grid *" SelectorType="LogicalTree"> <css:StyleRule.DeclarationBlock> <css:StyleDeclarationBlock> <css:StyleDeclaration Property="Margin" Value="4,4,4,4"/> </css:StyleDeclarationBlock> </css:StyleRule.DeclarationBlock> </css:StyleRule> <css:StyleRule Selector=".form TextBlock.mandatory"> <css:StyleRule.DeclarationBlock> <css:StyleDeclarationBlock> <css:StyleDeclaration Property="Foreground" Value="Red"/> </css:StyleDeclarationBlock> </css:StyleRule.DeclarationBlock> </css:StyleRule> <css:StyleRule Selector="Border.form"> <css:StyleRule.DeclarationBlock> <css:StyleDeclarationBlock> <css:StyleDeclaration Property="BorderThickness" Value="2"/> <css:StyleDeclaration Property="BorderBrush" Value="Black"/> <css:StyleDeclaration Property="CornerRadius" Value="5"/> <css:StyleDeclaration Property="Margin" Value="10,10,10,10"/> </css:StyleDeclarationBlock> </css:StyleRule.DeclarationBlock> </css:StyleRule> <css:StyleRule Selector=".form .title"> <css:StyleRule.DeclarationBlock> <css:StyleDeclarationBlock> <css:StyleDeclaration Property="HorizontalAlignment" Value="Stretch"/> <css:StyleDeclaration Property="HorizontalContentAlignment" Value="Center"/> <css:StyleDeclaration Property="Background" Value="DarkBlue"/> <css:StyleDeclaration Property="Foreground" Value="White"/> <css:StyleDeclaration Property="FontSize" Value="13"/> <css:StyleDeclaration Property="Padding" Value="3,3,3,3"/> <css:StyleDeclaration Property="FontWeight" Value="Bold"/> </css:StyleDeclarationBlock> </css:StyleRule.DeclarationBlock> </css:StyleRule> </css:StyleSheet.Rules> </css:StyleSheet>
0
source

Source: https://habr.com/ru/post/892751/

More articles:


All Articles