Wpf

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;

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

在此先感谢您的帮助！

Answer 1

这实际上取决于您的容器的布局，例如，如果您想将图像添加到网格，假设您的 window 看起来像这样：

<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

您必须将图像控件添加到应用程序中的某些布局面板。假设您有一个像这样的主窗口 XAML：

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

您可以通过

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

rootGrid.Children.Add(image1);

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

<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 属性。项绑定转到数据项的属性 class 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 文件的情况下显示图像

Wpf - Display an image without using XAML file

c#

image