将图像集合分配给代码隐藏属性

本文关键字：代码 隐藏 属性 分配 图像 集合 | 更新日期: 2023-09-27 18:14:32

好的，所以我已经挣扎了好几天来弄清楚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>
相关文章：