如何阻止 Windows Phone 中的按钮控件在单击时发出难看的白色闪光？

Question

所以我在主页上显示的列表中有一些项目。我有一个看起来像这样的按钮：

<Button Grid.Column="1" Click="Button_Click" BorderThickness="0" Height="40">
     <Button.Background>
           <ImageBrush ImageSource="/WindowsPhonePanoramaApplication2;component/Images/appbar.feature.email.rest.png" Stretch="None" />
     </Button.Background>
</Button>

每次我点击它，图像都会消失在这个明亮的白色矩形下面。我宁愿让它显示另一张图片。我怎样才能做到这一点？

感谢观看

Answer 1

您需要更改按钮模板。您可以在此处的文件中找到模板：

C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Design\System.Windows.xaml

ButtonBase

模板如下：

  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="ButtonBase">
        <Grid Background="Transparent">
          <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
              <VisualState x:Name="Normal"/>
              <VisualState x:Name="MouseOver"/>
              <VisualState x:Name="Pressed">
                <Storyboard>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentContainer" Storyboard.TargetProperty="Foreground">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}" />
                  </ObjectAnimationUsingKeyFrames>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="Background">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}" />
                  </ObjectAnimationUsingKeyFrames>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="BorderBrush">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}" />
                  </ObjectAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
              <VisualState x:Name="Disabled">
                <Storyboard>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentContainer" Storyboard.TargetProperty="Foreground">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}" />
                  </ObjectAnimationUsingKeyFrames>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="BorderBrush">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}" />
                  </ObjectAnimationUsingKeyFrames>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="Background">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                  </ObjectAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
            </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>
          <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0" Background="{TemplateBinding Background}" Margin="{StaticResource PhoneTouchTargetOverhang}" >
            <ContentControl x:Name="ContentContainer" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Padding="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
          </Border>
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>

注意

Pressed

VisualState

如何将

ButtonBackground

元素（即

Border

）的背景更改为

PhoneForegroundBrush

。这就是让你的按钮变白的原因。

您可以创建自己的按钮模板，在

Pressed

状态下更改图像。如果您不确定如何创建自己的控件模板，请搜索网络。

Answer 2

为此，您需要重新模板化按钮以在单击时使用不同的视觉状态。

另请参阅以下图像按钮控件/替代项：

• http://blogs.msdn.com/b/dohollan/archive/2011/04/22/using-images-as-buttons-on-windows-phone-7.aspx
• http://web.archive.org/web/20110209105722/http://www.silvergeek.net/windows-phone-7/imagebutton-control-for-win-phone-7/
• http://blogs.msdn.com/b/priozersk/archive/2010/08/14/creating-round-image-button-for-wp7-part-1.aspx

Answer 3

这个问题已经有一年了。但是，这是实现您想要的目标的完美方法。我看到您想在按下应用栏图标时模拟类似的相同体验。

Coding4fun 工具包有你需要的确切疾病。

这是代码的样子，

<c4fControls:RoundButton Grid.Column="1" Click="Button_Click" 
    ImageSource="/Myapp;component/Images/appbar.img.png"/>

当然，您必须将 coding4fun 库包含到您的项目中。也将此行添加到页面顶部。

xmlns:c4fControls="clr-namespace:Coding4Fun.Phone.Controls;assembly=Coding4Fun.Phone.Controls"