WPF 入门教程图片控件

最新推荐文章于 2024-08-16 18:04:50 发布

有技巧搬砖

最新推荐文章于 2024-08-16 18:04:50 发布

阅读量780

点赞数

分类专栏： MVVM UI设计 c# WPF 文章标签： wpf c# windows

本文链接：https://blog.csdn.net/liaohaiyin/article/details/120537737

版权

MVVM 同时被 3 个专栏收录

92 篇文章 18 订阅

订阅专栏

UI设计

92 篇文章 9 订阅

订阅专栏

c# WPF

92 篇文章 24 订阅

订阅专栏

WPFImage控件将允许您在应用程序中显示图像。这是一个非常通用的控件，具有许多有用的选项和方法，您将在本文中了解到。但首先，让我们看看在 Window 中包含图像的最基本示例：

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

该来源的资源，这是我们在这个例子中用来指定要显示的图像，可能是这种控制的最重要的属性，所以让我们深入讨论这个问题，开始说起。

源属性

从我们的第一个示例中可以看出，Source属性可以轻松指定应在 Image 控件内显示的图像 - 在此特定示例中，我们使用了远程图像，Image 控件将立即自动获取并显示该图像当它变得可见时。这是 Image 控件多功能性的一个很好的例子，但在很多情况下，您可能希望将图像与您的应用程序捆绑在一起，而不是从远程源加载它。这可以很容易地完成！

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

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

这些 URI，通常被称为“ Pack URI ”，是一个包含更多细节的，但现在，请注意它基本上由两部分组成：

第一部分（/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);
    }
}

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

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>

拉伸属性

在 Source 属性之后，由于显而易见的原因很重要，我认为 Image 控件的第二个最有趣的属性可能是Stretch属性。它控制当加载的图像的尺寸与Image控件的尺寸不完全匹配时发生的情况。这将一直发生，因为您的 Windows 的大小可以由用户控制，除非您的布局非常静态，否则这意味着 Image 控件的大小也会发生变化。

从下一个示例中可以看出，Stretch 属性可以对图像的显示方式产生很大的影响：

<Window x:Class="WpfTutorialSamples.Basic_controls.ImageControlStretchSample"
    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="ImageControlStretchSample" Height="450" Width="600">
    <Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Label Grid.Column="0" HorizontalAlignment="Center" FontWeight="Bold">Uniform</Label>
    <Label Grid.Column="1" HorizontalAlignment="Center" FontWeight="Bold">UniformToFill</Label>
    <Label Grid.Column="2" HorizontalAlignment="Center" FontWeight="Bold">Fill</Label>
    <Label Grid.Column="3" HorizontalAlignment="Center" FontWeight="Bold">None</Label>
    <Image Source="/Images/white_bengal_tiger.jpg" Stretch="Uniform" Grid.Column="0" Grid.Row="1" Margin="5" />
    <Image Source="/Images/white_bengal_tiger.jpg" Stretch="UniformToFill" Grid.Column="1" Grid.Row="1" Margin="5" />
    <Image Source="/Images/white_bengal_tiger.jpg" Stretch="Fill" Grid.Column="2" Grid.Row="1" Margin="5" />
    <Image Source="/Images/white_bengal_tiger.jpg" Stretch="None" Grid.Column="3" Grid.Row="1" Margin="5" />
    </Grid>
</Window>

可能有点难以判断，但所有四个 Image 控件都显示相同的图像，但 Stretch 属性的值不同。以下是各种模式的工作方式：

Uniform：这是默认模式。图像将自动缩放以适合图像区域。图像的纵横比将被保留。

UniformToFill：图像将被缩放以完全填充图像区域。图像的纵横比将被保留。

Fill：图像将被缩放以适合图像控件的区域。纵横比可能不会被保留，因为图像的高度和宽度是独立缩放的。

None：如果图像小于图像控件，则什么都不做。如果它大于 Image 控件，图像将被简单地裁剪以适合 Image 控件，这意味着它只有一部分是可见的。

概括

WPF Image控件使您可以轻松地在应用程序中显示图像，无论是来自远程源、嵌入式资源还是来自本地计算机，如本文所示。