WP8.1 XAML应用程序中的自定义按钮
我试图在用户用手指触摸按钮时创建一个“悬停”效果。当这种情况发生时,我想改变按钮的背景色-然后当他们把它移开时,它会变回原来的颜色 我的整个按钮代码如下WP8.1 XAML应用程序中的自定义按钮,xaml,triggers,styles,windows-phone-8.1,Xaml,Triggers,Styles,Windows Phone 8.1,我试图在用户用手指触摸按钮时创建一个“悬停”效果。当这种情况发生时,我想改变按钮的背景色-然后当他们把它移开时,它会变回原来的颜色 我的整个按钮代码如下 <Button x:Name="btnService" HorizontalAlignment="Center" Tag="{Binding Tag}" Command="{Binding DataContext.ConnectServiceCommand, ElementName=LayoutRoot}" CommandParamet
<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应用程序有类似于
Windows Phone 8.1应用程序是否有类似的功能
编辑-使用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>
在默认按钮样式中,有一些预定义的视觉状态。在这些视觉状态下,您可以定义按下按钮时发生的情况
<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">
<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-targeting名称为“Border”的元素的背景属性
按钮样式的应用如下所示:
<Button Height="200" Style="{StaticResource ButtonStyle1}"/>
这似乎对我不起作用,我认为代码针对的是基于Silverlight的应用,而不是WinRT WP应用。你看到了什么问题?好的,我已经用新代码更新了我的答案,似乎没有什么变化,资源bodyAccentAlt是不同的颜色。不用担心,我已经处理好了。必须清理大量代码。感谢您的帮助。您做得很好,我只是删除了ControlTemplate
,并直接更改了按钮样式。
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource bodyAccent}"/>
</ObjectAnimationUsingKeyFrames>
<Button Height="200" Style="{StaticResource ButtonStyle1}"/>