Windows phone7:为每个状态创建一个具有不同背景图像的自定义按钮 [英] Windows phone7: Create a custom button with different background Images for each state

问题描述

在我的 Windows phone7 应用程序中，我只需要为按钮的每个状态(正常、鼠标悬停、按下、禁用)创建一个带有不同图像的自定义按钮.

In my Windows phone7 Application I just have to create a custom button with different Images for each state of the button(Normal, mouseOver, Pressed, disabled).

如果我只想为每个具有不同背景颜色的状态创建一个自定义按钮，那么我会按照以下步骤完成.

If I just wanted to create a custom button for each state with different background color, then I would have followed the following steps and done that.

1. Open the page with Expresion Blend
2. Right click button -> Edit Template -> Edit a copy
3. Select Background (In the "Objects and Timeline" Section)
4. Select each "state" under the "state" tab and start adding backgroung color with the  "Pressed" state from the properties pannel.

* Ultimately Can add this as follows for all the buttons which require this custom style
Style="{StaticResource ButtonStyle1}"

我尝试按照上述步骤以类似的方式为每个状态分配背景图像.

I tried to assign the background Image for each state in a similar way according to above steps.

但问题是，当我自动添加一个状态所需的图像时，它也适用于所有其他状态.所以最终它最终会为所有状态添加相同的图像(最后为任何状态添加图像).

But problem is, when I add the Image required for one state automatically it apply for all the other states as well. So ultimately it ends up adding the same Image for all the states(lastly added image for any state).

如果有人可以解释在 windows phone7 的表达式混合中为每个状态创建具有不同图像的自定义按钮必须遵循的步骤，我将非常感激.提前致谢....！！！

If anyone can explain the steps that have to follow to to create a custom button with different images for each state in expression blend for windows phone7, I would be really grateful. Thanks Inadvance....!!!

推荐答案

当您添加图像时，您基本上是在设置按钮模板的外观，它与按钮状态无关.要实现您想要的效果，您可以创建一个包含两个图像的按钮模板，然后使用状态来显示或隐藏相应的状态.

When you are adding images, you are basically setting the look of the button template, which is independent of the button states. To achieve what you want, you can create a button template that contains the two images and then use the states to show or hide the appropriate one.

1. Edit Button Template
2. Add images to the Grid level of the template
3. Highlight each image item and Send to Back to make sure they are behind your border/content
4. Select a State (e.g. Normal, Pressed), highlight one of the images and set the Visibility property to Visible.  Highlight the other image and set the Visibility property to Collapsed.
5. Select the other States and do something similar depending on what you what shown.

您的 XAML 应如下所示.为简洁起见，删除了一些内容.

Your XAML should look something like this. Some stuff is deleted for brevity.

<ControlTemplate TargetType="Button">
<Grid Background="Transparent">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="CommonStates">            
        <VisualState x:Name="Normal">
            <Storyboard>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="image1">
                    <DiscreteObjectKeyFrame KeyTime="0">
                        <DiscreteObjectKeyFrame.Value>
                            <Visibility>Visible</Visibility>
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="image2">
                    <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="image1">
                    <DiscreteObjectKeyFrame KeyTime="0">
                        <DiscreteObjectKeyFrame.Value>
                            <Visibility>Collapsed</Visibility>
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="image2">
                    <DiscreteObjectKeyFrame KeyTime="0">
                        <DiscreteObjectKeyFrame.Value>
                            <Visibility>Visible</Visibility>
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                </ObjectAnimationUsingKeyFrames>
            </Storyboard>
        </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Image x:Name="image1" HorizontalAlignment="Left" Margin="0,0,0,24" Source="/Images/image1.png" Stretch="Fill" Width="48"/>
    <Image x:Name="image2" HorizontalAlignment="Left" Margin="0,0,0,24" Source="/Images/image2.png" Stretch="Fill" Width="48"/>
    <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="{StaticResource PhoneTouchTargetOverhang}">
        <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
    </Border>
</Grid>

这篇关于Windows phone7:为每个状态创建一个具有不同背景图像的自定义按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！