Question

我做了一个按钮，当mouseEnter和mouseLeave时淡入淡出。但是我的问题是，文本或内容也淡入淡出...我希望它留下..或者是否有可能使边界只有淡入淡出？不是整个按钮？

我有这段代码：

    private void Button_MouseLeave_1(object sender, MouseEventArgs e)
    {
        Button c = (Button)sender;
        DoubleAnimation animation = new DoubleAnimation(0, TimeSpan.FromSeconds(1));
        c.BeginAnimation(Button.OpacityProperty, animation);
    }

    private void Button_MouseEnter_1(object sender, MouseEventArgs e)
    {
        Button c = (Button)sender;
        DoubleAnimation animation = new DoubleAnimation(1, TimeSpan.FromSeconds(1));
        c.BeginAnimation(Button.OpacityProperty, animation);
    }

Answer 1

我建议在按钮上添加一个标签，而不是按钮内。将您的内容放在标签背景颜色为透明的标签中，并在按钮上应用淡入/淡出逻辑。

Answer 2

使用以下样式来满足您的要求。

<Window.Resources>

    <Style x:Key="ButtonFocusVisual">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <LinearGradientBrush x:Key="ButtonNormalBackground" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#F3F3F3" Offset="0"/>
        <GradientStop Color="#EBEBEB" Offset="0.5"/>
        <GradientStop Color="#DDDDDD" Offset="0.5"/>
        <GradientStop Color="#CDCDCD" Offset="1"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="ButtonNormalBorder" Color="#FF707070"/>

</Window.Resources>

上面的内容将是用Key引用的资源。在Window的资源中不是强制性的。它应该在其对等控制的资源中，所以也可以将它放在Grid's Resources中，没问题。

下面的Style也可以在上面的资源中，因为它是针对所有按钮的（如果它是直接定位的，这个样式将适用于该特定窗口中的所有按钮）。如果此样式只需要应用于特定的Button，则可以直接将其发布在<Button.Style> 下面的样式 </Button.Style>中。

<Style TargetType="{x:Type Button}">
        <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
        <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
        <Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Padding" Value="1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Chrome">
                                            <EasingDoubleKeyFrame KeyTime="0:0:0:1" Value="0">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <BackEase EasingMode="EaseOut"/>
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed"/>
                                <VisualState x:Name="Disabled"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Microsoft_Windows_Themes:ButtonChrome x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" RenderDefaulted="{TemplateBinding IsDefaulted}" SnapsToDevicePixels="true"/>
                        <ContentPresenter x:Name="content" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Grid>
                    <ControlTemplate.Triggers>

                        <Trigger Property="IsKeyboardFocused" Value="true">
                            <Setter Property="RenderDefaulted" TargetName="Chrome" Value="true"/>
                        </Trigger>
                        <Trigger Property="ToggleButton.IsChecked" Value="true">
                            <Setter Property="RenderPressed" TargetName="Chrome" Value="true"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="#ADADAD"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

除了c＃WPF中的文本之外，如何淡入和淡出按钮

2 个答案: