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更新2），选择您的按钮并右键单击 - ＆gt;编辑模板 - ＆gt;编辑副本 - ＆gt;创建一个新的本地资源。

在状态面板中，您将看到按钮的不同可能状态（正常，按下，指针，聚焦......），选择例如“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>

指针之后：

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

Answer 2

Windows应用商店XAML框架中的每个控件都有默认的画笔和样式集。例如，这是Button的样式：Button styles and templates。您始终可以尝试将默认画笔更改为您想要的内容。如果这不会给你想要看到的效果 - 你可以在你想要的东西上更改默认控制模板。

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

2 个答案: