效果如下:
看右下角的关闭图标,丑一点就丑一点吧。
我的需求如下:
鼠标移动上去,背景颜色改变为蓝色,关闭图标出现。鼠标移动走,背景变成黑色,关闭图标隐藏。
为了实现这样一个简单的功能,我居然研究了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;
}
}
}