在鼠标悬停时使按钮透明 [英] Make the button transparent on mouse over

问题描述

我正在使用 Microsoft Visual Studio Express 2012 构建 Metro 风格的应用程序.我对这个应用程序很陌生，我需要帮助.我在 XAML 中定义了一个按钮，按钮背景是从图像设置的.将鼠标悬停在按钮上时将其背景更改为空白.我想改变它，使图像在鼠标悬停时大约 50% 透明.那可能吗?有什么帮助吗?谢谢.

I'm building a metro style application using Microsoft Visual Studio Express 2012. I am very new to this applications and I need help. I have defined a button in XAML with button background is set from an image. At mouse over the button changes it background to blank. I want to change it an make the image about 50% transparent on mouse over. Is that possible? Any help? Thank you.

我已声明按钮如下:

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

推荐答案

Windows 应用商店应用不存在 Interactivity dll.您应该改用视觉状态.使用 Blend 很容易实现.

The Interactivity dll doesn't exist for Windows Store apps. You should use Visual States instead. It's easy to achieve with Blend.

如果您在 Blend 中打开您的应用程序并编辑您按钮模板的副本，您最终会在您的 xaml 中获得一个完整的默认按钮样式.您只需编辑 PointerOver 视觉状态即可实现您想要的效果.

If you open your app in Blend and edit a copy of your button's Template, you'll end up with a complete default button style in your xaml. You just have to edit the PointerOver visual state to achieve what you want.

您的按钮将如下所示:

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

并且您必须在应用程序的资源中定义样式，以便您可以在任何地方使用它.

and you'll have to define the style in the resources of your app, so that you can use it everywhere.

在下面的代码中，查看 PointerOver 视觉状态.它定义了按钮在进入该状态时应如何更改.在这里，我们说边框的不透明度(显示背景图像的内容)应该是 0.5 :

In the code below, look at the PointerOver visual state. It defines how the button should change when it enters that state. Here, we say that the opacity of the border (which is the content that displays your background image), should be 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>

这篇关于在鼠标悬停时使按钮透明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！