WPF Button 透明效果

Button 透明效果

?

<Window x:Class="ControlTest2.ButtonGlassTest"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="ButtonGlassTest" Height="480" Width="640">

    <Window.Resources>

        <ControlTemplate x:Key="GlassButton" TargetType="{x:Type Button}">

            <ControlTemplate.Resources>

                <Storyboard x:Key="Timeline1">

                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="glow" Storyboard.TargetProperty="(UIElement.Opacity)">

                        <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1"/>

                    </DoubleAnimationUsingKeyFrames>

                </Storyboard>

                <Storyboard x:Key="Timeline2">

                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="glow" Storyboard.TargetProperty="(UIElement.Opacity)">

                        <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0"/>

                    </DoubleAnimationUsingKeyFrames>

                </Storyboard>

            </ControlTemplate.Resources>

            <Border BorderBrush="#FFFFFFFF" BorderThickness="1,1,1,1" CornerRadius="4,4,4,4">

                <Border x:Name="border" Background="#7F000000" BorderBrush="#FF000000" BorderThickness="1,1,1,1" CornerRadius="4,4,4,4">

                    <Grid>

                        <Grid.RowDefinitions>

                            <RowDefinition Height="0.507*"/>

                            <RowDefinition Height="0.493*"/>

                        </Grid.RowDefinitions>

                        <Border Opacity="0" HorizontalAlignment="Stretch" x:Name="glow" Width="Auto" Grid.RowSpan="2" CornerRadius="4,4,4,4">

                            <Border.Background>

                                <RadialGradientBrush>

                                    <RadialGradientBrush.RelativeTransform>

                                        <TransformGroup>

                                            <ScaleTransform ScaleX="1.702" ScaleY="2.243"/>

                                            <SkewTransform AngleX="0" AngleY="0"/>

                                            <RotateTransform Angle="0"/>

                                            <TranslateTransform X="-0.368" Y="-0.152"/>

                                        </TransformGroup>

                                    </RadialGradientBrush.RelativeTransform>

                                    <GradientStop Color="#B28DBDFF" Offset="0"/>

                                    <GradientStop Color="#008DBDFF" Offset="1"/>

                                </RadialGradientBrush>

                            </Border.Background>

                        </Border>

                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Grid.RowSpan="2"/>

                        <Border HorizontalAlignment="Stretch" Margin="0,0,0,0" x:Name="shine" Width="Auto" CornerRadius="4,4,0,0">

                            <Border.Background>

                                <LinearGradientBrush EndPoint="0.494,0.889" StartPoint="0.494,0.028">

                                    <GradientStop Color="#99FFFFFF" Offset="0"/>

                                    <GradientStop Color="#33FFFFFF" Offset="1"/>

                                </LinearGradientBrush>

                            </Border.Background>

                        </Border>

                    </Grid>

                </Border>

            </Border>

            <ControlTemplate.Triggers>

                <Trigger Property="IsPressed" Value="True">

                    <Setter Property="Opacity" TargetName="shine" Value="0.4"/>

                    <Setter Property="Background" TargetName="border" Value="#CC000000"/>

                    <Setter Property="Visibility" TargetName="glow" Value="Hidden"/>

                </Trigger>

                <Trigger Property="IsMouseOver" Value="True">

                    <Trigger.EnterActions>

                        <BeginStoryboard Storyboard="{StaticResource Timeline1}"/>

                    </Trigger.EnterActions>

                    <Trigger.ExitActions>

                        <BeginStoryboard x:Name="Timeline2_BeginStoryboard" Storyboard="{StaticResource Timeline2}"/>

                    </Trigger.ExitActions>

                </Trigger>

            </ControlTemplate.Triggers>

        </ControlTemplate>

    </Window.Resources>

    <Grid>

        <Grid.Background>

            <LinearGradientBrush EndPoint="0.486,0.986" StartPoint="0.486,0">

                <GradientStop Color="#FF000000" Offset="0"/>

                <GradientStop Color="#FFD0D0D0" Offset="1"/>

                <GradientStop Color="#FF8D8D8D" Offset="0.558"/>

                <GradientStop Color="#FF8D8D8D" Offset="0.76"/>

                <GradientStop Color="#FF747474" Offset="0.615"/>

            </LinearGradientBrush>

        </Grid.Background>

        <Button HorizontalAlignment="Left" Margin="31,0,0,182" VerticalAlignment="Bottom" Width="176" Height="34" Content="Button" Foreground="#FFFFFFFF"

                Template="{DynamicResource GlassButton}"/>

        <Image  Margin="221,89,27.001,73" Source="Aero_Grass.jpg" Stretch="Fill">

            <Image.OpacityMask>

                <RadialGradientBrush>

                    <GradientStop Color="#FF000000" Offset="0"/>

                    <GradientStop Color="#00FFFFFF" Offset="1"/>

                </RadialGradientBrush>

            </Image.OpacityMask>

        </Image>

        <Button HorizontalAlignment="Right" Margin="0,0,120,158" VerticalAlignment="Bottom" Width="179" Height="34" Content="My New Glass Button"

                Foreground="#FFFFFFFF" Template="{DynamicResource GlassButton}"/>

        <Button Width="179" Foreground="#FFFFFFFF" Template="{DynamicResource GlassButton}" HorizontalAlignment="Right" Margin="0,192,120,218">

            <StackPanel HorizontalAlignment="Left" Width="Auto" Height="Auto" Orientation="Horizontal">

                <Image Width="20" Height="20" Source="Aero_Grass.jpg" Stretch="Fill"/>

                <TextBlock Margin="5,0,50,0" VerticalAlignment="Center" FontSize="12" Text="Internet Explorer" TextWrapping="Wrap"/>

            </StackPanel>

        </Button>

    </Grid>

</Window>

　如图：