思享工具箱

WPF Button添加图片

摘要：
0.更改模板效果：代码：˂SolidColorBrushx:Name=“m_Stroke

0、更改模板

效果：

WPF Button添加图片第1张WPF Button添加图片第2张WPF Button添加图片第3张WPF Button添加图片第4张

代码：

        <Button x:Name="m_HelpButton"IsEnabled="True"Width="23"Height="23"Click="m_HelpButton_Click">
            <Button.Template>
                <ControlTemplate>
                    <Grid>
                        <Ellipse>
                            <Ellipse.Stroke>
                                <SolidColorBrush x:Name="m_Stroke"Color="Silver" />
                            </Ellipse.Stroke>
                            <Ellipse.Fill>
                                <SolidColorBrush x:Name="m_Back"Color="White" />
                            </Ellipse.Fill>
                        </Ellipse>
                        <Image Margin="2"Source="Image/help1.png" />
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="Button.IsMouseOver"Value="True">
                            <Trigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimation To="LightBlue"BeginTime="0:0:0.1"Duration="0:0:0.1"Storyboard.TargetName="m_Stroke"Storyboard.TargetProperty="Color" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimation To="Silver"BeginTime="0:0:0.1"Duration="0:0:0.1"Storyboard.TargetName="m_Stroke"Storyboard.TargetProperty="Color" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.ExitActions>
                        </Trigger>
                        <Trigger Property="Button.IsPressed"Value="True">
                            <Trigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimation To="LightBlue"BeginTime="0:0:0"Duration="0:0:0.1"Storyboard.TargetName="m_Back"Storyboard.TargetProperty="Color" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimation To="White"BeginTime="0:0:0"Duration="0:0:0.1"Storyboard.TargetName="m_Back"Storyboard.TargetProperty="Color" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.ExitActions>
                        </Trigger>
                        <Trigger Property="Button.IsEnabled"Value="False">
                            <Trigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimation To="Silver"BeginTime="0:0:0"Duration="0:0:0"Storyboard.TargetName="m_Back"Storyboard.TargetProperty="Color" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimation To="Silver"BeginTime="0:0:0"Duration="0:0:0"Storyboard.TargetName="m_Back"Storyboard.TargetProperty="Color" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.ExitActions>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Button.Template>
        </Button>

1、原生态

效果：

WPF Button添加图片第5张

代码：

 <Button Height="23" HorizontalAlignment="Left" Margin="57,40,0,0" Name="button1" VerticalAlignment="Top" Width="75">
            <Button.Content>
                <StackPanel Orientation="Horizontal">
                    <Image Stretch="Fill" Source="/WpfApplication1;component/Images/previous.png" />
                    <TextBlock Text="Next" />
                    <Image Stretch="Fill" Source="/WpfApplication1;component/Images/next.png" />
                </StackPanel>
            </Button.Content>
        </Button>

2、去边框图片按钮

示意图：

WPF Button添加图片第6张

自定义控件源码

xaml

<UserControl x:Class="Fish.UILayer.Component.ImageButtonUC"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"mc:Ignorable="d"d:DesignHeight="23"d:DesignWidth="23"IsEnabledChanged="UserControl_IsEnabledChanged"MouseEnter="UserControl_MouseEnter"MouseLeave="UserControl_MouseLeave"MouseDown="UserControl_MouseDown"MouseUp="UserControl_MouseUp">
    <Border x:Name="m_Border"BorderThickness="1"CornerRadius="5"Background="White">
        <Rectangle Margin="2">
            <Rectangle.Fill>
                <ImageBrush x:Name="m_ImageBrush"  />
            </Rectangle.Fill>
        </Rectangle>
    </Border>
</UserControl>

cs

usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Text;
usingSystem.Windows;
usingSystem.Windows.Controls;
usingSystem.Windows.Data;
usingSystem.Windows.Documents;
usingSystem.Windows.Input;
usingSystem.Windows.Media;
usingSystem.Windows.Media.Imaging;
usingSystem.Windows.Navigation;
usingSystem.Windows.Shapes;

