Question

我试图使用Wpf显示图像。我无法对XAML文件中的图像进行硬编码，我只能在.cs文件中实现它。（动态显示图像）

这是我到目前为止所得到的：

ImageSource imageSource = new BitmapImage(new Uri(@"C:/Users/Pierrick/Desktop/tileset/1.png"));
System.Windows.Controls.Image image1 = new System.Windows.Controls.Image();
image1.Source = imageSource;

代码运行正常，但没有显示。毫不奇怪，我没有在窗口中指定图像位置，但我不知道该怎么做。

提前感谢您的帮助！

Answer 1

它实际上取决于容器的布局，例如，如果要将图像添加到网格中，假设您的窗口如下所示：

<Grid x:Name="Grid1">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>            
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

</Grid>

在此处以编程方式将图像添加到Grid1：

            ImageSource imageSource = new BitmapImage(new Uri("yep.png",UriKind.Relative));
        System.Windows.Controls.Image image1 = new System.Windows.Controls.Image();
        image1.Source = imageSource;
        Grid.SetColumn(image1, 0);//image1 is added to column 0
        Grid.SetRow(image1, 0);//row 0

        Grid1.Children.Add(image1);

Answer 2

您必须将Image控件添加到应用程序中的某个布局面板。假设你有一个像这样的MainWindow XAML：

<Window ...>
    <Grid x:Name="rootGrid">
    </Grid>
</Window>

您可以通过

将图像添加到网格的子集合中

rootGrid.Children.Add(image1);

如果要在特定位置动态放置多个图像，通常会使用带有适当视图模型的ItemsControl，它使用Canvas作为其ItemsPanel，并通过绑定Canvas.Left来设置每个图像项的位置ItemContainerStyle中包含Canvas.Top个属性。它会在ItemTemplate中使用Image控件：

<ItemsControl ItemsSource="{Binding ImageItems}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="ContentPresenter">
            <Setter Property="Canvas.Left" Value="{Binding X}"/>
            <Setter Property="Canvas.Top" Value="{Binding Y}"/>
        </Style>
    </ItemsControl.ItemContainerStyle>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Image Width="{Binding Width}"
                    Height="{Binding Height}"
                    Source="{Binding Image}"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

视图模型如下所示：

public class ImageItem
{
    public double X { get; set; }
    public double Y { get; set; }
    public double Width { get; set; }
    public double Height { get; set; }
    public ImageSource Image { get; set; }
}

public class ViewModel
{
    public ObservableCollection<ImageItem> ImageItems { get; set; }
}

正如您所看到的，ItemsControl的ItemsSource属性绑定到视图模型的ImageItems属性。项绑定转到数据项类ImageItem的属性，即集合的元素类型。

您现在可以创建视图模型的实例，例如在MainWindow的构造函数中，并将其分配给DataContext：

public MainWindow()
{
    InitializeComponent();

    var vm = new ViewModel
    {
        ImageItems = new ObservableCollection<ImageItem>()
    };

    vm.ImageItems.Add(new ImageItem
        {
            X = 100,
            Y = 100,
            Width = 100,
            Height = 100,
            Image = new BitmapImage(new Uri(...))
        });

    DataContext = vm;
}

Wpf - 不使用XAML文件显示图像

2 个答案: