WP8.1 XAML应用程序中的自定义按钮 [英] Custom buttons in WP8.1 XAML apps

问题描述

我正在尝试在用户的手指按下按钮时创建悬停效果。当发生这种情况时，我想更改按钮的背景色-然后当他们将其移开时，它又变回原始颜色。

I'm trying to create a "hover" effect when the user touches their finger down on to a button. When that happens I would like to background color of the button to change - and then when they move it away it changes back to the original color.

我的整个代码按钮在下面

My code for the whole button is below

<Button x:Name="btnService"  HorizontalAlignment="Center" Tag="{Binding Tag}" Command="{Binding DataContext.ConnectServiceCommand, ElementName=LayoutRoot}" CommandParameter="{Binding Tag}">
                            <Button.Template>
                                <ControlTemplate>

                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="350" />
                                            <ColumnDefinition Width="*" />
                                        </Grid.ColumnDefinitions>

                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="64" />
                                            <RowDefinition Height="10" />
                                        </Grid.RowDefinitions>

                                        <Border IsTapEnabled="True" CornerRadius="0" BorderBrush="Transparent" BorderThickness="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.Row="0" Grid.Column="1">

                                            <TextBlock Style="{StaticResource BodyTextBlockStyle}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="{StaticResource accentForeground}" Text="{Binding NameUpper}" />

                                            <Border.Style>
                                                <Style TargetType="Border">
                                                    <Setter Property="Background" Value="{StaticResource bodyAccent}" />

                                                </Style>
                                            </Border.Style>
                                        </Border>

                                    </Grid>


                                </ControlTemplate>
                            </Button.Template>
                        </Button>

我无法工作的是触发器，因为它似乎不存在-我知道普通的WPF XAML应用具有类似< Trigger Property = Border.IsMouseOver Value = True>

What I can't get working is the trigger as it doesn't seem to exist - I know normal WPF XAML apps have something like <Trigger Property="Border.IsMouseOver" Value="True">

Windows Phone 8.1应用是否有类似的东西？

Is there something like this for Windows Phone 8.1 apps?

编辑-使用VSManager添加的代码

Edit - Code added with VSManager

<Button x:Name="btnService"  HorizontalAlignment="Center" Tag="{Binding Tag}" Command="{Binding DataContext.ConnectServiceCommand, ElementName=LayoutRoot}" CommandParameter="{Binding Tag}">
                            <Button.Template>
                                <ControlTemplate>

                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="350" />
                                            <ColumnDefinition Width="*" />
                                        </Grid.ColumnDefinitions>

                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="64" />
                                            <RowDefinition Height="10" />
                                        </Grid.RowDefinitions>

                                        <Border IsTapEnabled="True" CornerRadius="0" BorderBrush="Transparent" BorderThickness="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.Row="0" Grid.Column="1">

                                            <TextBlock Style="{StaticResource BodyTextBlockStyle}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="{StaticResource accentForeground}" Text="{Binding NameUpper}" />

                                            <Border.Style>
                                                <Style TargetType="Border">
                                                    <Setter Property="Background" Value="{StaticResource bodyAccent}" />

                                                </Style>

                                            </Border.Style>

                                        </Border>

                                    </Grid>


                                </ControlTemplate>
                            </Button.Template>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <PointerDownThemeAnimation Storyboard.TargetName="Grid"/>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource bodyAccentAlt}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                        </Button>

推荐答案

在默认的Button样式中，有一些预定义的视觉效果状态。在这些视觉状态下，您可以定义按下按钮时发生的情况

In the default Button style, there are some predefined visual states. In those visual states, you can define what happens when the Button is pressed

<Style x:Key="ButtonStyle1" TargetType="Button">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderBrush" Value="{ThemeResource PhoneForegroundBrush}"/>
    <Setter Property="Foreground" Value="{ThemeResource PhoneForegroundBrush}"/>
    <Setter Property="BorderThickness" Value="{ThemeResource PhoneBorderThickness}"/>
    <Setter Property="FontFamily" Value="{ThemeResource PhoneFontFamilyNormal}"/>
    <Setter Property="FontWeight" Value="{ThemeResource PhoneButtonFontWeight}"/>
    <Setter Property="FontSize" Value="{ThemeResource TextStyleLargeFontSize}"/>
    <Setter Property="Padding" Value="9.5,0"/>
    <Setter Property="MinHeight" Value="{ThemeResource PhoneButtonMinHeight}"/>
    <Setter Property="MinWidth" Value="{ThemeResource PhoneButtonMinWidth}"/>
    <Setter Property="HorizontalAlignment" Value="Left"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid x:Name="Grid" Background="Transparent">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition From="Pressed" To="PointerOver">
                                    <Storyboard>
                                        <PointerUpThemeAnimation Storyboard.TargetName="Grid"/>
                                    </Storyboard>
                                </VisualTransition>
                                <VisualTransition From="PointerOver" To="Normal">
                                    <Storyboard>
                                        <PointerUpThemeAnimation Storyboard.TargetName="Grid"/>
                                    </Storyboard>
                                </VisualTransition>
                                <VisualTransition From="Pressed" To="Normal">
                                    <Storyboard>
                                        <PointerUpThemeAnimation Storyboard.TargetName="Grid"/>
                                    </Storyboard>
                                </VisualTransition>
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="PointerOver">
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <PointerDownThemeAnimation Storyboard.TargetName="Grid"/>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPressedForegroundThemeBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Yellow"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledForegroundThemeBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Border">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledBorderThemeBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledBackgroundThemeBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="{ThemeResource PhoneTouchTargetOverhang}">
                        <ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

在

<VisualState x:Name="Pressed">

是按下按钮时发生的情况。您可以轻松定义Border元素的背景

is what happens when the Button is pressed. You can easily define the background of the Border element

<VisualState x:Name="Pressed">
    <Storyboard>
        <PointerDownThemeAnimation Storyboard.TargetName="Grid"/>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPressedForegroundThemeBrush}"/>
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource bodyAccent}"/>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</VisualState>

重要的部分是ObjectAnimationUsingKeyFrames，目标是名称为边框的元素的Background属性

The important part is the ObjectAnimationUsingKeyFrames targeting Background property of the element with the name "Border"

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource bodyAccent}"/>
</ObjectAnimationUsingKeyFrames>

然后应用按钮样式，如下所示：

And Button style is applied like this:

<Button Height="200" Style="{StaticResource ButtonStyle1}"/>

这篇关于WP8.1 XAML应用程序中的自定义按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！