在 WPF 中單擊時更改圓形按鈕背景圖像

Question

我下面有一個圓形按鈕

<Button  x:Name="btnLight" Width="72" Height="72" Content="" Margin="180,0,372,94" VerticalAlignment="Bottom" d:LayoutOverrides="VerticalAlignment">
            <Button.Template>
                <ControlTemplate>
                    <Grid>
                        <Ellipse>
                            <Ellipse.Fill>
                                <ImageBrush ImageSource="Images/light-off.jpg"/>
                            </Ellipse.Fill>
                        </Ellipse>
                    </Grid>
                </ControlTemplate>
            </Button.Template>
    </Button>

單擊時如何更改背景圖像 (Images/light-on.jpg)？ 謝謝！

Answer 1

哇！ 你在這里得到了一些復雜的答案......你們都做了太多的工作！！！ 這個問題有一個非常簡單的解決方案。 首先，讓我們按照它應該的方式整理這個ControlTemplate ：

<Button x:Name="btnLight" Width="72" Height="72" Content="" Margin="180,0,372,94" 
    VerticalAlignment="Bottom">
    <Button.Template>
        <ControlTemplate>
            <Ellipse Name="Ellipse" Fill="{TemplateBinding Background}" />
        </ControlTemplate>
    </Button.Template>
</Button>

現在，您可以添加一個非常簡單的Style來執行圖像更改：

<Style TargetType="{x:Type Button}">
    <Setter Property="Button.Background">
        <Setter.Value>
            <ImageBrush ImageSource="Images/Add_16.png" />
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="Button.IsPressed" Value="True">
            <Setter Property="Button.Background">
                <Setter.Value>
                    <ImageBrush ImageSource="Images/Copy_16.png" />
                </Setter.Value>
            </Setter>
        </Trigger>
    </Style.Triggers>
</Style>

Answer 2

要正確執行此操作，您需要創建一個視圖模型，其中包含按鈕按下時要調用的處理程序和可用於數據觸發器以更改圖像的布爾屬性。 從視圖模型開始：

public class ViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string propertyName)
    {
        if (this.PropertyChanged != null)
        {
            this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }

    public RelayCommand OnClickedCommand { get; private set; }

    private bool _ImageChanged;
    public bool ImageChanged
    {
        get { return this._ImageChanged; }
        private set {
            this._ImageChanged = value;
            OnPropertyChanged("ImageChanged");
        }
    }

    public ViewModel()
    {
        this.OnClickedCommand = new RelayCommand(param => OnClicked());
    }

    private void OnClicked()
    {
        this.ImageChanged = true;
    }
}

現在創建它的一個實例並將其設置為按鈕的數據上下文。 您的按鈕 XAML 應如下所示：

<Button x:Name="btnLight" Margin="148,0,372,63" VerticalAlignment="Bottom" Command="{Binding OnClickedCommand}" Height="69">
        <Button.Style>
            <Style TargetType="{x:Type Button}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate>
                            <Grid>
                                <Ellipse>
                                    <Ellipse.Fill>
                                        <ImageBrush ImageSource="image1.png"/>
                                    </Ellipse.Fill>
                                </Ellipse>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding ImageChanged}" Value="True">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate>
                                    <Grid>
                                        <Ellipse>
                                            <Ellipse.Fill>
                                                <ImageBrush ImageSource="image2.png"/>
                                            </Ellipse.Fill>
                                        </Ellipse>
                                    </Grid>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Button.Style>
    </Button>