WPF介面按鈕美化

標籤：

在App.xaml裡加入全域按鈕樣式

<Application x:Class="WpfButton.App"             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"             xmlns:local="clr-namespace:WpfButton"             StartupUri="MainWindow.xaml">    <Application.Resources>        <!--定義按鈕樣式-->        <Style TargetType="Button">            <!--按鈕字型顏色-->            <Setter Property="Foreground" Value="Black"/>            <!--修改模板屬性-->            <Setter Property="Template">                <Setter.Value>                    <!--控制項範本-->                    <ControlTemplate TargetType="Button">                        <!--背景色-->                        <Border x:Name="back" Opacity="0.8" CornerRadius="3">                            <Border.BitmapEffect>                                <OuterGlowBitmapEffect Opacity="0.7" GlowSize="0" GlowColor="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Button.Background).(SolidColorBrush.Color)}" />                            </Border.BitmapEffect>                            <Border.Background>                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1.5">                                    <GradientBrush.GradientStops>                                        <GradientStopCollection>                                            <GradientStop Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Button.Background).(SolidColorBrush.Color)}" Offset="0"/>                                            <GradientStop Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Button.Background).(SolidColorBrush.Color)}" Offset="0.4"/>                                            <GradientStop Color="#FFF" Offset="1"/>                                        </GradientStopCollection>                                    </GradientBrush.GradientStops>                                </LinearGradientBrush>                            </Border.Background>                            <!--前景色彩及邊框-->                            <Border x:Name="fore" BorderThickness="1" CornerRadius="3" BorderBrush="#5555">                                <Border.Background>                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">                                        <GradientBrush.GradientStops>                                            <GradientStopCollection>                                                <GradientStop Color="#6FFF" Offset="0.5"/>                                                <GradientStop Color="#1111" Offset="0.51"/>                                            </GradientStopCollection>                                        </GradientBrush.GradientStops>                                    </LinearGradientBrush>                                </Border.Background>                                <!--按鈕內容-->                                <ContentPresenter x:Name="content" HorizontalAlignment="Center" VerticalAlignment="Center" Content="{TemplateBinding  Content}">                                    <ContentPresenter.BitmapEffect>                                        <DropShadowBitmapEffect Color="#000" Direction="-90" ShadowDepth="2" Softness="0.1" Opacity="0.3" />                                    </ContentPresenter.BitmapEffect>                                </ContentPresenter>                            </Border>                        </Border>                        <!--觸發器-->                        <ControlTemplate.Triggers>                            <!--滑鼠移入移出-->                            <Trigger Property="IsMouseOver" Value="True">                                <Trigger.EnterActions>                                    <BeginStoryboard>                                        <Storyboard>                                            <DoubleAnimation To="6" Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)" />                                            <ColorAnimation To="#AFFF" BeginTime="0:0:0.2" Duration="0:0:0.2" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" />                                            <ColorAnimation To="#3FFF" BeginTime="0:0:0.2" Duration="0:0:0.2" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" />                                        </Storyboard>                                    </BeginStoryboard>                                </Trigger.EnterActions>                                <Trigger.ExitActions>                                    <BeginStoryboard>                                        <Storyboard>                                            <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)" />                                            <ColorAnimation Duration="0:0:0.2" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" />                                            <ColorAnimation Duration="0:0:0.2" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" />                                        </Storyboard>                                    </BeginStoryboard>                                </Trigger.ExitActions>                            </Trigger>                            <!--按鈕按下彈起-->                            <Trigger Property="IsPressed" Value="True">                                <Trigger.EnterActions>                                    <BeginStoryboard>                                        <Storyboard>                                            <DoubleAnimation To="3" Duration="0:0:0.1" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)" />                                            <ColorAnimation To="#3AAA" Duration="0:0:0.1" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" />                                            <ColorAnimation To="#2111" Duration="0:0:0.1" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" />                                        </Storyboard>                                    </BeginStoryboard>                                </Trigger.EnterActions>                                <Trigger.ExitActions>                                    <BeginStoryboard>                                        <Storyboard>                                            <DoubleAnimation Duration="0:0:0.1" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)" />                                            <ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" />                                            <ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" />                                        </Storyboard>                                    </BeginStoryboard>                                </Trigger.ExitActions>                            </Trigger>                            <!--按鈕失效-->                            <Trigger Property="IsEnabled" Value="False">                                <Setter Property="Foreground" Value="#B444"/>                                <Trigger.EnterActions>                                    <BeginStoryboard>                                        <Storyboard>                                            <DoubleAnimation To="0" Duration="0:0:0.3" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)" />                                            <DoubleAnimation To="1" Duration="0:0:0.1" Storyboard.TargetName="content" Storyboard.TargetProperty="(ContentPresenter.BitmapEffect).(DropShadowBitmapEffect.Opacity)" />                                            <DoubleAnimation To="-135" Duration="0:0:0.1" Storyboard.TargetName="content" Storyboard.TargetProperty="(ContentPresenter.BitmapEffect).(DropShadowBitmapEffect.Direction)" />                                            <ColorAnimation To="#FFF" Duration="0:0:0.3" Storyboard.TargetName="content" Storyboard.TargetProperty="(ContentPresenter.BitmapEffect).(DropShadowBitmapEffect.Color)" />                                            <ColorAnimation To="#D555" Duration="0:0:0.3" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" />                                            <ColorAnimation To="#CEEE" Duration="0:0:0.3" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" />                                            <ColorAnimation To="#CDDD" Duration="0:0:0.3" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" />                                        </Storyboard>                                    </BeginStoryboard>                                </Trigger.EnterActions>                                <Trigger.ExitActions>                                    <BeginStoryboard>                                        <Storyboard>                                            <DoubleAnimation Duration="0:0:0.1" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)" />                                            <DoubleAnimation Duration="0:0:0.1" Storyboard.TargetName="content" Storyboard.TargetProperty="(ContentPresenter.BitmapEffect).(DropShadowBitmapEffect.Opacity)" />                                            <DoubleAnimation Duration="0:0:0.1" Storyboard.TargetName="content" Storyboard.TargetProperty="(ContentPresenter.BitmapEffect).(DropShadowBitmapEffect.Direction)" />                                            <ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="content" Storyboard.TargetProperty="(ContentPresenter.BitmapEffect).(DropShadowBitmapEffect.Color)" />                                            <ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" />                                            <ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" />                                            <ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" />                                        </Storyboard>                                    </BeginStoryboard>                                </Trigger.ExitActions>                            </Trigger>                        </ControlTemplate.Triggers>                    </ControlTemplate>                </Setter.Value>            </Setter>        </Style>    </Application.Resources></Application>

