如何在Windows Phone创建一个含有图片的Button
文章信息
文本将会介绍如何在Windows Phone创建一个含有图片的Button。
Contents |
介绍
已经有很多的例子来展示如何在Windows Phone创建一个含有图片的Button. 我们可以通过以下代码完成这个功能
<Button>
<Image Source="MyImage.png"/>
</Button>
但是以上面的代码完成的 Button 只能显示一张图片: 它不能在我们进行不同操作的时候显示不同的图片
文本将会针对这种情况来写一个可以按照用户的不同操作，显示不同的图片。
 |
The button has an image for each state:
|
ButtonImage实现
ButtonImage类：
XAML code
<Button x:Class="DotNetApp.ButtonImage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
IsEnabledChanged="ButtonIsEnabledChanged"
MouseEnter="ButtonMouseEnter"
MouseLeave="ButtonMouseLeave">
<Image Stretch="None"
HorizontalAlignment="Center"
VerticalAlignment="Center"
x:Name="image" />
</Button>
C# code
using System;
using System.Windows;
using System.Windows.Media.Imaging;
namespace DotNetApp
{
public partial class ButtonImage
{
#region Fields
public new static readonly DependencyProperty IsEnabledProperty = DependencyProperty.Register("IsEnabled", typeof (bool), typeof (ButtonImage), null);
public static readonly DependencyProperty ImageSourceProperty = DependencyProperty.Register("ImageSource", typeof (string), typeof (ButtonImage), null);
public static readonly DependencyProperty ImagePressedSourceProperty = DependencyProperty.Register("ImagePressedSource", typeof (string), typeof (ButtonImage), null);
public static readonly DependencyProperty ImageDisabledSourceProperty = DependencyProperty.Register("ImageDisabledSource", typeof (string), typeof (ButtonImage), null);
private BitmapImage _image;
private BitmapImage _imagePressed;
private BitmapImage _imageDisabled;
private bool _isPressed;
#endregion
#region Constructor
public ButtonImage()
{
InitializeComponent();
}
#endregion
#region Properties
public new bool IsEnabled
{
get { return (bool)GetValue(IsEnabledProperty); }
set
{
SetValue(IsEnabledProperty, value);
SetImageFromState();
}
}
public string ImageSource
{
get { return (string) GetValue(ImageSourceProperty); }
set
{
SetValue(ImageSourceProperty, value);
_image = SetImage(value);
SetImageFromState();
}
}
public string ImagePressedSource
{
get { return (string) GetValue(ImagePressedSourceProperty); }
set
{
SetValue(ImagePressedSourceProperty, value);
_imagePressed = SetImage(value);
SetImageFromState();
}
}
public string ImageDisabledSource
{
get { return (string) GetValue(ImageDisabledSourceProperty); }
set
{
SetValue(ImageDisabledSourceProperty, value);
_imageDisabled = SetImage(value);
SetImageFromState();
}
}
#endregion
#region Event Handlers
private void ButtonIsEnabledChanged(object sender, DependencyPropertyChangedEventArgs e)
{
SetImageFromState();
}
private void ButtonMouseEnter(object sender, System.Windows.Input.MouseEventArgs e)
{
_isPressed = true;
SetImageFromState();
}
private void ButtonMouseLeave(object sender, System.Windows.Input.MouseEventArgs e)
{
_isPressed = false;
SetImageFromState();
}
#endregion
#region Private Methods
private static BitmapImage SetImage(string imageSource)
{
BitmapImage bitmapImage = null;
if (!string.IsNullOrEmpty(imageSource))
{
bitmapImage = new BitmapImage(new Uri(imageSource, UriKind.RelativeOrAbsolute));
}
return bitmapImage;
}
private void SetImageFromState()
{
if (!IsEnabled)
{
image.Source = _imageDisabled;
}
else if (_isPressed)
{
image.Source = _imagePressed;
}
else
{
image.Source = _image;
}
}
#endregion
}
}
使用
想要使用ButtonImage控件, 你可以跟随以下步骤:
- 添加ButtonImage.xaml 和ButtonImage.xaml.cs 文件.
- 添加三张图片
- 添加XML 代码
<ButtonImageApp:ButtonImage ImageSource="/ImageNormal.png"
ImageDisabledSource="/ImageDisabled.png"
ImagePressedSource="/ImagePressed.png"
Style="{StaticResource ButtonImageStyle}"
Height="50"
Width="150" />
所有的属性都非常的重要， ImageSource，ImageDisabledSource，ImagePressedSource是正对不同状态的三张图片. 长宽需要一致
Style需要设置"{StaticResource ButtonImageStyle}". 你可以把这个Style添加到你的项目中，代码如下:
Page
<phone:PhoneApplicationPage.Resources>
<Style x:Key="ButtonImageStyle"
TargetType="ButtonImageApp:ButtonImage">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ButtonImageApp:ButtonImage">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver" />
<VisualState x:Name="Pressed" />
<VisualState x:Name="Disabled" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="ButtonBackground">
<ContentControl x:Name="ContentContainer"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}" />
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</phone:PhoneApplicationPage.Resources>
或者 App
<Application.Resources>
<Style x:Key="ButtonImageStyle"
TargetType="ButtonImageApp:ButtonImage">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ButtonImageApp:ButtonImage">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver" />
<VisualState x:Name="Pressed" />
<VisualState x:Name="Disabled" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="ButtonBackground">
<ContentControl x:Name="ContentContainer"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}" />
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
下载
- File:ButtonImageApp.zip – 包括ButtonImage控件的实例，同时附加一个如何使用它的实例。
