Wpf 使用ViewModels时的DataTriggers和默认属性、依赖项属性

我有一个UserControl和一个ViewModel

UserControl是一个简单的按钮模板，其中包含一个椭圆。基本上是一个圆形按钮

我使用ViewModel作为UserControl的DataContext。 ViewModel有一个名为“State”的属性，我将其值用作更改椭圆“颜色”的DataTrigger，这些“颜色”是UserControl中的依赖属性

一切似乎都正常，但我无法设置椭圆的默认颜色，因此我在UserControl的设计器中看不到任何东西。见附图

当我将UserControl放在主窗口设计器上时，我确实看到了正确的颜色和形状

我当然希望在UserControl中看到带有一些默认值的形状，这样更容易看到我正在使用的东西

我认为这与从ViewModel数据绑定“状态”值有关

下面是代码：usercontrolxaml

<UserControl x:Name="thisBtn" x:Class="WpfAppDelMe.Views.CustomButton"
         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:WpfAppDelMe.Views"
         xmlns:viewmodel="clr-namespace:WpfAppDelMe.ViewModels"
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300">

<UserControl.DataContext>
    <viewmodel:CustButtonViewModel  x:Name="xvm"/>
</UserControl.DataContext>
<Grid Background="#FF9EE3EA">
    <Button Content="{Binding State}" Command="{Binding ClickCommand}" Foreground="#FFD13B3B" Margin="0" >
        <Button.Template>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="1*"/>
                        <ColumnDefinition Width="1*"/>
                        <ColumnDefinition Width="1*"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="1*"/>
                        <RowDefinition Height="1*"/>
                        <RowDefinition Height="1*"/>
                    </Grid.RowDefinitions>


                    <Viewbox Grid.Row="0" Grid.Column="0" Grid.RowSpan="3" Grid.ColumnSpan="3">
                        <Ellipse Height="300" Width="300" Margin="5">
                            <Ellipse.Style>
                                <Style TargetType="{x:Type Ellipse}" >
                                    <!-- Below Line does not work! -->
                                    <Setter Property ="Fill" Value="Pink" />
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding State}" Value="{x:Null}">
                                            <Setter Property="Fill" Value="OldLace"/>
                                        </DataTrigger>
                                        <DataTrigger Binding="{Binding State}" Value="0">
                                            <Setter Property="Fill" Value="{Binding ElementName=thisBtn, Path=Color1}"/>
                                        </DataTrigger>
                                        <DataTrigger Binding="{Binding State}" Value="1">
                                            <Setter   Property="Fill" Value="{Binding ElementName=thisBtn, Path=Color2}"/>
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </Ellipse.Style>
                        </Ellipse>
                    </Viewbox>

                    <!--The content presenter for the button string.
                    Placing this in a view box makes sure of the correct size.-->
                    <Viewbox Grid.Row="1" Grid.ColumnSpan="3" Margin="10">
                        <ContentPresenter/>
                    </Viewbox>
                </Grid>
            </ControlTemplate>
        </Button.Template>
    </Button>

</Grid>

UserControl.cs文件

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfAppDelMe.Views
{
/// <summary>
/// Interaction logic for CustXam.xaml
/// </summary>
public partial class CustomButton : UserControl, INotifyPropertyChanged
{
    /// <summary>
    /// Interaction logic for the CustomButton UserControl
    /// View and Model
    /// ViewModel : CustomButtonViewModel
    /// </summary>
    public CustomButton()
    {
        InitializeComponent();
    }

    public static readonly DependencyProperty Color1Property = 
DependencyProperty.Register("Color1", typeof(Brush), typeof(CustButton), new 
PropertyMetadata(new SolidColorBrush(Colors.Black)));
    public static readonly DependencyProperty Color2Property = 
DependencyProperty.Register("Color2", typeof(Brush), typeof(CustButton), new 
PropertyMetadata(new SolidColorBrush(Colors.White)));

    public event PropertyChangedEventHandler PropertyChanged = delegate { }; 
 //Null initialization is required because there are no listeners or 
bindings 
 for this.
    private int btnState=0;

    //Button Color 1
    public Brush Color1
    {
        get { return (Brush)GetValue(Color1Property); }
        set { SetValue(Color1Property, value); }
    }

    public Brush Color2
    {
        get { return (Brush)GetValue(Color2Property); }
        set { SetValue(Color2Property, value); }
    }

    public int BtnState
    {
        get
        { return btnState;}

        set
        {
            btnState = value;
            this.OnPropertyChanged("BtnState");
        }
    }

    public void OnPropertyChanged(string name)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(name));
            xvm.State = btnState;
        }

      }
  }
}

[![enter image description here][1]][1]ViewModel for the UseControl

using System;
using System.ComponentModel;
using System.Windows.Input;

