按钮悬停时 XAML Windows 8 应用程序蓝色边框

Question

我似乎找不到这个问题的答案。基本上，我创建了包含图像的按钮。当您将鼠标悬停在按钮上时 - 当前会出现一个蓝色边框。我想在图像上创建我自己的悬停状态，所以我不需要蓝色边框 - 它会拉开间距。有谁知道如何删除它？

<Button Style="{StaticResource EventButton}">
    <Image Source="/Assets/EventIcons/Business/event-Fire.png" Stretch="Fill"/>
</Button>

我的风格:

<Style x:Key="RiskButton" TargetType="Button">
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="Margin" Value="4,4,4,4"/>
    <Setter Property="Width" Value="120"/>
    <Setter Property="Height" Value="120"/>
    <Setter Property="HorizontalAlignment" Value="Left"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="BorderThickness" Value="0"/>
</Style>

感谢您的帮助!

Answer 1

在 Blend for visual studio 下打开你的项目(我建议你之前应用 visual studio 2012 update 2)，选择你的按钮并右键单击 -> 编辑模板 -> 编辑副本 -> 创建一个新的本地资源。

在状态面板中，您将看到按钮的不同可能状态(正常、按下、指针悬停、聚焦...)，例如选择“PointerOver”并将背景画笔更改为透明(或将其删除)。

PointerOver 之前:

<VisualState x:Name="PointerOver">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="Background">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPointerOverBackgroundThemeBrush}" />
        </ObjectAnimationUsingKeyFrames>

        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"                                 Storyboard.TargetProperty="Foreground">
               <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPointerOverForegroundThemeBrush}" />
        </ObjectAnimationUsingKeyFrames>

    </Storyboard>
 </VisualState>

PointerOver 之后:

<VisualState x:Name="PointerOver">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="Background">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Null}" />
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
            Storyboard.TargetProperty="Foreground">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPointerOverForegroundThemeBrush}" />
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</VisualState>

现在蓝色边框消失了。要将它应用到您的其他按钮，您可以在 App.xaml 中加载的字典中移动此样式并使用 Style 属性。

要测试的完整 xaml 示例:

<Page
    x:Class="AppSandBox.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:AppSandBox"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Resources>
        <Style x:Key="RiskButton" TargetType="Button">
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="Margin" Value="4,4,4,4"/>
            <Setter Property="Width" Value="120"/>
            <Setter Property="Height" Value="120"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="BorderThickness" Value="0"/>
        </Style>
        <ControlTemplate x:Key="ButtonControlTemplate1" TargetType="Button">
            <Grid>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal" />
                        <VisualState x:Name="PointerOver">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                    Storyboard.TargetProperty="Background">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Null}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                    Storyboard.TargetProperty="Foreground">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPointerOverForegroundThemeBrush}" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Pressed">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                    Storyboard.TargetProperty="Background">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPressedBackgroundThemeBrush}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                    Storyboard.TargetProperty="Foreground">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPressedForegroundThemeBrush}" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Disabled">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                    Storyboard.TargetProperty="Background">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledBackgroundThemeBrush}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                    Storyboard.TargetProperty="BorderBrush">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledBorderThemeBrush}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                    Storyboard.TargetProperty="Foreground">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledForegroundThemeBrush}" />
                                </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>
    </Page.Resources>
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

        <Button Style="{StaticResource RiskButton}" VerticalAlignment="Top" Template="{StaticResource ButtonControlTemplate1}">
            <Image Source="/Assets/Metro-icon.png" Stretch="Fill" Margin="10"/>
        </Button>

    </Grid>
</Page>