带有Image属性的WPF UserControl
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了带有Image属性的WPF UserControl相关的知识,希望对你有一定的参考价值。
我有一个UserControl库,其中包含一个用户控件,可以为Windows创建自定义标题栏。我给这个标题栏两个依赖属性 - 标题和图标,我希望能够通过DLL使用控件时设置。
我已经正确地使用了标题,因此当我设置Window的ViewModel的Title属性时,它会被填充到标题栏中。但是,我无法让图像做同样的事情。
我尝试了各种各样的变体,并阅读了关于使用依赖属性的整个过程,但我似乎无法让图像显示出来。我尝试过使用ImageSource属性,项目资源和图像,但我得到的只是一个空白。你能指出我正确的方向来解决这个问题吗?
这是用户控件的xaml(I Read我必须使用TemplatedParent RelativeSource用于DP,因此放入 - 我相信这将引用实现中的MainViewModel):
<UserControl x:Class="WPFLibrary.User_Controls.TitleBar"
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">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/WPFLibrary;component/Styles/Buttons.xaml"/>
<ResourceDictionary Source="pack://application:,,,/WPFLibrary;component/Styles/Gradients.xaml"/>
<ResourceDictionary Source="pack://application:,,,/WPFLibrary;component/Styles/Text.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<DockPanel VerticalAlignment="Top" Grid.Row="0" Grid.ColumnSpan="3"
MouseDown="TitleBar_MouseDown"
DataContext="{Binding}"
Background="{StaticResource WindowTitleBar}">
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="90"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="1" Source="{Binding Icon,RelativeSource={RelativeSource TemplatedParent}}"/>
<TextBlock x:Name="Title_Bar"
Grid.Column="3"
Text="{Binding Title}"
Style="{StaticResource Text_WindowTitle}">
</TextBlock>
<!--StackPanel Containing the buttons excluded for SO Question-->
</Grid>
</DockPanel>
</UserControl>
以下是同一控件背后的代码(从其他一些SO答案开始,我尝试使用项目资源和ImageSource作为Image属性,但无济于事):
using System.ComponentModel;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
namespace WPFLibrary.User_Controls
{
/// <summary>
/// Interaction logic for TitleBar.xaml
/// </summary>
public partial class TitleBar : UserControl, INotifyPropertyChanged
{
public Image Icon
{
get { return (Image)GetValue(IconProperty); }
set { SetValue(IconProperty, value); }
}
// Using a DependencyProperty as the backing store for Icon. This enables animation, styling, binding, etc...
public static readonly DependencyProperty IconProperty = DependencyProperty.Register("Icon", typeof(Image), typeof(TitleBar) );
private static PropertyChangedEventArgs _stateChange = new PropertyChangedEventArgs("Windowstate");
public WindowState _windowState;
public WindowState Windowstate
{
get
{ return _windowState; }
set
{
_windowState = value;
NotifyChange(_stateChange);
}
}
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyChange(PropertyChangedEventArgs e)
{
PropertyChanged?.Invoke(this, e);
}
public TitleBar()
{
InitializeComponent();
}
//Button Click Methods excluded for SO question
}
}
用于实现usercontrol的xaml是这样的 - 我将绑定设置为MainViewModel;它有一个设置属性的构造函数。
<Window x:Class="Demo_of_WPF_Library.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:uc="clr-namespace:WPFLibrary.User_Controls;assembly=WPFLibrary"
xmlns:vm="clr-namespace:Demo_of_WPF_Library.ViewModel"
mc:Ignorable="d"
WindowStyle="None"
BorderBrush="{StaticResource WindowBackgroundBrush}"
x:Name="Main_Window"
WindowState="{Binding Windowstate,ElementName=Titlebar}"
Background="{StaticResource WindowBackgroundBrush}"
Height="300" Width="800">
<Window.DataContext>
<vm:MainView_Model/>
</Window.DataContext>
<Grid>
<uc:TitleBar Name="Titlebar" Icon="{Binding Icon}">
</uc:TitleBar>
</Grid>
</Window>
以下是MainView_Model的代码,其中包含主窗口的属性:
namespace Demo_of_WPF_Library.ViewModel
{
public class MainView_Model
{
private string _title;
public string Title
{
get { return _title; }
set { _title = value; }
}
private Image _icon;
public Image Icon
{
get { return _icon; }
set { _icon = value; }
}
public MainView_Model()
{
Title = "Demo WPF Library";
Icon = new Image();
Icon.Source = new BitmapImage(new Uri("/View/Images/IsItOk.ico",UriKind.Relative));
}
}
}
最后,这是mainwindow背后的代码,它设置与MainViewModel的绑定并初始化窗口:
public partial class MainWindow : Window
{
public MainView_Model MainView { get; set; }
public MainWindow()
{
MainView = new MainView_Model();
DataContext = MainView;
InitializeComponent();
}
}
老实说,我无法看到这里缺少/错误的东西,我已经阅读了大量的文章,问题和答案,基本上似乎说我正在以正确的方式做事......那么究竟什么是错的?
问题是你的XAML中有一个Image,它试图绑定到视图模型中的Image。像Image
这样的GUI对象在视图模型层中没有位置,将Icon
依赖属性更改为ImageSource
类型并将XAML图像绑定到该对象。
你的绑定是错误的。如果没有模板,则不应使用TemplatedParent
。使用:
xmlns:local="clr-namespace:WPFLibrary.User_Controls"
<Image Grid.Column="1" Source="{Binding Icon, RelativeSource={RelativeSource AncestorType=local:TitleBar}}"/>
以上是关于带有Image属性的WPF UserControl的主要内容,如果未能解决你的问题,请参考以下文章
WPF:带有 2 个(或更多!)ContentPresenters 的模板或 UserControl 以在“插槽”中呈现内容
WPF ----在UserControl的xaml里绑定依赖属性
WPF 在 GridViewColumn.CellTemplate 的 DataTemplate 中绑定 UserControl 属性