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

Windows Store XAML框架中的每個控件都有一組默認的畫筆和樣式。例如，這是Button的樣式：Button styles and templates。你總是可以試着將默認的筆刷改成你想要的東西。如果這不會給你想要看到的效果 - 你可以改變你想要的東西的默認控制模板。

Answer 2

在Blend for Visual Studio下打開你的項目（我建議你先應用visual studio 2012 update 2），選擇你的按鈕並右鍵單擊 - >編輯模板 - >編輯一個副本 - >創建一個新的本地資源。

在狀態面板中，您將看到按鈕的不同可能狀態（正常，按下，指示器轉向，聚焦...），選擇例如「PointerOver」並將Background Brush更改爲透明（或只是將其刪除） 。

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> 

現在藍色的邊框消失了：

<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後。要將其應用於其他按鈕，可以將該樣式移動到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>