Use Net Core to build WPF app (III. VisualState visual state)

At present Net Core 3.1 has been released for some time, and its support for WPF has been gradually improved. I still remember when Microsoft released WPF source code in Github The version of Net Core should be 1.0. I thought WPF could cross platform, but it still did not support cross platform.

In the future blog sample program, I will use it Net Core to build WPF App. The usage is the same as Net Framework is basically consistent.

 

Previously, when setting control styles or customizing controls, triggers were used to make style changes. A trigger can initiate an action when a property value changes.

Like this:

<Style TargetType="ListBoxItem">
        <Setter Property="Opacity" Value="0.5" />
        <Setter Property="MaxHeight" Value="75" />
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Trigger.Setters>
                    <Setter Property="Opacity" Value="1.0" />
                </Trigger.Setters>
            </Trigger>
        </Style.Triggers>
</Style>

 

You can also use the VisualState class to make style changes

The VisualState class implements a control that can always be in a specific state. For example, when the mouse moves on the surface of the control, the control is considered to be in the MouseOver state. Controls that do not have a specific state are considered to be in a common Normal state.

States are divided into multiple groups. The previously mentioned States belong to the CommonStates state group( VisualStateGroup ). Most controls have two state groups: CommonStates and FocusStates. The

In each state group applied to a control, the control is always in one state of each group. However, controls cannot be in two different states in the same group.

For complete status, please refer to the following table:

VisualState name VisualStateGroup name describe
ordinary CommonStates Default state.
MouseOver CommonStates The mouse pointer hovers over the control.
pressed CommonStates Control pressed.
disabled CommonStates Control is disabled.
Focus set FocusStates Control has focus.
Lose focus FocusStates Control has no focus.

 

Next, we use the VisualState class to customize a Button style

1. Create one using Visual Studio 2019 Net Core WPF program

2. Add a Button control in MainWindow

 1 <Window x:Class="VisualStateDemo.MainWindow"
 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 5         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 6         xmlns:local="clr-namespace:VisualStateDemo"
 7         mc:Ignorable="d"
 8         Title="MainWindow" Height="450" Width="800">
 9     <Grid>
10         <Button Content="Test" HorizontalAlignment="Center" VerticalAlignment="Center" Width="88" Height="26"/>
11     </Grid>
12 </Window>

 

3. On windows Define styles under resources, as follows

 

Tags: C# .NET WPF

Posted by roswell on Wed, 01 Jun 2022 06:41:50 +0530