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

XAML Windows 8应用程序按钮悬停上的蓝色边框,xaml,windows-8,windows-applications,Xaml,Windows 8,Windows Applications,我似乎找不到答案。基本上,我已经创建了包含图像的按钮。当您将鼠标悬停在按钮上时,当前会显示一个蓝色边框。我想在图像上创建我自己的悬停状态,所以我不需要蓝色边框——这会挤出间距。有人知道如何移除它吗 <Button Style="{StaticResource EventButton}"> <Image Source="/Assets/EventIcons/Business/event-Fire.png" Stretch="Fill"/> </Button&g

我似乎找不到答案。基本上,我已经创建了包含图像的按钮。当您将鼠标悬停在按钮上时,当前会显示一个蓝色边框。我想在图像上创建我自己的悬停状态,所以我不需要蓝色边框——这会挤出间距。有人知道如何移除它吗

<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>


谢谢你的帮助

Windows应用商店XAML框架中的每个控件都有默认的笔刷和样式集。例如,这是按钮的样式:。您始终可以首先尝试将默认笔刷更改为所需的内容。如果这不会给你想要看到的效果-你可以改变你想要的默认控件模板

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

在状态面板中,您将看到按钮的不同可能状态(正常、按下、指针覆盖、聚焦…),选择例如“指针覆盖”,并将背景笔刷更改为透明(或仅将其移除)

之前的指针:

<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>

指针在以下位置之后:

<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>

很有效,非常感谢您的深入解释!