C#wpf的image控件的使用

对WPF没有WINFORM熟悉 所以多学习一下多做做笔记

看到一篇非常详细又很有用的 我截取了文章的一部分供大家一起参考学习

WPF的Image控件允许您在应用程序内显示图片。 它是一个非常通用的控件,有许多有用的选项和方法,正如您将在本文中学到的。 但首先,让我们看一下在窗口中包含图片的最基本示例:

<Image Source="https://upload.wikimedia.org/wikipedia/commons/3/30/Googlelogo.png" />

结果将如下所示:

我们在此示例中用于指定应显示图片的Source属性可能是此控件的最重要属性,因此我们首先深入研究该主题。

Source属性

从我们的第一个例子中可以看出,Source属性可以很容易地指定在Image控件中应该显示哪个图片 - 在这个特定的例子中,我们使用了一个远程图片,Image控件会自动获取和显示它。 这是Image控件功能多样化的一个很好的例子,但在很多情况下,您可能希望将图片与应用程序捆绑在一起,而不是从远程源加载它。 这可以很容易地完成!

您可能知道,您可以将资源文件添加到项目中 - 它们可以存在于您当前的Visual Studio项目中,并且可以像解决任何其他WPF相关文件(窗口,用户控件等)一样在解决方案资源管理器中查看。 资源文件的相关示例是一个图片,您只需将其复制到项目的相关文件夹中即可将其包含在内。 然后它将被编译到您的应用程序中(除非您特别要求VS不要这样做),然后可以使用URL格式访问资源。 因此,如果您在名为“Images”的文件夹中有一个名为“google.png”的图片,则语法可能如下所示:

<Image Source="/WpfTutorialSamples;component/Images/google.png" />

 

这些URI通常被称为“Pack URI's”,是一个含有更多细节的重要主题,但是现在,请注意它基本上由两部分组成:

  • 第一部分(/WpfTutorialSamples;component),其中程序集名称(我的应用程序中的WpfTutorialSamples)与单词“component”组合
  • 第二部分,指定资源的相对路径:/Images/google.png

使用此语法,您可以轻松引用应用程序中包含的资源。 为简化起见,WPF框架也接受简单的相对URL - 这在大多数情况下都是足够的,除非你在应用程序中做了一些更复杂的资源。 使用简单的相对URL,它看起来像这样:

<Image Source="/Images/google.png" />

动态加载图片(后置代码)

直接在XAML中指定图片源可以解决很多情况,但有时您需要动态加载图片,例如 基于用户选择。 这可以从后置代码做到。 以下是根据从OpenFileDialog中选择的方式加载用户计算机上的图片的方法:

private void BtnLoadFromFile_Click(object sender, RoutedEventArgs e)
{
    OpenFileDialog openFileDialog = new OpenFileDialog();
    if(openFileDialog.ShowDialog() == true)
    {
    Uri fileUri = new Uri(openFileDialog.FileName);
    imgDynamic.Source = new BitmapImage(fileUri);
    }
}

请注意我是如何根据对话框中选定的路径创建一个传递Uri对象的BitmapImage实例。 我们可以使用完全相同的技术将应用程序中包含的图片作为资源加载:

private void BtnLoadFromResource_Click(object sender, RoutedEventArgs e)
{
    Uri resourceUri = new Uri("/Images/white_bengal_tiger.jpg", UriKind.Relative);
    imgDynamic.Source = new BitmapImage(resourceUri);        
}

我们使用与前面一个示例中使用的相同的相对路径 - 只需确保在创建Uri实例时传入UriKind.Relative值,因此它知道提供的路径不是绝对路径。 以下是我们的后置代码示例的XAML源代码以及屏幕截图:

<Window x:Class="WpfTutorialSamples.Basic_controls.ImageControlCodeBehindSample"
    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:WpfTutorialSamples.Basic_controls"
    mc:Ignorable="d"
    Title="ImageControlCodeBehindSample" Height="300" Width="400">
    <StackPanel>
    <WrapPanel Margin="10" HorizontalAlignment="Center">
        <Button Name="btnLoadFromFile" Margin="0,0,20,0" Click="BtnLoadFromFile_Click">Load from File...</Button>
        <Button Name="btnLoadFromResource" Click="BtnLoadFromResource_Click">Load from Resource</Button>
    </WrapPanel>
    <Image Name="imgDynamic" Margin="10"  />
    </StackPanel>
</Window>

文章原网页:WPF教程之 Image控件_Vue5教程icon-default.png?t=M4ADhttp://www.vue5.com/wpf/Image.html

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值