为什么在图片更改之间绑定以单击它不起作用

Question

I want when I press on bulb button every time picture will change. I tried but without success. My code doesn't work, please tell my why, thanks.

Here is the UserControl in XAML:

<UserControl x:Class="PL_Wpf.CustomControls.Bulb"
             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:i="http://schemas.microsoft.com/expression/2010/interactivity"           
             mc:Ignorable="d" 
             >
    <Grid>                   
        <Button x:Name="BulbButton" Height="60" Width="40" Click="BulbButton_Click" >        
            <Button.Template>
                <ControlTemplate>
                    <Image  Source="../Pics/bulb_off.jpg" Width="40" Height="60"  >
                        <Image.Style>
                            <Style TargetType="{x:Type Image}">
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding ElementName=Bulb, Path=OnOff}" Value="True">
                                        <Setter Property="Source" Value="../Pics/bulb_on.jpg" />
                                    </DataTrigger>
                                    <DataTrigger Binding="{Binding ElementName=Bulb, Path=OnOff}" Value="False">
                                        <Setter Property="Source" Value="../Pics/bulb_off.jpg" />
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </Image.Style>
                    </Image>
                </ControlTemplate>
            </Button.Template>
        </Button>
    </Grid>
</UserControl>

And here is the code behind:

public partial class Bulb : UserControl, INotifyPropertyChanged
{
    public bool OnOff { get; set; }

    public Bulb()
    {
        InitializeComponent();
        DataContext = this;
        OnOff = false;
    }
    public event PropertyChangedEventHandler PropertyChanged;

    public void OnPropertyChanged(PropertyChangedEventArgs e)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, e);
        }
    }

    public void BulbButton_Click(object sender, RoutedEventArgs e)
    {
        OnOff = (OnOff == false) ? true : false;
    }

    public bool On
    {
        get { return OnOff; }
        set
        {
            OnOff = value;
            OnPropertyChanged(new PropertyChangedEventArgs("On"));
        }
    }
}

Answer 1

The think that you want to achieve with your control can be simply done by modifying the control template of a checkbox.

Just add this code in the window in place of your control:

<CheckBox>
        <CheckBox.Template>

            <ControlTemplate TargetType="CheckBox">
                <Grid>
                    <Image  Source="pack://siteoforigin:,,,/Pics/bulb_off.jpg" Width="40" Height="60"  />
                    <Image  Source="pack://siteoforigin:,,,/Pics/bulb_on.jpg" Width="40" Height="60" Name="CheckMark" />
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="false">
                        <Setter TargetName="CheckMark" Property="Visibility" Value="Hidden"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </CheckBox.Template>
    </CheckBox>