效果如下:

wpf之lable右下角放关闭图标_wpf

 看右下角的关闭图标,丑一点就丑一点吧。

我的需求如下:

鼠标移动上去,背景颜色改变为蓝色,关闭图标出现。鼠标移动走,背景变成黑色,关闭图标隐藏。

为了实现这样一个简单的功能,我居然研究了2天,心累。。

现在把遇到的坑记录一下,留作纪念。

第一个坑

lable控件默认的坑不为0,需要把Padding="0" 设置为0 不然的话grid不会和lable

<Label Grid.Row="0" Padding="0" Focusable="False" Width="80" Height="80" Style="{StaticResource TriggerStyle}">

第二个坑:

button控件,默认会有个鼠标移动上去的悬浮操作,需要去掉,这里重新一个style,

<Style x:Key="NoMouseOverButtonStyle" TargetType="{x:Type Button}">
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Padding" Value="1"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

第三个坑:默认的button控件,会有个边框 需要设置如下

 BorderBrush="{x:Null}"

但是后来发现用了第二个style之后,边框也没有了。

第四个坑:如何在lable控件中,找到文字和button控件?

这里上一下代码

            foreach (var va in ((Grid)lb.Content).Children)
            {
                if (va is Button)
                {
                    ((Button)va).Visibility = Visibility.Collapsed;
                }
            }

 

最后上一下完整的代码

xaml里面的代码:

<Window x:Class="WpfPictureClick.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:WpfPictureClick"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <Style x:Key="EventStyle">
            <EventSetter Event="Label.MouseEnter" Handler="FrameworkElement_MouseEnter"></EventSetter>
            <EventSetter Event="Label.MouseLeave" Handler="FrameworkElement_MouseLeave"></EventSetter>
        </Style>
        <Style x:Key="TriggerStyle" >
            <Style.Triggers>
                <Trigger Property="Label.IsMouseOver" Value="True">
                    <Setter Property="Label.Background" Value="#1F31A5">
                    </Setter>
                </Trigger>
                <Trigger Property="Label.IsMouseOver" Value="false">
                    <Setter Property="Label.Background" Value="Black"></Setter>
                </Trigger>
            </Style.Triggers>
            <EventSetter Event="Label.MouseEnter" Handler="FrameworkElement_MouseEnter"></EventSetter>
            <EventSetter Event="Label.MouseLeave" Handler="FrameworkElement_MouseLeave"></EventSetter>
        </Style>
        <Style x:Key="NoMouseOverButtonStyle" TargetType="{x:Type Button}">
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Padding" Value="1"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Label Grid.Row="0" Padding="0" Focusable="False" Width="80" Height="80" Style="{StaticResource TriggerStyle}">
            <Grid Width="80" Height="80">
                <Label Background="Transparent" Foreground="#C9C9C9" VerticalAlignment="Center" HorizontalAlignment="Center">33333</Label>
                <Button Style="{StaticResource NoMouseOverButtonStyle}"  Click="Button_Click"
                        Visibility="Collapsed" Padding="0" Width="22" Height="22" HorizontalAlignment="Right" VerticalAlignment="Bottom">
                    <Button.Background>
                        <ImageBrush  ImageSource="OFF_GRAY.PNG" ></ImageBrush>
                    </Button.Background>
                </Button>
            </Grid>
        </Label>
        <Button Grid.Row="1" Width="80" Height="80" Content="3333"></Button>
    </Grid>
</Window>

 

cs代码:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
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 WpfPictureClick
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

        }

        public void FrameworkElement_MouseEnter(object sender, MouseEventArgs e)
        {
            var lb = ((Label)sender);
            foreach(var va in ((Grid)lb.Content).Children)
            {
                if(va is Button)
                {
                    ((Button)va).Visibility =  Visibility.Visible;
                }
            }
            //((Button)sender).Background = new SolidColorBrush(Color.FromArgb(0xFF, 0x2c, 0x2c, 0x2c));
        }

        private void FrameworkElement_MouseLeave(object sender, MouseEventArgs e)
        {
            //((Button)sender).Background = new SolidColorBrush(Color.FromArgb(0xFF, 0x12, 0x57, 0x90));
            var lb = ((Label)sender);
            foreach (var va in ((Grid)lb.Content).Children)
            {
                if (va is Button)
                {
                    ((Button)va).Visibility = Visibility.Collapsed;
                }
            }
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            int a = 0;
        }
    }
}