vs2017 wpf 自定义控件依赖属性显示无效标记

Z时代
2024-01-10
分类：技术分享

我想做一个类似Dbeaver的东西,现在新建连接这一步自定义了一个控件,目标效果如下所示,从左到右依次是选中状态,鼠标悬停状态,未选中状态
vs2017 wpf 自定义控件依赖属性显示无效标记
自定义控件cs代码

using log4net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
namespace database_manager
{
/// <summary>
/// DatabaseItemSelectorButton.xaml 的交互逻辑
/// </summary>
public partial class DatabaseItemSelectorButton : UserControl
{
ILog log = LogManager.GetLogger(typeof(DatabaseItemSelectorButton));
public static readonly DependencyProperty DatabaseNameProperty = DependencyProperty.Register("DatabaseName",
typeof(string), typeof(DatabaseItemSelectorButton), new PropertyMetadata("", new PropertyChangedCallback(OnDatabaseNamePropertyChange)));
public static readonly DependencyProperty ImagePathProperty = DependencyProperty.Register("ImagePath",
typeof(string), typeof(DatabaseItemSelectorButton), new PropertyMetadata("", new PropertyChangedCallback(OnImagePathPropertyChange)));
/// <summary>
/// 是否选中
/// </summary>
public bool Checked { get; set; }
/// <summary>
/// 图片路径
/// </summary>
public string ImagePath
{
get { return (string)GetValue(ImagePathProperty); }
set { SetValue(ImagePathProperty, value); }
}
/// <summary>
/// 名称
/// </summary>
public string DatabaseName
{
get { return (string)GetValue(DatabaseNameProperty); }
set { SetValue(DatabaseNameProperty, value); }
}
public DatabaseItemSelectorButton()
{
InitializeComponent();
this.Checked = false;
this.DatabaseName = "";
this.ImagePath = "";
}
/// <summary>
/// 选中时
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void on_checked(object sender, RoutedEventArgs e)
{
Label label = this.FindName("label") as Label;
log.Info(StrUtil.format("选中"));
}
static void OnDatabaseNamePropertyChange(DependencyObject sender, DependencyPropertyChangedEventArgs args)
{
DatabaseItemSelectorButton selectorBtn = (DatabaseItemSelectorButton)sender;
selectorBtn.label.Content = args.NewValue.ToString();
}
static void OnImagePathPropertyChange(DependencyObject sender, DependencyPropertyChangedEventArgs args)
{
DatabaseItemSelectorButton selectorBtn = (DatabaseItemSelectorButton)sender;
}
/// <summary>
/// 鼠标悬停改变背景色与标签颜色
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void selector_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)
{
if(!Checked)
{
// 鼠标悬停且为没有被选中
this.Background = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#4CA0E3"));
}
else
{
// 鼠标悬停且为选中状态
this.Background = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#0078D7"));
}
// 无论是否选中,label一律设置为白色
(FindName("label") as Label).Foreground = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#FFFFFF"));
}
/// <summary>
/// 鼠标离开还原背景色与标签颜色
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void selector_MouseLeave(object sender, System.Windows.Input.MouseEventArgs e)
{
if (!Checked)
{
// 如果未选中,鼠标离开时还原背景色与标签颜色
this.Background = null;
(FindName("label") as Label).Foreground = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#000000"));
}
}
/// <summary>
/// 鼠标按下
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void selector_MouseDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
if(!Checked)
{
// 未选中时的颜色
this.Background = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#0078D7"));
(FindName("label") as Label).Foreground = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#FFFFFF"));
Checked = true;
}
else
{
// 选中时的颜色
this.Background = null;
(FindName("label") as Label).Foreground = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#FFFFFF"));
Checked = false;
}
}
}}

自定义控件xaml代码

<UserControl x:Class="database_manager.DatabaseItemSelectorButton"
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"
xmlns:khl="clr-namespace:database_manager"
mc:Ignorable="d"
d:DesignHeight="110" d:DesignWidth="100" Padding="5" MouseEnter="selector_MouseEnter" MouseLeave="selector_MouseLeave" MouseDown="selector_MouseDown">
<!--
鼠标悬停背景色 #4CA0E3
选中背景色 #0078D7
-->
<StackPanel Orientation="Vertical">
<Image Name="image" Source="{Binding Path=ImagePath, RelativeSource= {RelativeSource AncestorType={x:Type khl:DatabaseItemSelectorButton }}}" Height="70"/>
<!--<Label Name="label" Margin="0 5 0 0" Content="{Binding Path=DatabaseName, RelativeSource= {RelativeSource AncestorType={x:Type khl:DatabaseItemSelectorButton }}}" HorizontalContentAlignment="Center" Foreground="#ffffff"  />-->
<Label Name="label" Margin="0 5 0 0" Content="{Binding DatabaseName}" HorizontalContentAlignment="Center" />
</StackPanel></UserControl>

引用自定义控件xaml代码

<Window x:Class="database_manager.NewLink"
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:khl="clr-namespace:database_manager"
mc:Ignorable="d"
Title="创建新连接" Height="450" Width="800">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" >
<Button>选择与显示</Button>
</Grid>
<Grid Grid.Row="1" >
<TabControl TabStripPlacement="Left">
<TabItem Header="sql" >
<ScrollViewer VerticalScrollBarVisibility="Auto">
<WrapPanel Orientation="Horizontal">
<khl:DatabaseItemSelectorButton DatabaseName="mysql" ImagePath="/icon/icon_mysql.png"/>
<khl:DatabaseItemSelectorButton DatabaseName="oralce" ImagePath="/icon/icon_oracle.png"/>
<khl:DatabaseItemSelectorButton DatabaseName="sqlite" ImagePath="/icon/icon_sqlite.png"/>
</WrapPanel>
</ScrollViewer>
</TabItem>
<TabItem Header="java" ></TabItem>
</TabControl>
</Grid>
<Grid Grid.Row="2" >
<Button>下一步</Button>
</Grid>
</Grid></Window>