Как мне растянуть изображение, чтобы заполнить это приложение WPF / XAML?

Question

Когда моя программа отображает изображение, которое меньше, чем объект графического интерфейса изображения, определенный в XAML, оно не растягивается, чтобы соответствовать, как я бы этого хотел. Например, изображение размером 256x256 занимает только верхний левый квадрант моего объекта с графическим интерфейсом 512x512. Я озадачен, потому что я установил Stretch="Fill" в коде XAML. Что еще мне нужно делать? Любая помощь с кодом (см. Ниже) будет принята с благодарностью.

XAML-код, определяющий GUI

  <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);

Answer 1

Вместо Image используйте Image Brush, который сделает всю работу за вас

 <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

Answer 2

Как много людей сказали выше, вот код для использования 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}"/>

Answer 3

Если вы знаете URI изображения на диске, вам следует использовать элемент управления ImageBrush.

Answer 4

У меня есть несколько комментариев к вашему коду:

И в вашем XAML вы называете свое изображение:

imagePanel1

и в коде позади вы использовали:

image

---

В теге изображения в XAML вы сказали:

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

Этот тег изображения не находится на холсте, он находится в сетке.

---

В коде позади вы используете диспетчер, чтобы заставить вещи использовать несколько ядер?

Диспетчер используется для выполнения вещи из других потоков в поток пользовательского интерфейса. И если изображение (из которого вы используете диспетчер) также находится в потоке пользовательского интерфейса (как мне кажется, так как это объект пользовательского интерфейса), то это не заставит ваше приложение использовать несколько ядер.

---

Если вы установите поле изображения на 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;