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

问题描述

在Windows Phone7应用程序中，我只需要为按钮的每种状态(正常，mouseOver，已按下，禁用)创建一个具有不同图像的自定义按钮.

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的Expression Blend中为每个状态创建具有不同图像的自定义按钮所必须遵循的步骤，我将不胜感激.提前致谢....！！！

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屋！