1

我有这个项目，我想通过将自定义控件（inSignalLight）添加到列表框（或其他一些控件，我只想将它们排列起来）来为我的屏幕设置一些图像。我已经在自定义控件中设置了图像并将它们添加到“ObservableCollection”中，但没有显示任何内容。我对 WPF 真的很陌生，所以不太确定 xaml 是否正确......如果有更好的方法可以在列表框中执行此操作，请也告诉我。

inSignalLights = new ObservableCollection<inSignalLight>();

这是我想在其中显示图片的页面中的 xaml。

<Page x:Class="Project.Pages.MainPicView"
  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" 

  HorizontalAlignment="Stretch"
  VerticalAlignment="Stretch"
  Background="Beige"
Title="MainPicView" d:DesignHeight="343" d:DesignWidth="676">

<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
    <Label Content="Label" Height="30" HorizontalAlignment="Left" Margin="61,195,0,0" Name="label1" VerticalAlignment="Top" Width="164" />
    <ListBox ItemsSource="{Binding Path=inSignalLights}" Width="400" Height="25" Margin="0,0,0,0" VerticalAlignment="Top" HorizontalAlignment="Left">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel IsItemsHost="True"/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
    </ListBox>
</Grid>
</Page>

编辑：

这是自定义控件的 xaml

<UserControl x:Class="Project.CustomControls.inSignalLight"
         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" 
         d:DesignHeight="16" d:DesignWidth="16">
<Grid>
    <Image Height="16" HorizontalAlignment="Left" Margin="0,0,0,0" Name="signalImage" Stretch="Fill" VerticalAlignment="Top" Width="16" />
</Grid>
</UserControl>

编辑：

for (int i = 0; i < inpins; i++)
        {
            InPin ip = iFace.getInPin(i);
            parent.insertNewSignalLight(ip);
        }

public void insertNewSignalLight(InPin ip)
    {
        inSignalLight isl = new inSignalLight(ip);
        isl.setLightOff();
        this.inSignalLights.Add(isl.signalImage);
    }
public void setLightOff()
    {
        setThreadSafeImage(signalImage);
    }

    private void gotLightSignal(InPin pin, EventArgs e)
    {
        Thread.CurrentThread.Join(200);
        if (pin.PinState == 1)
            setLightOn();
        else
            setLightOff();
    }
    public void setThreadSafeImage(Image iS)
    {
        string strUri2 = String.Format(@"pack://application:,,,/;component/Images/Signal_Gron_16.png");
        BitmapImage img = new BitmapImage(new Uri(strUri2));
        img.Freeze();

        iS.Dispatcher.BeginInvoke(
                    DispatcherPriority.Background,
                        new Action(() => iS.Source = img));

    }
4

2 回答 2

1

那么实际上在你的情况下（如果你的控制保持那么简单），你不需要 a CustomControl，顺便说一句，你的例子是恕我直言UserControl，无论如何。

您可以简单地声明一个DataTemplate. 例如

<ListBox ItemsSource="{Binding YourCollectionInDataContext}"...>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Image Source="{Binding SomePropertyOfYourItemVm1}"/>
                <TextBlock Text="{Binding SomePropertyOfYourItemVm2}"/>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

如需更多信息，请参阅此处。

UserControlsCustomControls只有在没有其他可能实现所需功能的情况下，才应使用（控件的组合）和（扩展现有控件）。这是一篇关于这两种控件的好文章。

于 2013-05-24T11:46:01.450 回答
1

你应该ObservableCollection<ImageSource> Images 在你的 ViewModel 中有。我认为您的 UserControl with Image 是不必要的。

您必须在 ListBox 中定义 ItemTemplate：

<ListBox ItemsSource="{Binding Path=Images}" Width="400" Height="25" Margin="0,0,0,0" VerticalAlignment="Top" HorizontalAlignment="Left">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel IsItemsHost="True"/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Image Height="16" HorizontalAlignment="Left" Margin="0,0,0,0" Stretch="Fill" VerticalAlignment="Top" Width="16" Source="{Binding}" />
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

以及如何填充集合图像？这很容易。在循环中添加 BitmapImage 实例，如：

BitmapImage bi = new BitmapImage();
bi.BeginInit();
bi.UriSource = new Uri(@"/Images/image_file.png", UriKind.RelativeOrAbsolute);
bi.EndInit();
于 2013-05-24T11:38:10.437 回答