在Windows Phone 8.1中按下时更改按钮的不透明度

Question

我有一个Windows Phone 8.1 RT应用程序。

我的页面上有一个图像按钮。

我想要的是当我按下此按钮时，我将边框设置为黄色或/并更改图像。

我正在尝试解决如何在StoryBoard中设置它。

这是我的标记（我删除了与Grid不相关的内容......）：

<Page.Resources>
    <Style TargetType="Button">
       <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid x:Name="Grid" Background="Transparent">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="PointerOver"/>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <PointerDownThemeAnimation Storyboard.TargetName="Grid"/>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Opacity)" Storyboard.TargetName="Opacity">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="50"></DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>                                    
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>

                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>

和我的按钮：

        <Button BorderThickness="0" BorderBrush="Black" Name="btnDel" Grid.Row="4" Grid.Column="2" Width="75" Height="75" HorizontalAlignment="Center" >
            <Button.Background>  
                <ImageBrush ImageSource="ms-appx:///Images/del.png" Stretch="Uniform"/>
            </Button.Background>
        </Button>

由于

Answer 1

您需要在ControlTemplate中为要设置动画的元素命名，然后在Storyboard.TargetName属性中命名（此处我使用根Grid，创造性地命名为根）：

<Page.Resources>
  <Style TargetType="Button">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="Button">
          <Grid x:Name="Root" Background="Transparent" Margin="0,12">
            <VisualStateManager.VisualStateGroups>
              <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal"/>
                <VisualState x:Name="PointerOver"/>
                <VisualState x:Name="Pressed">
                  <Storyboard>
                    <DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Root" To="0.3" Duration="0"/>
                  </Storyboard>
                </VisualState>
                <VisualState x:Name="Disabled"/>
              </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Border x:Name="Border" BorderBrush="White" BorderThickness="3">
              <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Border>
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>
</Page.Resources>

<StackPanel>
  <Button Content="hello"/>
  <Button Content="there"/>
  <Button Content="matey"/>
</StackPanel>

更改边框颜色同样容易。更改背景图像将更难。如果所有按钮上的图像相同，则可以将该图像硬编码到模板中，然后为其打开和关闭Visibility。如果每个按钮中的图像不同，则会变得更加棘手;自定义控件（基于Button但具有PressedContent属性）可能会更容易。

以下是一个简单的示例（＆＃34;工作＆＃34;，但由于没有DefaultStyleKey并且 generic.xaml 中没有定义模板，因此无法完成例如 - 您必须在应用程序内定义全局样式：

<强> MyButton.cs

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;

namespace StyleTest
{
  public class MyButton : Button
  {
    public static readonly DependencyProperty PressedContentProperty = DependencyProperty.Register("PressedContent", typeof(Brush), typeof(MyButton), null);
    public Brush PressedContent
    {
      get { return (Brush)GetValue(PressedContentProperty); }
      set { SetValue(PressedContentProperty, value); }
    }
  }
}

<强> MainPage.xaml中

<Page
    x:Class="StyleTest.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:StyleTest"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
  <Page.Resources>
    <Style TargetType="local:MyButton">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="local:MyButton">
            <Grid x:Name="Root" Background="Transparent" Margin="0,9.6">
              <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                  <VisualState x:Name="Normal"/>
                  <VisualState x:Name="PointerOver"/>
                  <VisualState x:Name="Pressed">
                    <Storyboard>
                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Image" Storyboard.TargetProperty="Visibility">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                      </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                  </VisualState>
                  <VisualState x:Name="Disabled"/>
                </VisualStateGroup>
              </VisualStateManager.VisualStateGroups>
              <Border x:Name="Image" Background="{TemplateBinding PressedContent}" Visibility="Collapsed"/>
              <Border x:Name="Border" BorderBrush="White" BorderThickness="2.4">
                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
              </Border>
            </Grid>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </Page.Resources>

  <StackPanel>
    <local:MyButton Content="change bg!">
      <local:MyButton.PressedContent>
        <ImageBrush ImageSource="/Assets/Logo.png"/>
      </local:MyButton.PressedContent>
    </local:MyButton>
  </StackPanel>
</Page>

这里的关键是MyButton控件有一个名为PressedContent的新属性，ControlTemplate使用TemplateBinding将其添加到按钮的视觉外观中。动画只是打开和关闭Visibility。