namespaceFish.UILayer.Component
{
    /// <summary>
    ///ImageUC.xaml 的交互逻辑
    /// </summary>
    public partial classImageButtonUC : UserControl
    {
        private Brush DOWN_BRUSH = newSolidColorBrush(Colors.Blue);
        private Brush SELECT_BRUSH = newSolidColorBrush(Colors.LightBlue);
        private Brush UNSELECT_BRUSH = newSolidColorBrush(Colors.White);
        private Brush DISABLED_BRUSH = newSolidColorBrush(Colors.LightGray);

        public eventMouseButtonEventHandler ClickEvent;

        publicImageSource MyImage
        {
            get { returnm_ImageBrush.ImageSource; }
            set { m_ImageBrush.ImageSource =value; }
        }

        publicImageButtonUC()
        {
            InitializeComponent();
        }

        private void UserControl_IsEnabledChanged(objectsender, DependencyPropertyChangedEventArgs e)
        {
            //if (this.IsEnabled == true)
            //{
            //m_Border.Background = UNSELECT_BRUSH;
            //}
            //else
            //{
            //m_Border.Background = DISABLED_BRUSH;
            //}
}
        private void UserControl_MouseEnter(objectsender, MouseEventArgs e)
        {
            if (this.IsEnabled == true)
            {
                m_Border.BorderBrush =SELECT_BRUSH;
            }
        }
        private void UserControl_MouseLeave(objectsender, MouseEventArgs e)
        {
            if (this.IsEnabled == true)
            {
                m_Border.BorderBrush =UNSELECT_BRUSH;
            }
        }
        private void UserControl_MouseDown(objectsender, MouseButtonEventArgs e)
        {
            if (this.IsEnabled == true)
            {
                m_Border.Background =SELECT_BRUSH;
            }
        }
        private void UserControl_MouseUp(objectsender, MouseButtonEventArgs e)
        {
            if (this.IsEnabled == true)
            {
                m_Border.Background =UNSELECT_BRUSH;
                if (ClickEvent != null)
                {
                    ClickEvent(sender, e);
                }
            }
        }


    }
}

使用源码：

<component:ImageButtonUC x:Name="m_LogoImageButtonUC"Height="75"Width="75"MyImage="/Fish.UILayer;component/Images/Fish.png"Grid.Column="2"Grid.Row="1"Grid.RowSpan="3"ClickEvent="m_LogoImageButtonUC_ClickEvent" />

3、纯文字按钮

效果图：

WPF Button添加图片第7张

自定义控件

XAML

<UserControl x:Class="Fish.UILayer.Component.SampleButtonUC"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"mc:Ignorable="d"d:DesignHeight="28"d:DesignWidth="150"IsEnabledChanged="UserControl_IsEnabledChanged"MouseEnter="UserControl_MouseEnter"MouseLeave="UserControl_MouseLeave"MouseDown="UserControl_MouseDown"MouseUp="UserControl_MouseUp">
    <Border x:Name="m_Border"BorderBrush="Blue"BorderThickness="1"CornerRadius="5"Background="White">
        <TextBlock x:Name="m_TextBlock"Text="Button"Foreground="Blue"FontSize="16"VerticalAlignment="Center"HorizontalAlignment="Center"/>
    </Border>
</UserControl>

CS

usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Text;
usingSystem.Windows;
usingSystem.Windows.Controls;
usingSystem.Windows.Data;
usingSystem.Windows.Documents;
usingSystem.Windows.Input;
usingSystem.Windows.Media;
usingSystem.Windows.Media.Imaging;
usingSystem.Windows.Navigation;
usingSystem.Windows.Shapes;

