1

私のWindowsphone7アプリケーションでは、ボタンの状態（Normal、mouseOver、Pressed、disabled）ごとに異なる画像を使用してカスタムボタンを作成する必要があります。

背景色が異なる状態ごとにカスタムボタンを作成したい場合は、次の手順に従って実行します。

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}"

上記の手順に従って、同様の方法で各状態の背景画像を割り当てようとしました。

ただし、問題は、ある状態に必要な画像を自動的に追加すると、他のすべての状態にも適用されることです。したがって、最終的には、すべての州に同じ画像を追加することになります（最後に任意の州に画像を追加しました）。

Windows Phone7のエクスプレッションブレンドで、状態ごとに異なる画像を使用してカスタムボタンを作成するために必要な手順を誰かが説明できれば、本当にありがたいです。前もって感謝します....！！！

4

1 に答える 1

2

画像を追加するときは、基本的に、ボタンの状態とは関係なく、ボタン テンプレートの外観を設定します。目的を達成するために、2 つの画像を含むボタン テンプレートを作成し、状態を使用して適切な画像を表示または非表示にすることができます。

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 は次のようになります。簡潔にするために一部のものを削除しています。

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

于 2012-08-21T18:00:07.233 に答える