×
Namespaces

Variants
Actions

如何在Windows Phone创建一个含有图片的Button

From Nokia Developer Wiki
Jump to: navigation, search
WP Metro Icon UI.png
SignpostIcon XAML 40.png
SignpostIcon WP7 70px.png
Article Metadata

代码示例
兼容于
文章
翻译:
Hazel Xie
最后由 hamishwillee 在 03 Jul 2013 编辑

文本将会介绍如何在Windows Phone创建一个含有图片的Button。

Contents

介绍

已经有很多的例子来展示如何在Windows Phone创建一个含有图片的Button. 我们可以通过以下代码完成这个功能

<Button>
<Image Source="MyImage.png"/>
</Button>

但是以上面的代码完成的 Button 只能显示一张图片: 它不能在我们进行不同操作的时候显示不同的图片

文本将会针对这种情况来写一个可以按照用户的不同操作,显示不同的图片。

ButtonImage.png
The button has an image for each state:
  • Normal

ImageNormal.png

  • Pressed

ImagePressed.png

  • Disabled

ImageDisabled.png

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控件, 你可以跟随以下步骤:

  1. 添加ButtonImage.xamlButtonImage.xaml.cs 文件.
  2. 添加三张图片
  3. 添加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>


下载

This page was last modified on 3 July 2013, at 06:51.
93 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×