Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

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

From 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 03:51.
111 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.

×