namespaceFish.UILayer.Component
{
    /// <summary>
    ///SampleButtonUC.xaml 的交互逻辑
    /// </summary>
    public partial classSampleButtonUC : UserControl
    {
        private Brush DOWN_BRUSH = newSolidColorBrush(Colors.Blue);
        private Brush SELECT_BRUSH = newSolidColorBrush(Colors.LightBlue);
        private Brush UNSELECT_BRUSH = newSolidColorBrush(Colors.White);
        private Brush DISABLED_BRUSH = newSolidColorBrush(Colors.LightGray);

        public eventMouseButtonEventHandler ClickEvent;

        public stringText
        {
            get { returnm_TextBlock.Text; }
            set { m_TextBlock.Text =value; }
        }
        public doubleTextFontSize
        {
            get { returnm_TextBlock.FontSize; }
            set { m_TextBlock.FontSize =value; }
        }
        publicCornerRadius CornerRadius
        {
            get { returnm_Border.CornerRadius; }
            set { m_Border.CornerRadius =value; }
        }

        publicSampleButtonUC()
        {
            InitializeComponent();
        }
        private void UserControl_IsEnabledChanged(objectsender, DependencyPropertyChangedEventArgs e)
        {
            if (this.IsEnabled == true)
            {
                m_Border.Background =UNSELECT_BRUSH;
                m_TextBlock.Foreground =DOWN_BRUSH;
            }
            else{
                m_Border.Background =DISABLED_BRUSH;
                m_TextBlock.Foreground =UNSELECT_BRUSH;
            }
        }
        private void UserControl_MouseEnter(objectsender, MouseEventArgs e)
        {
            if (this.IsEnabled == true)
            {
                m_Border.Background =SELECT_BRUSH;
                m_TextBlock.Foreground =UNSELECT_BRUSH;
            }
        }
        private void UserControl_MouseLeave(objectsender, MouseEventArgs e)
        {
            if (this.IsEnabled == true)
            {
                m_Border.Background =UNSELECT_BRUSH;
                m_TextBlock.Foreground =DOWN_BRUSH;
            }
        }
        private void UserControl_MouseDown(objectsender, MouseButtonEventArgs e)
        {
            if (this.IsEnabled == true)
            {
                m_Border.Background =DOWN_BRUSH;
                m_TextBlock.Foreground =UNSELECT_BRUSH;
            }
        }
        private void UserControl_MouseUp(objectsender, MouseButtonEventArgs e)
        {
            if (this.IsEnabled == true)
            {
                m_Border.Background =SELECT_BRUSH;
                m_TextBlock.Foreground =UNSELECT_BRUSH;
                if (ClickEvent != null)
                {
                    ClickEvent(sender, e);
                }
            }
        }


    }
}

使用：

<component:SampleButtonUC x:Name="m_LoginButton"Text="登录"TextFontSize="16"ClickEvent="m_LoginButton_ClickEvent"Width="150"Height="28" />

其他效果待补充

标签：#按钮#storyboard#wpf | 浏览：1363 | 发布日期：

免责声明：文章转载自《WPF Button添加图片》仅用于学习参考。如对内容有疑问，请及时联系本站处理。

上篇Android下音视频对讲演示程序（声学回音消除、噪音抑制、语音活动检测、自动增益控制、自适应抖动缓冲）（2021年11月10日更新）redis如何查看主从状态信息master和salve下篇

宿迁高防，2C2G15M，22元/月；香港BGP，2C5G5M，25元/月 雨云优惠码：MjYwNzM=

相关文章

android中实现自定义广播

自定义广播分两个步骤：1、发送广播 2、接收广播 一、先看如何接收广播： 我使用的是Android Studio，File->New->Other->Broadcast Receiver，先创建一个广播类，这个创建的类会自动帮我们继承BroadcastReceiver类，接收广播，需要继承这个类 MyReceiver.java packa...

uni-app 左上角返回按钮消失

在一级页面点击进入二级页面，当点击二级页面的返回按钮，回到一级页面后，一级页面的左上角返回按钮消失： 如下图：在一级页面的时候，左上角返回按钮还在，  uni.navigateTo 跳转到二级页面：  点击二级页面左上角按钮返回，一级页面左上角按钮消失， 因为在第二个页面，添加了 onBackPress 函数，把该页面的该函数去掉即可； 原因： 在监...

无限轮播图的制作

url：http://zjingwen.github.io/SetTimeOutGoBlog/webdemo/huanyouji/index.html （如果打开过慢，或者打不开，原因你懂得。） 一、思路 1、所有滑动效果的demo都是通过控制css里的left值，来控制滑动效果的。 2、需要两个块，一个div块，一个ui。div块的position是r...

ios storyboard全解析 (二)

Add Player 最终的设计看上去像下面这样:#接第一部分:原帖地址简书地址 如果你想了解storyboards,那么你来对地方了.在第一篇文章第一篇文章中,你已经学到了Interface Builder的基本用法来创建和连线多个控制器,以及使用在storyboard中可以通过直接创建自定义的tableViewCell.此次storyboard系列教...

CButtonEx的实现

要想修改CButton类按钮背景颜色和文字颜色，必须利用自绘方法对按钮进行重新绘制。这可以通过定义一个以CButton为基类的新按钮类来实现。以下为具体的实现方法： 方法一： 加入一个新类，类名：CButtonEx，基类：CButton。 在头文件 CButtonEx.h 中加入以下变量和函数定义： private: intm_Style; //按钮形状（...

wpf研究之道——datagrid控件数据绑定

前台： <DataGrid x:Name="TestCaseDataGrid" ItemsSource="{Binding}" > {binding} 是个简写的方式，绑定的是datagrid 对象的DataContext 后台： this.TestCaseDataGrid.DataContext = Data.PagerSource;...

最新文章

随机推荐

思享工具箱导航