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

Question

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

<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的背景更改为。这就是使您的按钮变为白色的原因。ButtonBackgroundBorderPhoneForegroundBrush

您可以创建自己的按钮模板，更改Pressed状态内的图像。如果您不确定如何创建自己的控件模板，请搜索 Web。

Answer 2

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

另请参阅以下图像按钮控件/替代方法：http:
//blogs.msdn.com/b/dohollan/archive/2011/04/22/using-images-as-buttons-on-windows-phone-7.aspx
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"