namespace WpfAppDelMe.ViewModels
{
/// <summary>
/// View Model class for the CustButton. All logic and calculations happen 
  here.
/// This is also the DataContext for the CustButton
/// 
/// View and Model : CustButton
/// ViewModel : CustButtonViewModel
/// </summary>
internal class CustButtonViewModel : INotifyPropertyChanged
{
    public CustButtonViewModel()
    {
    }

    private int state;
    public event PropertyChangedEventHandler PropertyChanged;

    private ICommand clickCommand;
    public ICommand ClickCommand
    {
        get
        {
            if (clickCommand == null)
            {
                clickCommand = new RelayCommand(param => ChangeState(), param => CanChange());
            }
            return clickCommand;
        }
    }

    /// <summary>
    /// 
    /// </summary>
    private void ChangeState()
    {
        if (State == 0)
        {
            State = 1;
        }
        else
        {
            State = 0;
        }
    }

    private bool CanChange()
    {
        return true;
    }

    //Button state
    public int State
    {
        get{ return state; }
        set
        {
            state = value;
            OnPropertyChange("State");
        }
    }

    /// <summary>
    /// On Property Changed
    /// </summary>
    /// <param name="name"></param>
    public void OnPropertyChange(string prop)
    {
       PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(prop));
        }
    }
  }
}

使用系统；
使用System.Collections.Generic；
使用系统组件模型；
使用System.Linq；
使用系统文本；
使用System.Threading.Tasks；
使用System.Windows；
使用System.Windows.Controls；
使用System.Windows.Data；
使用System.Windows.Documents；
使用System.Windows.Input；
使用System.Windows.Media；
使用System.Windows.Media.Imaging；
使用System.Windows.Navigation；
使用System.Windows.Shapes；
命名空间WpfAppDelMe.Views
{
/// 
///CustXam.xaml的交互逻辑
/// 
公共部分类CustomButton:UserControl，INotifyPropertyChanged
{
/// 
///CustomButton用户控件的交互逻辑
///视图和模型
///视图模型：自定义按钮视图模型
/// 
公共自定义按钮（）
{
初始化组件（）；
}
public static readonly dependencProperty color1属性=
DependencyProperty.Register（“Color1”、typeof（画笔）、typeof（CustButton）、new
PropertyMetadata（新SolidColorBrush（Colors.Black））；
公共静态只读从属属性Color2Property=
DependencyProperty.Register（“Color2”、typeof（画笔）、typeof（CustButton）、new
PropertyMetadata（新SolidColorBrush（Colors.White））；
公共事件PropertyChangedEventHandler PropertyChanged=委托{}；
//需要Null初始化，因为没有侦听器或
绑定
为了这个。
私有int btnState=0；
//按钮颜色1
公共画笔颜色1
{
获取{return（画笔）GetValue（Color1Property）；}
set{SetValue（Color1Property，value）；}
}
公共画笔颜色2
{
获取{return（画笔）GetValue（Color2Property）；}
set{SetValue（Color2Property，value）；}
}
公共int BtnState
{
得到
{返回btnState；}
设置
{
btnState=值；
此项。OnPropertyChanged（“BtnState”）；
}
}
公共void OnPropertyChanged（字符串名称）
{
PropertyChangedEventHandler处理程序=PropertyChanged；
if（处理程序！=null）
{
处理程序（此，新PropertyChangedEventArgs（名称））；
xvm.State=btnState；
}
}
}
}
[！[在此输入图像描述][1][1]UseControl的ViewModel
使用制度；
使用系统组件模型；
使用System.Windows.Input；
命名空间WpfAppDelMe.ViewModels
{
/// 
///查看CustButton的模型类。所有逻辑和计算都会发生
在这里
///这也是CustButton的DataContext
/// 
///视图和模型：自定义按钮
///ViewModel:CustButtonViewModel
/// 
内部类CustButtonViewModel:INotifyPropertyChanged
{
公共CustButtonViewModel（）
{
}
私人和国家；
公共事件属性更改事件处理程序属性更改；
专用ICommand和clickCommand；
公共ICommand ClickCommand
{
得到
{
如果（clickCommand==null）
{
单击Command=new RelayCommand（参数=>ChangeState（），参数=>CanChange（））；
}
返回clickCommand；
}
}
/// 
/// 
/// 
私有void ChangeState（）
{
如果（状态==0）
{
状态=1；
}
其他的
{
状态=0；
}
}
私人布尔坎奇酒店
{
返回true；
}
//按钮状态
公共int状态
{
获取{返回状态；}
设置
{
状态=值；
不动产变更（“州”）；
}
}
/// 
///关于财产变更
/// 
/// 
公共void OnPropertyChange（字符串属性）
{
PropertyChangedEventHandler处理程序=PropertyChanged；
if（处理程序！=null）
{
处理程序（此，新属性ChangedEventArgs（prop））；