將控制元件的前景色系結到滑鼠懸停

我有一個用戶控制元件，我必須根據滑鼠懸停、單擊或無更改顏色。跟隨 MVVM。這是我的代碼：

XAML 中的用戶控制

<userControls:NC DataContext="{Binding NCVM}" >
 
</userControls:NC>

用戶控制視圖模型

public class NCVM : ObservableObject
{

    public NCVM()
    {

    }

    private NCState _currentState = NCState.InActive;
    public NCState CurrentState
    {
        get => _currentState;
        set
        {
            _currentState = value;

            switch (_currentState)
            {
                case NCState.InActive:
                    ForegroundColor = System.Windows.Media.Brushes.LightGray;
                    IsActive = false;
                    break;
                case NCState.Active:
                    ForegroundColor = System.Windows.Media.Brushes.White;
                    IsActive = true;
                    break;
                case NCState.Hovered:
                    ForegroundColor = System.Windows.Media.Brushes.White;
                    IsActive = false;
                    break;
                default:
                    ForegroundColor = System.Windows.Media.Brushes.LightGray;
                    IsActive = false;
                    break;
            }
        }
    }

    public bool _isActive;
    public bool IsActive
    {
        get => _isActive;
        set => SetProperty(ref _isActive, value);
    }

    private System.Windows.Media.Brush _foregroundColor = System.Windows.Media.Brushes.LightGray;

    public System.Windows.Media.Brush ForegroundColor
    {
        get => _foregroundColor;
        set => SetProperty(ref _foregroundColor, value);
    }


}

主視窗視圖模型

public class MWVM : BVM
{
    #region Private Variables
    private NCVM _NCVM = new();
    #endregion

    public MWVM()
    {
        NCVM.CurrentState = NCState.Active;
    }

    #region Public Properties
    public NCVM NCVM
    {
        get => _NCVM;
        set => SetProperty(ref _NCVM, value);
    }
    #endregion
}

現在，它被預設為活動的檢查。現在，我必須手動讓它在懸停時改變，但不知道如何處理系結。

uj5u.com熱心網友回復：

MVVM 模式是將用戶界面（視圖）與資料和應用程式邏輯本身分離。您的示例違反了 MVVM，因為它將畫筆和視覺狀態存盤在視圖模型中。視圖模型應該只公開要系結的資料和命令，而不是用戶界面元素，并且它不能包含與用戶界面相關的邏輯，就像管理視覺狀態或外觀一樣。它經常被誤解為創建視圖模型并將所有內容都放在那里。

就您而言，我認為您可以通過將所有內容轉變為樣式來解決您的問題。以下 XAML 應顯示您的userControls:NC. 有不同狀態的觸發器，如Disabled、Hover / Mouse Over。請注意，您需要設定 a Background，否則控制元件不參與命中測驗，例如，即使您將滑鼠懸停在其上，該IsMouseOver屬性也不會參與。True對于無背景使用Transparent（不等于不設定值）。

<UserControl ...>
   <UserControl.Style>
      <Style TargetType="{x:Type userControls:NC}">
         <!-- Background must be set at least to "Transparent" -->
         <Setter Property="Background" Value="Black"/>
         <!-- Default -->
         <Setter Property="Foreground" Value="LightGray"/>
         <Style.Triggers>
            <!-- Hovered -->
            <Trigger Property="IsMouseOver" Value="True">
               <Setter Property="Foreground" Value="White"/>
            </Trigger>
            <!-- Disabled -->
            <Trigger Property="IsEnabled" Value="False">
               <Setter Property="Foreground" Value="LightGray"/>
            </Trigger>
         </Style.Triggers>
      </Style>
   </UserControl.Style>

   <!-- Dummy element for demonstration purposes of foreground -->
   <TextBlock Text="This text shows the foreground"/>

</UserControl>

uj5u.com熱心網友回復：

您可以查看EventTrigger或一般的 Triggers 來設定您的控制元件樣式。

*編輯：一個小例子，不考慮 MVVM，只是為了讓您了解觸發器。

用戶控制：

<UserControl x:Class="WpfApp1.UserControl1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:WpfApp1"
             mc:Ignorable="d" 
             d:DataContext="{d:DesignInstance Type={x:Type local:UserControl1}}"
             Height="200" Width="400">
    <UserControl.Style>
        <Style TargetType="UserControl">
            <Style.Triggers>
                <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsMyPropSet}" Value="True">
                    <Setter Property="Background" Value="Turquoise"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </UserControl.Style>
    <GroupBox Header="I am your usercontrol">
        <Button Width="100" Height="35" Content="Toggle Property" Click="Button_Click"/>
    </GroupBox>
</UserControl>

和代碼隱藏：

    public partial class UserControl1 : UserControl, INotifyPropertyChanged
{
    public UserControl1()
    {
        InitializeComponent();
        DataContext = this;
    }

    public event PropertyChangedEventHandler PropertyChanged;

    public bool IsMyPropSet { get; set; }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        IsMyPropSet = !IsMyPropSet;
        RaisePropertyChanged(nameof(IsMyPropSet));
    }

    protected void RaisePropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

標籤：C＃ wpf xml 用户控制

上一篇：MultiDataTrigger.Conditions檢查系結型別

下一篇：編輯進度條形狀wpf