【问题标题】:Set button background style in wpf在 wpf 中设置按钮背景样式
【发布时间】:2012-09-05 10:37:49
【问题描述】:

我有一个按钮,我用 LinearGradientBrush 设置按钮背景样式。一切正常,但是当我运行按钮并按下按钮时,渐变颜色显示带有一点动画的 ob 按钮,但我没有为按钮背景样式的动画编写任何内容。

这是我的完整代码

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">

<DockPanel>
    <Button Content="Button" Height="23" Name="button1" Width="75">
        <Button.Background>
            <LinearGradientBrush  StartPoint="0,0" EndPoint="1,1">
                <GradientStop Color="#FFD9EDFF" Offset="0"/>
                <GradientStop Color="#FFC0DEFF" Offset="0.445"/>
                <GradientStop Color="#FFAFD1F8" Offset="0.53"/>
            </LinearGradientBrush>
        </Button.Background>
    </Button>
</DockPanel>
</Window>

我希望当用户单击按钮时,渐变动画不会在按钮上启动。请指导我。谢谢

【问题讨论】:

    标签: wpf button lineargradientbrush


    【解决方案1】:

    您需要重新定义按钮样式,您可以使用ControlTemplate 来完成。这是如何编写重新定义按钮的可重用样式的示例。

    我还添加了一个示例,如何在 IsPressed 事件上实现颜色更改。

    <Window x:Class="ColorTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <ResourceDictionary>
            <LinearGradientBrush x:Key="ButtonBackground" StartPoint="0,0" EndPoint="1,1">
                <GradientStop Color="#FFD9EDFF" Offset="0"/>
                <GradientStop Color="#FFC0DEFF" Offset="0.445"/>
                <GradientStop Color="#FFAFD1F8" Offset="0.53"/>
            </LinearGradientBrush>
            <Style x:Key="SimpleButtonStyle" TargetType="{x:Type Button}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <Grid>
                                <Border Background="{StaticResource ButtonBackground}" VerticalAlignment="Stretch" CornerRadius="2" HorizontalAlignment="Stretch"/>
                                <Border x:Name="BorderPressed"  Opacity="0" Background="Blue" VerticalAlignment="Stretch" CornerRadius="2" HorizontalAlignment="Stretch"/>
                                <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" x:Name="MainContent" />
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsPressed" Value="True">
                                    <Trigger.EnterActions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetName="BorderPressed" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.2"/>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </Trigger.EnterActions>
                                    <Trigger.ExitActions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetName="BorderPressed" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.2"/>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </Trigger.ExitActions>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ResourceDictionary>
    </Window.Resources>
    <DockPanel>
        <Button Content="Button" Height="23" Name="button1" Width="75" Style="{StaticResource SimpleButtonStyle}"/>
    </DockPanel>
    

    【讨论】:

    • 他们定义风格的方式是错误的。当我点击我的按钮时,动画效果就会出现。你能解释一下为什么....我的风格定义有什么问题吗?
    • 您只更改了按钮的背景属性。按钮(和其他控件)具有比背景更多的属性。如果您想重置所有控件样式 - 删除所有默认行为(如动画),您需要重新定义模板。当您重新定义模板属性时,您还可以设置自己的动画效果(使用 ControlTemplate.Triggers)。
    • 我注意到按钮推送效果消失的另一件事。如何更改按钮悬停颜色以及如何实现推送效果颜色。请帮忙
    • 所有默认的动画和效果都没有了,所以你需要重新实现一次。我添加了如何在点击事件上更改背景颜色的示例。您可以以类似的方式设置鼠标悬停的触发器 - 使用 .
    【解决方案2】:

    这是因为按钮的默认样式。

    你需要设置一个新的样式。

    编辑:

    <Button Content="Button" Height="23" Name="button1" Width="75">
     <Button.Style>
       <Style TargetType="Button">
         <Setter Property="Background">
          <Setter.Value>
            <LinearGradientBrush  StartPoint="0,0" EndPoint="1,1">
                <GradientStop Color="#FFD9EDFF" Offset="0"/>
                <GradientStop Color="#FFC0DEFF" Offset="0.445"/>
                <GradientStop Color="#FFAFD1F8" Offset="0.53"/>
            </LinearGradientBrush>
          </Setter.Value>
         </Setter>
           <Setter Property="Template">
             <Setter.Value>
               <ControlTemplate TargetType="{x:Type Button}">
                  <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 HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                  </Microsoft_Windows_Themes:ButtonChrome>
               </ControlTemplate>
             </Setter.Value>
          </Setter>
       </Style>
     <Button.Style>
    </Button>
    

    如果您想多次使用此样式,请将其用作资源: 将它设置为 Window.xaml 中每个按钮的这种样式

    将样式移到 App.xaml 等更高的范围会为应用程序中的每个按钮应用样式

    【讨论】:

    • 我需要在 mainwindow.xaml 或 App.xml 中定义
    • 这是什么 特别是ButtonChrome??
    • 这是微软定义的主题。更多关于themes
    • 如何将此样式放入 app.xaml。我需要复制哪一部分。给一个样本。谢谢
    • 我注意到按钮推送效果消失的另一件事。如何更改按钮悬停颜色以及如何实现推送效果颜色。请帮忙
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-07-24
    • 1970-01-01
    • 2023-03-06
    • 1970-01-01
    • 1970-01-01
    • 2016-10-05
    相关资源
    最近更新 更多