如何使图像拉伸以填充此 WPF / XAML 应用程序？答案

【问题标题】：How do I make an image stretch to fill in this WPF / XAML application?如何使图像拉伸以填充此 WPF / XAML 应用程序？
【发布时间】：2011-12-20 16:48:29
【问题描述】：

当我的程序显示的图像小于 XAML 中定义的图像 GUI 对象时，它不会像我希望的那样被拉伸以适应它。例如，256x256 图像仅占据我的 512x512 图像 GUI 对象的左上象限。我很困惑，因为我在 XAML 代码中设置了 Stretch="Fill"。我还需要做什么？任何有关代码的帮助（见下文）将不胜感激。

定义 GUI 的 XAML 代码

  <Window x:Class="MyProgram.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MyProgarm" Height="900" Width="890" Name="mainWindow" Icon="Icon.ico" MouseDown="mouseDown">
        <Grid Name="mainGrid" Background="#FFEBE7F0" Width="800.10">
          <Border Margin="139,32,0,0" Name="border1" Height="512" VerticalAlignment="Top" HorizontalAlignment="Left" Width="512" Background="#F0D4D0D0" />
          <Border Margin="138,602,0,0" Name="border2" Height="256" VerticalAlignment="Top" HorizontalAlignment="Left" Width="256" Background="#F0D4D0D0" />
          <Border Margin="400,602,0,0" Name="border3" Height="256" VerticalAlignment="Top" HorizontalAlignment="Left" Width="256" Background="#F0D4D0D0" />
          <Image Margin="135,32,0,0" Name="imagePanel1" Stretch="Fill" HorizontalAlignment="Left" Width="512" MouseMove="imagePanelAxl_MouseMove" Height="512" VerticalAlignment="Top" Canvas.Left="-135" Canvas.Top="-32">
          </Image>

我用来绘制图像的代码：

byte[] myColorImage=// 256x256 RGB image loaded from disk

int W=256;
int H=256;  // dimensions of myColorImage
// Use multiple cores
image.Dispatcher.BeginInvoke(
System.Windows.Threading.DispatcherPriority.Normal,
new Action<byte[]>(
      delegate(byte[] myColorImage_IN)
      {
          const int dpi = 96;

          BitmapSource bmpsrc = BitmapSource.Create(W, H, dpi, dpi, PixelFormats.Bgr24, null, myColorImage_IN, W * 3);
          image.Source = bmpsrc;


      }
  ), myColorImage);

【问题讨论】：

标签： c# wpf image xaml stretch

【解决方案1】：

使用将为您完成工作的图像刷代替图像

 <Border.Background>
            <ImageBrush x:Name="image" Stretch="UniformToFill"/>
 </Border.Background>

并且在后面的代码中可以设置

   image.ImageSource = bmpsrc; // if you can give the URL of the File Located on the Disk

【讨论】：

似乎名称不是 ImageBrush 的属性。如果是这种情况，可以通过编程方式分配图像吗？
x:名字应该是我的错。

【解决方案2】：

正如上面很多人所说，这里是使用 ImageBrush 的代码。这也设置了鼠标悬停时的图像。认为它可能对新用户有所帮助。

<Grid.Resources>
    <ImageBrush x:Key="AddButtonImageBrush" ImageSource="/DemoApp;component/Resources/AddButton.png" Stretch="Uniform"/>

    <Style x:Key="AddButtonImageStyle" TargetType="{x:Type Button}">
        <Setter Property="Background" Value="{StaticResource AddButtonImageBrush}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border Background="{TemplateBinding Background}">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background"  Value="{StaticResource AddButtonImageBrush}"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</Grid.Resources>

<Button Content="If Text is also Required" Style="{StaticResource AddButtonImageStyle}"/>

【讨论】：

【解决方案3】：

如果您知道磁盘上图像的 URI，您应该使用 use ImageBrush 控件。

【讨论】：

【解决方案4】：

我的代码中有几个 cmets：

然后在您的 XAML 中命名您的图像：

imagePanel1

在你使用的代码隐藏中：

image

在你所说的 XAML 中的图像标记中：

Canvas.Left="-135" Canvas.Top="-32"

此图像标签不在画布中，而是在网格中。

在后面的代码中你使用调度器让事情使用多核？

调度程序用于将其他线程中的事物执行到 UI 线程中。如果图像（您从中使用调度程序）也在 UI 线程中（我猜是因为它是一个 UI 对象），那么这不会使您的应用程序使用多个内核。

如果将图像边距设置为 0 并删除水平和垂直对齐。同时删除宽度和高度。然后你的图像应该完全填满你的窗口。

你能帮我测试一下吗？

您可以随时使用和 Uri 将位图源设置为系统上的文件。

BitmapImage bi3 = new BitmapImage();
bi3.BeginInit();
bi3.UriSource = new Uri("smiley_stackpanel.PNG", UriKind.Relative); //instead you can also use Urikind.Absolute
bi3.EndInit();
imagePanel1.Stretch = Stretch.Fill;
imagePanel1.Source = bi3;

【讨论】：