点击时WPF更改按钮背景图片 [英] WPF Change button background image when clicked
问题描述
我创建了一个按钮
并设置其背景图片
。我想是在点击按钮
的时候,我想更换背景图片
用另一个
我怎样才能做到这一点?
下面是我的code与按钮
:
<按钮X:NAME =PopulationReporting点击=PopulationReporting_ClickedWIDTH =172
HEIGHT =60保证金=57,170,57,184>
< Button.Background>
<的ImageBrush的ImageSource =图像/ IMG-2.png/>
< /Button.Background>
< /按钮>
您可以以编程方式做到这一点(见例<一个href=\"http://stackoverflow.com/questions/5971300/programmatically-changing-button-icon-in-wpf/5973592#5973592\">here)
或
您可以使用 DataTriggers
,其中 DataTrigger
绑定到 BOOL
价值你的视图模型
和改变你的按钮的
。在风格
按钮
绑定到命令
,所以在执行时,命令
将修改图像的状态
(即 IsPlaying模块
属性)。
XAML:
&LT;按钮高度=23的HorizontalAlignment =左保证金=70,272,0,0NAME =buttonPlayVerticalAlignment =评出的WIDTH =75命令={结合PlayCommand}CommandParameter ={绑定的ElementName =按钮画面,路径=来源}&GT;
&lt;图像名称=按钮画面&GT;
&LT; Image.Style&GT;
&LT;风格的TargetType ={X:输入图像}&GT;
&LT; Style.Triggers&GT;
&LT; DataTrigger绑定={结合IsPlaying模块}VALUE =真&GT;
&LT; setter属性=源VALUE =Play.png/&GT;
&LT; / DataTrigger&GT;
&LT; DataTrigger绑定={结合IsPlaying模块}VALUE =FALSE&GT;
&LT; setter属性=源VALUE =Stop.png/&GT;
&LT; / DataTrigger&GT;
&LT; /Style.Triggers>
&LT; /样式和GT;
&LT; /Image.Style>
&LT; /图像&GT;
&LT; /按钮&GT;
C#:
公共部分类主窗口:窗口
{
公共主窗口()
{
的InitializeComponent();
this.DataContext =新视图模型();
}
}公共类视图模型:INotifyPropertyChanged的
{
私人布尔_isPlaying = FALSE;
私人RelayCommand _playCommand; 公共视图模型()
{
IsPlaying模块= FALSE;
} 公共BOOL IsPlaying模块
{
{返回_isPlaying; }
组
{
_isPlaying =价值;
OnPropertyChanged(IsPlaying模块);
}
} 公众的ICommand PlayCommand
{
得到
{
返回_playCommand?新RelayCommand((X)=&GT;
{
变种按钮类型= x.ToString(); 如果(NULL!=按钮类型)
{
如果(buttonType.Contains(播放))
{
IsPlaying模块= FALSE;
}
否则,如果(buttonType.Contains(停止))
{
IsPlaying模块= TRUE;
}
}
});
}
} 公共事件PropertyChangedEventHandler的PropertyChanged;
公共无效OnPropertyChanged(字符串propertyName的)
{
如果(的PropertyChanged!= NULL)
{
的PropertyChanged(这一点,新PropertyChangedEventArgs(propertyName的));
}
}
}公共类RelayCommand:ICommand的
{
私人只读predicate&LT;对象&gt; _canExecute;
私人只读动作&LT;对象&gt; _执行; 公共事件的EventHandler CanExecuteChanged; 公共RelayCommand(动作&LT;对象&gt;执行):这个(执行,NULL){} 公共RelayCommand(动作&LT;对象&gt;执行,predicate&LT;对象&gt; canExecute)
{
_execute =执行;
_canExecute = canExecute;
} 公共BOOL CanExecute(对象参数)
{ 如果(_canExecute == NULL)
{
返回true;
} 返回_canExecute(参数);
} 公共无效执行(对象参数)
{
_execute(参数);
} 公共无效RaiseCanExecuteChanged()
{
如果(CanExecuteChanged!= NULL)
{
CanExecuteChanged(这一点,EventArgs.Empty);
}
}
}
I have created a Button
and set its background Image
. What I want is when the Button
is clicked, I want to replace the background Image
with another one
How can I accomplish this?
Here is my code with the Button
:
<Button x:Name="PopulationReporting" Click="PopulationReporting_Clicked" Width="172"
Height="60" Margin="57,170,57,184">
<Button.Background >
<ImageBrush ImageSource="images/img-2.png" />
</Button.Background>
</Button>
You can do this programmatically (see example here)
or
You can use DataTriggers
, where the DataTrigger
is bound to a bool
value in your ViewModel
and changes the Style
of your Button
. The Button
is bound to a Command
, so when executed, the Command
will change the state of the image
(the isPlaying
property).
xaml:
<Button Height="23" HorizontalAlignment="Left" Margin="70,272,0,0" Name="buttonPlay" VerticalAlignment="Top" Width="75" Command="{Binding PlayCommand}" CommandParameter="{Binding ElementName=ButtonImage, Path=Source}" >
<Image Name="ButtonImage">
<Image.Style>
<Style TargetType="{x:Type Image}">
<Style.Triggers>
<DataTrigger Binding="{Binding isPlaying}" Value="True">
<Setter Property="Source" Value="Play.png" />
</DataTrigger>
<DataTrigger Binding="{Binding isPlaying}" Value="False">
<Setter Property="Source" Value="Stop.png" />
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</Button>
c#:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.DataContext = new ViewModel();
}
}
public class ViewModel : INotifyPropertyChanged
{
private bool _isPlaying = false;
private RelayCommand _playCommand;
public ViewModel()
{
isPlaying = false;
}
public bool isPlaying
{
get { return _isPlaying; }
set
{
_isPlaying = value;
OnPropertyChanged("isPlaying");
}
}
public ICommand PlayCommand
{
get
{
return _playCommand ?? new RelayCommand((x) =>
{
var buttonType = x.ToString();
if (null != buttonType)
{
if (buttonType.Contains("Play"))
{
isPlaying = false;
}
else if (buttonType.Contains("Stop"))
{
isPlaying = true;
}
}
});
}
}
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
public class RelayCommand : ICommand
{
private readonly Predicate<object> _canExecute;
private readonly Action<object> _execute;
public event EventHandler CanExecuteChanged;
public RelayCommand(Action<object> execute) : this(execute, null) { }
public RelayCommand(Action<object> execute, Predicate<object> canExecute)
{
_execute = execute;
_canExecute = canExecute;
}
public bool CanExecute(object parameter)
{
if (_canExecute == null)
{
return true;
}
return _canExecute(parameter);
}
public void Execute(object parameter)
{
_execute(parameter);
}
public void RaiseCanExecuteChanged()
{
if (CanExecuteChanged != null)
{
CanExecuteChanged(this, EventArgs.Empty);
}
}
}
这篇关于点击时WPF更改按钮背景图片的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!