如何进行图像拉伸以填充此WPF / XAML应用程序？

When my program displays an image which is smaller than the Image GUI object defined in XAML, it does not get stretched to fit as I would like it to. For example a 256x256 image only occupies the upper left quadrant of my 512x512 Image GUI object. I am puzzled because I have set Stretch="Fill" in the XAML code. What else do I need to be doing? Any help with the code (see below) would be greatly appreciated.

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

XAML code defining the GUI

定义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>

Code I use to draw the 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);

4 个解决方案

#1

Instead of Image use Image Brush that will do the work for you

而不是图像使用Image Brush,它将为您完成工作

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

And in the Code Behind you can Set

在Code Behind中你可以设置

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

#2

As many people said above here is the code for using ImageBrush. Which also sets the image while MouseOver. Thought it might helps new users.

正如上面所说的许多人都是使用ImageBrush的代码。这也是在MouseOver时设置图像。认为它可能有助于新用户。

<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

If you known the URI of the image on the disk you should use the ImageBrush control.

如果您知道磁盘上图像的URI,则应使用ImageBrush控件。

#4

I have a few comments on your code:

我对你的代码有一些评论:

And in your XAML you name your image:

在您的XAML中,您可以为自己的图像命名:

imagePanel1

and in codebehind you used:

在您使用的代码隐藏中:

image

In the image tag in the XAML you said:

在XAML的图像标签中,你说:

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

This image tag is not in a canvas,, it is in a grid.

此图像标记不在画布中,而是在网格中。

In the code behind you use the dispatcher to make things use multiple cores?

在后面的代码中,您使用调度程序来使用多个内核?

The dispatcher is used to execute thing from other threads into the UI thread. And if image (from which you use the dispatcher) is also in the UI thread (what I guess it is since it is a UI object) then this wont make your application use multiple cores.

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

If you set the image margin to 0 and remove the horizontal and vertical alignment. Also remove the width and height. Then your image should completely fill your window.

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

Can you test this for me.

你能帮我测试一下吗?

And you can always use and Uri to set the bitmapsource to the file on your system.

您可以随时使用Uri将bitmapsource设置为系统上的文件。

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;

#1