使按钮在鼠标上透明

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>