WPF Button添加图片

最新推荐文章于 2023-11-15 10:39:40 发布
最新推荐文章于 2023-11-15 10:39:40 发布
阅读量381 收藏
点赞数
原文链接：http://www.cnblogs.com/sshoub/archive/2012/08/22/2650942.html
版权
WPF Button添加图片

0、更改模板

效果：

代码：

        <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、原生态

效果：

 

代码：

 <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、去边框图片按钮

示意图：

自定义控件源码

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

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

namespace Fish.UILayer.Component
{
    /// <summary>
    /// ImageUC.xaml 的交互逻辑
    /// </summary>
    public partial class ImageButtonUC : UserControl
    {
        private Brush DOWN_BRUSH = new SolidColorBrush(Colors.Blue);
        private Brush SELECT_BRUSH = new SolidColorBrush(Colors.LightBlue);
        private Brush UNSELECT_BRUSH = new SolidColorBrush(Colors.White);
        private Brush DISABLED_BRUSH = new SolidColorBrush(Colors.LightGray);

        public event MouseButtonEventHandler ClickEvent;

        public ImageSource MyImage
        {
            get { return m_ImageBrush.ImageSource; }
            set { m_ImageBrush.ImageSource = value; }
        }

        public ImageButtonUC()
        {
            InitializeComponent();
        }

        private void UserControl_IsEnabledChanged(object sender, DependencyPropertyChangedEventArgs e)
        {
            //if (this.IsEnabled == true)
            //{
            //    m_Border.Background = UNSELECT_BRUSH;
            //}
            //else
            //{
            //    m_Border.Background = DISABLED_BRUSH;
            //}
        }
        private void UserControl_MouseEnter(object sender, MouseEventArgs e)
        {
            if (this.IsEnabled == true)
            {
                m_Border.BorderBrush = SELECT_BRUSH;
            }
        }
        private void UserControl_MouseLeave(object sender, MouseEventArgs e)
        {
            if (this.IsEnabled == true)
            {
                m_Border.BorderBrush = UNSELECT_BRUSH;
            }
        }
        private void UserControl_MouseDown(object sender, MouseButtonEventArgs e)
        {
            if (this.IsEnabled == true)
            {
                m_Border.Background = SELECT_BRUSH;
            }
        }
        private void UserControl_MouseUp(object sender, 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、纯文字按钮

效果图：

自定义控件

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

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

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

        public event MouseButtonEventHandler ClickEvent;

        public string Text
        {
            get { return m_TextBlock.Text; }
            set { m_TextBlock.Text = value; }
        }
        public double TextFontSize
        {
            get { return m_TextBlock.FontSize; }
            set { m_TextBlock.FontSize = value; }
        }
        public CornerRadius CornerRadius
        {
            get { return m_Border.CornerRadius; }
            set { m_Border.CornerRadius = value; }
        }

        public SampleButtonUC()
        {
            InitializeComponent();
        }
        private void UserControl_IsEnabledChanged(object sender, 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(object sender, MouseEventArgs e)
        {
            if (this.IsEnabled == true)
            {
                m_Border.Background = SELECT_BRUSH;
                m_TextBlock.Foreground = UNSELECT_BRUSH;
            }
        }
        private void UserControl_MouseLeave(object sender, MouseEventArgs e)
        {
            if (this.IsEnabled == true)
            {
                m_Border.Background = UNSELECT_BRUSH;
                m_TextBlock.Foreground = DOWN_BRUSH;
            }
        }
        private void UserControl_MouseDown(object sender, MouseButtonEventArgs e)
        {
            if (this.IsEnabled == true)
            {
                m_Border.Background = DOWN_BRUSH;
                m_TextBlock.Foreground = UNSELECT_BRUSH;
            }
        }
        private void UserControl_MouseUp(object sender, 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" />

 

其他效果待补充 

 

posted on 2012-08-22 15:40  daixinet.com 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/sshoub/archive/2012/08/22/2650942.html

weixin_30650859
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
WPF自定义图片按钮[ImageButtonWPF]
02-09
WPF自定义图片按钮[ImageButtonWPF] 更多资源： http://cleopard.download.csdn.net
为Button 添加图片---WPF
热门推荐
zhangjunjian127的专栏
03-07 2万+
在WPF中，让button显示为一个Image，可以设置其BackGround为Image或者Content为Image，不过这两种方法都有一些问题~~ 1、可以把Button的content设置为一个Image，不过图片的周围有个边框，影响美观~ 2、通过设置Background,不过还是有一个边框 3、重写一个ControlTemplate，并用ImagBrush 填充一个I
WPF按钮添加图片
u014090257的博客
11-03 4310
WPF Button添加图片 0、更改模板 效果： 代码： <Button x:Name="m_HelpButton" IsEnabled="True" Width="23" Height="23" Click="m_HelpButton_Click"> <Button.Template> <ControlTemplate> &lt
WPF——给button添加背景图片
weixin_41883890的博客
09-18 2555
一个可行的解决方案为，封装一个用于图片按钮的自定义按钮控件，该控件继承自Button控件，但是额外增加了一些用户图片绑定的依赖属性，同时在控件的默认外观模板中，通过TemplateBinding的方式绑定到依赖属性上，这样在使用的时候便可以直接通过绑定的方式设置图片按钮需要显示的图片，不再需要修改控件模板。其中ImageButton.xaml为默认控件模板，ImageButton.cs为控件的逻辑控制文件，其中包含了ImageButton控件所需要的新的依赖属性，包括图片源属性等。
WPF Button添加图片样式
Q_MingTao
07-24 2569
WPF 按钮添加图片样式 作者：邱名涛 撰写时间：2019 年 7 月 28 日 前台代码： <Window x:Class="WpfApplication1.LoginDes" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.m...
WPFButton样式
10-09
本资源“WPFButton样式”提供了6种不同的按钮样式，帮助开发者实现界面的美化。 1. **基础样式**： WPF 的基础按钮样式是最简单、最直接的，通常包含默认的背景色、边框和文本。在XAML中，可以通过`<Button>`标签...
WPF样式图片按钮
11-28
在Windows Presentation Foundation (WPF) 中，样式图片按钮是一种结合了图像和按钮功能的控件，它可以提供更直观、更具视觉吸引力的用户交互体验。在本文中，我们将深入探讨如何在WPF中创建和使用样式图片按钮，...
WPF图片按钮的实现方法
10-19
在Windows Presentation Foundation (WPF) 中，创建一个图片按钮是一个常见的需求，这使得用户可以通过点击图像来触发某个操作。在WPF中，我们通常通过扩展现有的控件并自定义其模板来实现这样的功能。以下是一个...
wpf image button
04-13
在WPF（Windows Presentation Foundation）中，Image Button是一种常见的用户界面元素，它结合了图像和按钮的功能，使得用户可以通过点击图像来触发相应的操作。本文将深入探讨如何在C#环境中自定义一个WPF Image ...
WPF常用的按钮样式(添加图片和设置圆角)
Hat_man_的博客
10-23 1275
【代码】WPF常用的按钮样式(添加图片和设置圆角)
WPF图片按钮
06-10
WPF图片按钮，自定义WPF按钮，移入，按住，松开各有不同图片！可以用自己喜欢的图片代替！
WPF图片按钮的封装
05-16
需求：很多时候界面上的按钮都需要被贴上图片，一般来说： 1.按钮处于正常状态，按钮具有背景图A 2.鼠标移至按钮上方状态，按钮具有背景图B 3.鼠标点击按钮状态，按钮具有背景图C 4.按钮处于不可用状态，按钮具有背景图D 实现起来，毫无疑问，没什么难度。但是过程还是比较繁琐。这里我将这个过程封装为新的控件类：ImageButton ImageButton中有四个属性（支持绑定），分别对应上面A、B、C、D四个背景图的路径。
WPF程序给按钮增加不同状态的图片
最新发布
thinbug的专栏
11-15 1038
然后在Triggers里添加代码，当Property：IsMouseOver为True的时候更换成Over；当Property：IsPressed为True的时候更换成Down；首先我们在资源里添加几个图片，Up，Over和Down状态。然后我们创建一个Style。默认我们的背景设置成Up。
WPF学习笔记——为BUTTON添加背景图片
hddfuuh的博客
11-11 1355
WPF学习笔记——为BUTTON添加背景图片
WPF 自定义图片按钮
weixin_30741653的博客
09-13 113
此文档仅仅是一个BaseCode，已做后续查阅 XAML代码： <Button x:Class="IM.UI.UC.IM_ImageButton" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas...
WPF 控件【I】ImageButton(一) ImageButton
xpj8888的博客
10-10 1474
https://blog.csdn.net/OneOnce/article/details/73105240
wpf 按钮添加图标
weixin_41012767的博客
10-27 2269
或者App.xaml不修改，直接写成下面那种。
WPF如何装图片显示在BUTTON上面
05-14
您可以使用WPF中的Image控件将图像加载到按钮上。以下是一个简单的示例： ```xml <Button> <StackPanel> <Image Source="image.png" Width="50" Height="50"/> <TextBlock Text="按钮文本"/> </StackPanel> </Button> ``` 在上述示例中，我们将一个Image控件添加到StackPanel中，并将其源设置为“image.png”。然后，我们将StackPanel作为Button的内容。这将在按钮上方添加一个图像和一个文本块。 您还可以使用样式来自定义按钮的外观，例如更改按钮的背景颜色，边框样式等。以下是一个示例按钮样式，其中图像作为按钮的背景： ```xml <Style x:Key="ImageButtonStyle" TargetType="Button"> <Setter Property="Background" Value="Transparent"/> <Setter Property="BorderThickness" Value="0"/> <Setter Property="Padding" Value="0"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Grid> <Image Source="image.png" Stretch="UniformToFill"/> <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> <Button Style="{StaticResource ImageButtonStyle}"> <TextBlock Text="按钮文本"/> </Button> ``` 在上述示例中，我们定义了一个名为"ImageButtonStyle"的样式，它的目标类型是Button。我们将按钮的边框和填充设置为0，使其看起来像一个图像。然后，我们定义了一个控件模板，其中包含一个Grid和一个Image，图像的源为“image.png”，并且将ContentPresenter放置在图像上方作为按钮的文本。 最后，我们将样式应用到按钮中，并将文本块添加到按钮中。这将创建一个带有图像背景的按钮，文本块位于图像的中心。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值