ControlTemplate 到带有图像的按钮 - Silverlight for WP7答案

【问题标题】：ControlTemplate to button with images - Silverlight for WP7ControlTemplate 到带有图像的按钮 - Silverlight for WP7
【发布时间】：2013-03-11 21:07:54
【问题描述】：

我有一个针对按钮控件的 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"/>

【问题讨论】：

标签： silverlight windows-phone-7 user-controls custom-controls controltemplate

【解决方案1】：

为什么不对第三张图片使用 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>

那么你只需要添加一个相关的视觉状态。

【讨论】：

是的，这正是我想要的。谢谢！

【解决方案2】：

根据我对您的问题的理解，您希望实施attached properties。

由于按钮本身不包含三个独立图像源的属性（您可以绕过 Content 属性，但这会很痛苦），您需要实现这些并简单地从您的模板执行标准绑定。

【讨论】：