使按鈕在鼠標上透明

Question

我正在構建使用Microsoft Visual Studio Express 2012的metro風格應用程序。我對這個應用程序非常陌生，我需要幫助。我已經在XAML中定義了一個按鈕，按鈕背景是從圖像中設置的。在鼠標上方按鈕將其背景變爲空白。我想改變它，使鼠標懸停在50％左右的圖像。那可能嗎？任何幫助？謝謝。

我已經宣佈按鈕如下：

<Button Height="100" Width="100" Margin="0,0,0,0"> 
    <Button.Background> 
    <ImageBrush ImageSource="../Images/home.png"></ImageBrush> 
    </Button.Background> 
</Button> 

Answer 1

的交互DLL不存在適用於Windows Store應用程序。您應該使用視覺狀態。用Blend很容易實現。

如果您在Blend中打開您的應用並編輯您的按鈕模板的副本，那麼您將在xaml中獲得完整的默認按鈕樣式。您只需編輯PointerOver視覺狀態即可實現您想要的效果。

你的按鈕看起來就像這樣：

<Button Height="100" Width="100" Margin="0,0,0,0" Style="{StaticResource ButtonStyle1}"> 
    <Button.Background> 
     <ImageBrush ImageSource="/Assets/Images/home.png"></ImageBrush> 
    </Button.Background> 
</Button> 

，你就必須定義在您的應用程序的資源的風格，讓你可以隨處使用它。

在下面的代碼中，看看PointerOver的可視狀態。它定義了按鈕在進入該狀態時應該如何改變。在這裏，我們說，邊境的不透明度（這是顯示您的背景圖像內容），應爲0.5：

<DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Border" d:IsOptimized="True"/> 

下面是完整的風格：

<Style x:Key="ButtonStyle1" TargetType="Button"> 
    <Setter Property="Background" Value="{StaticResource ButtonBackgroundThemeBrush}"/> 
    <Setter Property="Foreground" Value="{StaticResource ButtonForegroundThemeBrush}"/> 
    <Setter Property="BorderBrush" Value="{StaticResource ButtonBorderThemeBrush}"/> 
    <Setter Property="BorderThickness" Value="{StaticResource ButtonBorderThemeThickness}"/> 
    <Setter Property="Padding" Value="12,4,12,4"/> 
    <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="Button"> 
       <Grid> 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="CommonStates"> 
          <VisualState x:Name="Normal"/> 
          <VisualState x:Name="PointerOver"> 
           <Storyboard> 
            <DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Border" d:IsOptimized="True"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Pressed"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPressedBackgroundThemeBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPressedForegroundThemeBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Disabled"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledBackgroundThemeBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Border"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledBorderThemeBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledForegroundThemeBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
         <VisualStateGroup x:Name="FocusStates"> 
          <VisualState x:Name="Focused"> 
           <Storyboard> 
            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualWhite"/> 
            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualBlack"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Unfocused"/> 
          <VisualState x:Name="PointerFocused"/> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 
        <Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="3"> 
         <ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
        </Border> 
        <Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="1.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1"/> 
        <Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1"/> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style>