【发布时间】：2013-09-23 05:21:29
【问题描述】：
现在我正试图弄清楚如何为具有两种状态（按下和正常）的 ImageButton 创建一个模板，并为每个状态创建一个 Image。
状态正常：显示图片“buttonname.png”，隐藏“buttonname_pressed.png”
按下状态：隐藏图片“buttonname.png”，显示“buttonname_pressed.png”
所以我在Application.Resources 中创建了一个新的Style。
Application.Resources：
<Style x:Key="ImageButton" TargetType="Button">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="Transparent" Height="90">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="imageNormal">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="imagePressed">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="imageNormal">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="imagePressed">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Image x:Name="imageNormal" Source="{Binding ???}" Stretch="UniformToFill" />
<Image x:Name="imagePressed" Source="{Binding ???}" Stretch="UniformToFill" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
现在我想用不同的图像创建 3 个不同的ImageButtons，这是我不明白的。 (°へ°)
我尝试使用Binding 和AttachedProperty...
图片源的绑定：
Source="{Binding SourceNormal, RelativeSource={RelativeSource TemplatedParent}}"
附加属性：
namespace HTML5App1.Resources.AttachedProperty
{
public static class ImageButton
{
/////////////////////// SourceNormal /////////////////////////////////////////////////////
//----------------------------------------------------------------------------------------
public static readonly DependencyProperty SourceNormal = DependencyProperty.RegisterAttached(
"SourceNormal",
typeof(string),
typeof(ImageButton),
new PropertyMetadata(null)
);
public static string GetSourceNormal(UIElement element)
{
if (element == null)
{
new ArgumentNullException("element");
}
return (string)element.GetValue(SourceNormal);
}
public static void SetSourceNormal(UIElement element, string value)
{
if (element == null)
{
new ArgumentNullException("element");
}
element.SetValue(SourceNormal, value);
}
//----------------------------------------------------------------------------------------
/////////////////////// SourcePressed ////////////////////////////////////////////////////
//----------------------------------------------------------------------------------------
public static readonly DependencyProperty SourcePressed = DependencyProperty.RegisterAttached(
"SourcePressed",
typeof(string),
typeof(ImageButton),
new PropertyMetadata(null)
);
public static string GetSourcePressed(UIElement element)
{
if (element == null)
{
new ArgumentNullException("element");
}
return (string)element.GetValue(SourcePressed);
}
public static void SetSourcePressed(UIElement element, string value)
{
if (element == null)
{
new ArgumentNullException("element");
}
element.SetValue(SourcePressed, value);
}
//----------------------------------------------------------------------------------------
}
}
MainPage.xaml：
xmlns:local="clr-namespace:HTML5App1.Resources.AttachedProperty"
<Button
Style="{StaticResource ImageButton}"
local:ImageButton.SourceNormal="/Assets/Images/button.png"
local:ImageButton.SourcePressed="/Assets/Images/button_pressed.png"
Grid.Column="1"
Click="Button_Clicked"
/>
如果我构建应用程序，我会收到两个绑定的错误消息：
An exception of type 'System.IO.FileNotFoundException' occurred in mscorlib.ni.dll and wasn't handled before a managed/native boundary
System.Windows.Data Error: BindingExpression path error: 'SourceNormal' property not found on 'System.Windows.Controls.Button' 'System.Windows.Controls.Button' (HashCode=45028263). BindingExpression: Path='SourceNormal' DataItem='System.Windows.Controls.Button' (HashCode=45028263); target element is 'System.Windows.Controls.Image' (Name='imageNormal'); target property is 'Source' (type 'System.Windows.Media.ImageSource')..
System.Windows.Data Error: BindingExpression path error: 'SourcePressed' property not found on 'System.Windows.Controls.Button' 'System.Windows.Controls.Button' (HashCode=45028263). BindingExpression: Path='SourcePressed' DataItem='System.Windows.Controls.Button' (HashCode=45028263); target element is 'System.Windows.Controls.Image' (Name='imagePressed'); target property is 'Source' (type 'System.Windows.Media.ImageSource')..
但我不知道我做错了什么 - 有人能指出我正确的方向吗？
其他问题：
是否有一种“更简单”的方法可以从 Button 创建 ImageButton 模板 - 我可以访问 Button 的
Normal和PressedVisualState 或收听它并更改 Image.Source（如果是）正常还是按下？-
是否有一种“更简单”的方式来访问
Button中的Grid中的Image.Source，而不使用Bindings（在XAML 或C# 中）？ 有没有很好的 XAML 绑定和模板教程，我是 XAML 的初学者
提前致谢；）
【问题讨论】：
-
为什么不直接编辑
ToggleButton的模板来满足您的目的呢？然后你就有了你所有的状态，你可以把你的图片放进去。 -
@ChrisW。我不认为 ToggleButton 是正确的，切换按钮会是，如果当您单击它时显示一个图像，然后您再次单击它会显示另一个图像（不是按下也不是按下状态）
-
@ChrisW。谢谢你的提示，但正如 Benoit Catherinet 所说，我需要不同的按下状态（正常、按下），我可能想为禁用状态添加图像。
标签： c# xaml windows-phone-8 windows-phone