　　全域按鈕樣式是直接針對Button的，所以在介面上直接用

<Window x:Class="WpfButton.MainWindow"        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"        xmlns:local="clr-namespace:WpfButton"        mc:Ignorable="d"        Title="WPF按鈕美化" Height="350" Width="525">    <Grid>        <Grid.RowDefinitions>            <RowDefinition Height="40" />            <RowDefinition Height="*" />        </Grid.RowDefinitions>        <Grid Grid.Row="0">            <Grid.ColumnDefinitions>                <ColumnDefinition />                <ColumnDefinition />                <ColumnDefinition />                <ColumnDefinition />                <ColumnDefinition />                <ColumnDefinition />            </Grid.ColumnDefinitions>            <Button Grid.Column="0" Height="23" Width="75" Background="Gold" Click="button1_Click">Button</Button>            <Button Grid.Column="1" Height="23" Width="75" Background="Red" Click="button1_Click">Button</Button>            <Button Grid.Column="2" Height="23" Width="75" Background="GreenYellow" Click="button1_Click">Button</Button>            <Button Grid.Column="3" Height="23" Width="75" Background="Snow" Click="button1_Click">Button</Button>            <Button Grid.Column="4" Height="23" Width="75" Background="Coral" Click="button1_Click">Button</Button>            <Button Grid.Column="5" Height="23" Width="75" Background="SkyBlue" Click="button1_Click">Button</Button>        </Grid>    </Grid></Window>

　　後台

public partial class MainWindow : Window    {        public MainWindow()        {            InitializeComponent();        }        Button b;        private void button1_Click(object sender, RoutedEventArgs e)        {            if (b != null) b.IsEnabled = true;            b = sender as Button;            b.IsEnabled = false;        }    }}

　　效果

WPF介面按鈕美化