zoukankan      html  css  js  c++  java
  • WPF -- 自定义按钮

    本文介绍WPF一种自定义按钮的方法。

    实现效果
    1. 使用图片做按钮背景;
    2. 自定义鼠标进入时效果;
    3. 自定义按压效果;
    4. 自定义禁用效果

    实现效果如下图所示:

    实现步骤
    1. 创建CustomButton.cs,继承自Button;
    2. 创建一个资源文件ButtonStyles.xaml;
    3. 在资源文件中设计按钮的Style;
    4. 在CustomButton.cs中添加Style中需要的依赖属性;
    5. 在程序中添加资源并引用(为了方便在不同的程序中引用自定义按钮,自定义按钮放在独立的类库中,应用程序中进行资源合并即可)。
    示例代码
    // ButtonStyles.xaml
    <Style x:Key="CustomButton" TargetType="{x:Type local:CustomButton}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:CustomButton}">
                    <Grid x:Name="container">
                        <Image Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" 
                                Source="{Binding ButtonImage,RelativeSource={RelativeSource Mode=TemplatedParent}}">
                            <Image.RenderTransformOrigin>
                                <Point X="0.5" Y="0.5"/>
                            </Image.RenderTransformOrigin>
                            <Image.RenderTransform>
                                <ScaleTransform x:Name="scaletrans" ScaleX="1" ScaleY="1"/>
                            </Image.RenderTransform>
                        </Image>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Opacity" Value="0.5" TargetName="container"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" Value="#2c000000" TargetName="container"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Trigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="scaletrans" Storyboard.TargetProperty="(ScaleTransform.ScaleX)" 
                                        To="0.8" Duration="0:0:0.15" AutoReverse="True"/>
                                        <DoubleAnimation Storyboard.TargetName="scaletrans" Storyboard.TargetProperty="(ScaleTransform.ScaleY)" 
                                        To="0.8" Duration="0:0:0.15" AutoReverse="True"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    
    // CustomButton.cs
    public class CustomButton : Button
    {
        public ImageSource ButtonImage
        {
            get { return (ImageSource)GetValue(ButtonImageProperty); }
            set { SetValue(ButtonImageProperty, value); }
        }
    
        public static readonly DependencyProperty ButtonImageProperty =
            DependencyProperty.Register("ButtonImage", typeof(ImageSource), typeof(CustomButton),
            new FrameworkPropertyMetadata(null, FrameworkPropertyMetadataOptions.AffectsRender));
    }
    
    // App.xaml 合并资源
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source=".../ButtonStyles.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>     
    </Application.Resources>
    
    // view.xaml 使用
    <Grid>
        <customcontrols:CustomButton Width="48" Height="48" 
            Style="{StaticResource CustomButton}" ButtonImage="/Louzi.Paint;component/Images/Toolbar/write.png"/>
    </Grid>
    
    转载请注明出处,欢迎交流。
  • 相关阅读:
    以正确的方式开源 Python 项目
    如果你喜欢Python 那么你不得不知的几个开源项目
    如何自学 Python(干货合集)
    不老的新丁 Python何以让人着迷
    流行的Python项目汇总
    AccountManager使用教程
    设计模式大全
    ubuntu12.04安装深度音乐播放器和深度影音
    完毕port(CompletionPort)具体解释
    关于jdbc注冊驱动的那点事
  • 原文地址:https://www.cnblogs.com/louzixl/p/14454750.html
Copyright © 2011-2022 走看看