1

我有一个看法：

 <Grid>
    <Canvas Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" HorizontalAlignment="Stretch" 
        VerticalAlignment="Stretch" x:Name="ImageHolder">
        <!-- there is something to do here !!! -->
        <!-- like 
             <ImageCollection>
             <DataTemplate For One Image>
                <Image Canvas.Left="{Binding Path=posX}" 
                       Canvas.Top="{Binding Path=posY}" 
                       Source="{Binding Path=fileName}"
                       x:Name="{Binding Path=fileName}"
                       MouseDown="Img_MouseDown" 
                       MouseUp="Img_MouseUp" /> 
             </DataTemplate For One Image>
             </ImageCollection> -->
     </Canvas>
 </Grid>

并且是.cs

public partial class WindowBoard : Window
{

    protected MyCollectionVM _myCollection; // this class inherits of INotifyPropertyChanged

    public WindowBoard()
    {
        InitializeComponent();
        _myCollection = new MyCollectionVM();
    }
}

我将在此 XAML 中动态添加图像，以便将 dataBinding 与我的 ViewModelClass 一起使用。

换句话说，我会知道如何使用一个 dataTemplate 图像创建一个 userControl，但对于许多图像是动态添加的。

我知道如何使用列表视图来做到这一点，但我不知道如何使用画布而不是 gridView/gridviewCellTemplate 等来做到这一点......

4

2 回答 2

1

您可以使用ItemsControl并将其ItemsPanel设置为Canvas

这将创建一个父控件（在本例中为 a Canvas），然后将遍历对象集合并将每个对象添加到父面板。ItemTemplate您可以使用属性指定如何绘制对象

请注意， aItemsControl将每个项目包装在 a 中<ContentPresenter>，因此您需要将ContentPresenter放在 Canvas 上的 中ItemContainerStyle，而不是Image本身中。

您的最终代码将如下所示：

<ItemsControl ItemsSource="{Binding MyCollectionOfImages}">
    <!-- ItemsPanelTemplate -->
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <!-- ItemContainerStyle -->
    <ItemsControl.ItemContainerStyle>
        <Style>
            <Setter Property="Canvas.Left" Value="{Binding posX}" />
            <Setter Property="Canvas.Top" Value="{Binding posY}" />
        </Style>
    </ItemsControl.ItemContainerStyle>

    <!-- ItemTemplate -->
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Image x:Name="{Binding Path=fileName}"
                   Source="{Binding Path=fileName}"
                   MouseDown="Img_MouseDown" 
                   MouseUp="Img_MouseUp" /> 
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>
于 2013-03-15T14:45:09.570 回答
0

看到这个问题

 <Window x:Class="WpfApplication1.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Width="750" Height="350" 
            FontSize="16">
        <Grid>
            <ComboBox x:Name="cb" ItemsSource="{Binding}" IsSynchronizedWithCurrentItem="True" VerticalAlignment="Top"
                      DisplayMemberPath="Title" SelectedValuePath="Image">
            </ComboBox>
            <Canvas Margin="0,50,0,0" Width="100" Height="100" >
                <Canvas.Background>
                    <ImageBrush ImageSource="{Binding ElementName=cb, Path=SelectedValue}"/>
                </Canvas.Background>
            </Canvas>
        </Grid>
    </Window>

并在 C# 中

using System.Collections.Generic;
using System.Windows;
using System.Linq;

namespace WpfApplication1
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            cb.DataContext = new[] 
            {
                new { Title="title1", Image=@"C:\img001.jpg" },
                new { Title="title2", Image=@"C:\img002.jpg" }
            };
        }
    }
}
于 2013-03-15T14:36:57.037 回答