WPF provides several features that allow you to insert something you like into the basic elements and standardize the visual appearance of the program.
- Style - an important tool for organizing and reusing formatting options.
- Behavior - encapsulates some common UI functions.
style
<Window.Resources> <!--Like resources, styles have a key name, usually in Style ending--> <Style x:Key="BigFontButtonStyle"> <Setter Property="Control.FontFamily" Value="Times New Roman"/> <Setter Property="Control.FontSize" Value="18"/> <Setter Property="Control.FontWeight" Value="Bold"/> </Style> </Window.Resources>
The Style is inserted into the element through the Style attribute of the element (defined in the FrameworkElement base class).
<Button Name="cmd" Style="{StaticResource BigFontButtonStyle}"/>
Style sets the initial appearance of the element. If the corresponding attributes are set, the style will be overwritten. Ideally, you should not rely on this behavior - you should create more styles to allow more flexibility in adjusting the interface.
The Style class has five important attributes:
attribute | explain |
---|---|
Setters | Sets the property value and the Setter object or collection of EventSetter objects that automatically associate event handlers |
Triggers | A collection of objects that inherit from the TriggerBase class and can automatically change style settings |
Resources | Resource collection for styles |
BasedOn | Create more specific styles that inherit from other style settings |
TargetType | Identifies the type of element to which the style is applied |
If you want to use the same font for a group of controls, you don't want to use the same style for each control. In this case, you can put them in the container and set the style of the container. As long as the set attribute has the attribute value inheritance attribute, these values will be passed to the child element.
If you decide to use automatic styling to set the appearance, do not use attribute inheritance to avoid becoming more complex. At this point, you can try to use explicit styles for special cases.
Property setters are the most common feature of all styles, but you can also create a collection of EventSetter objects that associate a specific handler with an event.
<Style x:Key="MouseOverHighlightStyle"> <EventSetter Event="TextBlock.MouseEnter" Handler="element_MouseEnter"/> <EventSetter Event="TextBlock.MouseLeave" Handler="element_MouseLeave"/> <Setter Property="TextBlock.Padding" Value="5"/> </Style>
trigger
Use triggers to automate simple style changes, which usually require the use of template event processing logic. Triggers are linked to styles through the Style.Triggers collection, and each trigger is an instance of a derived class of System.Windows.TriggerBase.
Implementation class | explain |
---|---|
Trigger | Detect changes in attributes |
MultiTrigger | Multi condition trigger |
DataTrigger | Monitor changes in bound data |
MultiDataTrigger | Multiple data triggers |
EventTrigger | When an event occurs, the trigger applies animation |
By using the FrameworkElement.Triggers collection, triggers can be applied directly to elements without creating styles, but only event triggers are supported.
<Style x:Key="BigFontButton"> <Style.Triggers> <Triggers Property="Control.IsFocused" Value="True"> <Setter Property="Control.Foreground" Value="DarkRed"/> </Triggers> </Style.Triggers> </Style>
In essence, a trigger is one of many property providers that override the value returned from a dependent property. However, the original properties remain. As long as the trigger is disabled, the property values before the trigger are available again.
behavior
Behavior creation encapsulates the behavior of some common user interface functions, which can be added to another control of any program.
- System.windows.interaction.dll - defines basic classes that support behavior.
- Microsoft.Expression.Interactions.dll - adds some useful extensions by adding optional action and trigger classes based on the core behavior class.
public class DragInCanvasBehavior : Behavior<UIElement> { protected override void OnAttached() { base.OnAttached(); // The element of the placement behavior is accessed through the AssociatedObject attribute, and the event handler can be associated this.AssociatedObject.MouseMove += M_MouseMove; this.AssociatedObject.MouseLeftButtonUp += M_MouseLeftButtonUp; } protected override void OnDetaching() { base.OnDetaching(); this.AssociatedObject.MouseMove -= M_MouseMove; this.AssociatedObject.MouseLeftButtonUp -= M_MouseLeftButtonUp; } }
<Canvas> <Ellipse Canvas.Left="10" Canvas.Top="70"> <i:Interaction.Behaviors> <custom:DragInCanvasBehavior/> </i:Interaction.Behaviors> </Ellipse> </Canvas>