Question

我正在制作一个Windows 8商店应用，我想要一个HyperlinkButton，只要点击它或鼠标悬停在它上面就会改变它的颜色。请提供我的整个编码。我到处寻找，但没有人为我的项目工作。我正在使用Visual Studio Ultimate 2012。

Answer 1

好的，开箱即用，这是完整的实现（Windows 8.1）：

<Button Style="{StaticResource TextBlockButtonStyle}">Hello World</Button>

首先，我建议您不要尝试自定义颜色。这有助于确保与您的应用和生态系统的其他部分保持一定程度的视觉对齐。因此，您可以通过更改主题来调整外观和感觉：

<Button RequestedTheme="Dark"
    Style="{StaticResource TextBlockButtonStyle}">Hello World</Button>
<Button RequestedTheme="Light"
    Style="{StaticResource TextBlockButtonStyle}">Hello World</Button>

但是，有时您必须自定义更多。我明白了。因此，如果要自定义这些颜色，则需要覆盖主题。像这样（在app.xaml中）：

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary x:Key="Dark">
                <!-- normal -->
                <SolidColorBrush x:Key="ButtonForegroundThemeBrush" Color="Blue" />
                <SolidColorBrush x:Key="ButtonBackgroundThemeBrush" Color="Transparent" />
                <!-- hover -->
                <SolidColorBrush x:Key="ButtonPointerOverForegroundThemeBrush" Color="Red" />
                <SolidColorBrush x:Key="ButtonPointerOverBackgroundThemeBrush" Color="Transparent" />
                <!-- pressed -->
                <SolidColorBrush x:Key="ButtonPressedForegroundThemeBrush" Color="White" />
                <SolidColorBrush x:Key="ButtonPressedBackgroundThemeBrush" Color="Red" />
            </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>
</Application.Resources>

Runny够了，我问了一段同样的问题Simple hover effect in XAML?

祝你好运！

Answer 2

你有两个选择。您可以自定义HyperlinkButton的默认样式，也可以更改所需的默认系统画笔的值（这将对所有HyperlinkButton创建效果）。

HyperlinkButton的系统画笔。

<SolidColorBrush x:Key="HyperlinkButtonBackgroundThemeBrush" Color="Transparent" />
<SolidColorBrush x:Key="HyperlinkButtonBorderThemeBrush" Color="Transparent" />
<SolidColorBrush x:Key="HyperlinkDisabledThemeBrush" Color="#66FFFFFF" />
<SolidColorBrush x:Key="HyperlinkForegroundThemeBrush" Color="#FF9C72FF" />
<SolidColorBrush x:Key="HyperlinkPointerOverForegroundThemeBrush" Color="#CC9C72FF" />
<SolidColorBrush x:Key="HyperlinkPressedForegroundThemeBrush" Color="#999C72FF" />

默认样式

<Style TargetType="HyperlinkButton">
    <Setter Property="Foreground" Value="{StaticResource HyperlinkForegroundThemeBrush}" />
    <Setter Property="Background" Value="{StaticResource HyperlinkButtonBackgroundThemeBrush}" />
    <Setter Property="BorderBrush" Value="{StaticResource HyperlinkButtonBorderThemeBrush}" />
    <Setter Property="BorderThickness" Value="{StaticResource HyperlinkButtonBorderThemeThickness}" />
    <Setter Property="Padding" Value="12,4,12,5" />
    <Setter Property="HorizontalAlignment" Value="Left" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}" />
    <Setter Property="FontWeight" Value="SemiBold" />
    <Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="HyperlinkButton">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                   Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource HyperlinkPointerOverForegroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                   Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource HyperlinkPressedForegroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                   Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource HyperlinkDisabledThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="FocusVisualWhite"
                                                     Storyboard.TargetProperty="Opacity"
                                                     To="1"
                                                     Duration="0" />
                                    <DoubleAnimation Storyboard.TargetName="FocusVisualBlack"
                                                     Storyboard.TargetProperty="Opacity"
                                                     To="1"
                                                     Duration="0" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unfocused" />
                            <VisualState x:Name="PointerFocused" />
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border x:Name="Border"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Margin="3">
                        <ContentPresenter x:Name="ContentPresenter"
                                          Content="{TemplateBinding Content}"
                                          ContentTransitions="{TemplateBinding ContentTransitions}"
                                          ContentTemplate="{TemplateBinding ContentTemplate}"
                                          Margin="{TemplateBinding Padding}"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                    </Border>
                    <Rectangle x:Name="FocusVisualWhite"
                               IsHitTestVisible="False"
                               Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}"
                               StrokeEndLineCap="Square"
                               StrokeDashArray="1,1"
                               Opacity="0"
                               StrokeDashOffset="1.5" />
                    <Rectangle x:Name="FocusVisualBlack"
                               IsHitTestVisible="False"
                               Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}"
                               StrokeEndLineCap="Square"
                               StrokeDashArray="1,1"
                               Opacity="0"
                               StrokeDashOffset="0.5" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

HyperlinkButton styles and templates

使用XAML在按钮中创建鼠标悬停效果

2 个答案: