关闭

WPF BUTTON

310人阅读 评论(0) 收藏 举报
分类:

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" />

 

其他效果待补充
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:77481次
    • 积分:1087
    • 等级:
    • 排名:千里之外
    • 原创:10篇
    • 转载:106篇
    • 译文:0篇
    • 评论:8条
    最新评论