ControlTemplate帶有圖像的按鈕-Silverlight for WP7

Question

我有一個針對按鈕控件的ControlTemplate。 ControlTemplate具有兩個用於正常和按下狀態的圖像，每個圖像一個。 我想在屏幕上的8個不同的按鈕中使用此ControlTemplate，每個按鈕的前面都有不同的圖像。

<ControlTemplate x:Key="ButtonControlTemplate1" TargetType="Button">
        <Grid>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates1">
                    <VisualState x:Name="Pressed1">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="image">
                                <DiscreteObjectKeyFrame KeyTime="0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Collapsed</Visibility>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="image1">
                                <DiscreteObjectKeyFrame KeyTime="0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Visible</Visibility>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Normal1"/>
                    <VisualState x:Name="Disabled1"/>
                    <VisualState x:Name="MouseOver1"/>
                </VisualStateGroup>
                <VisualStateGroup x:Name="FocusStates1">
                    <VisualState x:Name="Focused1"/>
                </VisualStateGroup>
                <VisualStateGroup x:Name="CommonStates"/>
                <VisualStateGroup x:Name="FocusStates"/>
            </VisualStateManager.VisualStateGroups>
            <Image x:Name="image" Source="source1" />
            <Image x:Name="image1" Source="source2" Visibility="Collapsed"/>
        </Grid>
    </ControlTemplate>

如何在模板中放置第三張圖像，該圖像可以為每個按鈕接收不同的來源？

像這樣：

<Button Template="{StaticResource ButtonControlTemplate1}" thirdImage="source_to_third_image"/>

Answer 1

據我對您的問題的理解，您正在尋求實現附加屬性 。

由於按鈕本身不包含三個單獨圖像源的屬性（您可以在Content屬性周圍亂塗亂畫，但這很麻煩），因此您將需要實現它們並僅從模板執行標准綁定。

Answer 2

為什么不只將Content屬性用作您的第三張圖片？

您的ControlTemplate將如下所示：

<ControlTemplate x:Key="ButtonControlTemplate1" TargetType="Button">
    <Grid>
        ...
        <ContentPresenter Content="{TemplateBinding Content}" />
        <Image x:Name="image" Source="source1" />
        <Image x:Name="image1" Source="source2" Visibility="Collapsed"/>
    </Grid>
</ControlTemplate>

您的按鈕聲明將如下所示：

<Button>
    <Image Source="source3" />
</Button>

然后，您只需要添加相關的視覺狀態。