好的,所以我已经挣扎了好几天来弄清楚XAML实际上是如何处理集合的,每次我尝试DependencyProperty方法时,属性都是空的。当我使用ObservableCollection,并在XAML中为其分配数组类型时,我得到一条消息,指出类型ArrayExtension不能分配给集合或字典。
所以我现在坐在一个点上,我不知道我不知道什么,但我知道我的目标。
我想在代码后面将类型<Image />
的多个元素分配给我的集合,并且我必须能够识别(最好是整数)哪个"图像"在集合中被引用。
首选XAML格式。
<cc:MyControl.States>
<Image Source="{StaticResource PointBulletIconImage}" />
<Image Source="{StaticResource PointNumberIconImage}" />
</cc:MyControl.States>
期望功能后面的代码
this.Image = States[CurrentState];
你的控件应该声明一个属性来保存ImageSource
对象的集合,而不是图像控件的集合,如
public partial class MyControl : UserControl
{
public List<ImageSource> States { get; } = new List<ImageSource>();
...
}
你现在可以像这样在XAML中添加位图资源:
<cc:MyControl>
<cc:MyControl.States>
<StaticResource ResourceKey="PointBulletIconImage"/>
<StaticResource ResourceKey="PointNumberIconImage"/>
</cc:MyControl.States>
</cc:MyControl>
MyControl的XAML将声明一个Image
控件,例如命名为"image"
<Image x:Name="image"/>
,您将在后面的代码中设置其Source
属性,如下所示:
image.Source = States[0];
好吧,按照Clemens的建议,我算出来了。问题是,我没有等到元素加载之后才"等待"。它初始化组件,然后接受值,我忘记了。因此,被分配的值还不存在。Clemen的解决方案是使用ImageSource的可观察对象集合,但我必须等到控件加载。
public ImageSource ImageSource {
get {
return GetValue(ImageSourceProperty) as ImageSource;
}
set {
SetValue(ImageSourceProperty, value);
}
}
public ObservableCollection<ImageSource> States { get; } = new ObservableCollection<ImageSource>();
public int CurrentState { get; set; }
public static readonly DependencyProperty ImageSourceProperty = DependencyProperty.Register("ImageSource", typeof(ImageSource), typeof(PointButton));
public PointButton( ) {
CurrentState = 0;
InitializeComponent( );
Loaded += PointButton_Loaded;
}
private void PointButton_Loaded(object sender, RoutedEventArgs e) {
PreviewMouseUp += PointButton_MouseUp;
UpdateLayout( );
if(States == null)
Console.WriteLine("States is null");
else
ImageSource = States[CurrentState];
}
private void PointButton_MouseUp(object sender, MouseButtonEventArgs e) {
if(CurrentState == States.Count - 1)
CurrentState = 0;
else
CurrentState += 1;
ImageSource = States[CurrentState];
}
}
XAML
<Button x:Class="Notes.Views.Controls.PointButton"
x:Name="RootElement"
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:local="clr-namespace:Notes.Views.Controls"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300"
>
<Button.Template>
<ControlTemplate>
<Image Source="{Binding ImageSource, ElementName=RootElement}" />
</ControlTemplate>
</Button.Template>
所以,我让它工作。谢谢大家的回复:)
给定您的名字,我怀疑您期望的行为是根据状态属性显示不同的图标,在这种情况下,您真的希望尽可能地将代码留在后面。
我建议使用一个值转换器,在这里输入状态并获得图像源或URI,然后将图像源绑定到状态属性
是一个完整的示例注意:示例使用c#6语法
WPF:
<Window x:Class="WpfApplication1.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:WpfApplication1"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<BitmapImage x:Key="img1" UriSource="someimg1.png" />
<BitmapImage x:Key="img2" UriSource="someimg2.png" />
<BitmapImage x:Key="img3" UriSource="someimg3.png" />
<BitmapImage x:Key="img4" UriSource="someimg4.png" />
<BitmapImage x:Key="img5" UriSource="someimg5.png" />
<local:StateImageConverter
x:Key="StateImageConverter"
State1Image="{StaticResource img1}"
State2Image="{StaticResource img2}"
State3Image="{StaticResource img3}"
State4Image="{StaticResource img4}"
State5Image="{StaticResource img5}"/>
</Window.Resources>
<Window.DataContext>
<local:VeiwModel x:Name="viewModel" />
</Window.DataContext>
<StackPanel>
<ComboBox ItemsSource="{Binding AllStates}" SelectedValue="{Binding State}"/>
<Image Source="{Binding State, Converter={StaticResource StateImageConverter}}" />
</StackPanel>
</Window>
代码:public enum States
{
State1,
State2,
State3,
State4,
State5,
}
public class StateImageConverter : IValueConverter
{
public ImageSource State1Image { get; set; }
public ImageSource State2Image { get; set; }
public ImageSource State3Image { get; set; }
public ImageSource State4Image { get; set; }
public ImageSource State5Image { get; set; }
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
var state = value as States?;
if(state.HasValue)
{
switch (state.Value)
{
case States.State1:
return State1Image;
case States.State2:
return State2Image;
case States.State3:
return State3Image;
case States.State4:
return State4Image;
case States.State5:
return State5Image;
default:
throw new InvalidCastException();
}
}
else
throw new NotImplementedException();
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
//one way only
throw new NotImplementedException();
}
}
public class VeiwModel : System.ComponentModel.INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private States state;
public States State
{
get { return state; }
set
{
state = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("State"));
}
}
public IEnumerable<States> AllStates=> Enum.GetValues(typeof(States)).OfType< States>();
}
或者如果你不想使用命名属性,那么使用列表的变体如下:
public class StateImageConverter : IValueConverter
{
public ObservableCollection<ImageSource> Images { get; set; } = new ObservableCollection<ImageSource>();
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
var state = value as States?;
if(state.HasValue)
{
return Images[(int)state.Value];
}
else
throw new NotImplementedException();
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
//one way only
throw new NotImplementedException();
}
}
定义为
<local:StateImageConverter
x:Key="StateImageConverter">
<local:StateImageConverter.Images>
<BitmapImage UriSource="someimg1.png" />
<BitmapImage UriSource="someimg2.png" />
<BitmapImage UriSource="someimg3.png" />
<BitmapImage UriSource="someimg4.png" />
<BitmapImage UriSource="someimg5.png" />
</local:StateImageConverter.Images>
</local:StateImageConverter>