Как показать изображение в XAML?

Сначала я думал, что мне нужно работать с BorderBrushes, ImageSources и т. д., но потом я обнаружил, что простого Image в простом Border кажется достаточно, как вы можете видеть в этом ответе.

Вот почему я так подумал (скриншот дизайна):

(Первый из файла «All_Colours.png», а третий — из «Transparant.png», второй коричневый квадрат меня не волнует)

В XAML это выглядит следующим образом:

<Border x:Name = "box_Interior_Group_Color">
  <Image Source = "/Company.Customer.Client;component/Views/views/All_Colours.png"/>
</Border>

...

<Border x:Name = "box_Interior_Transparant">
  <Image Source = "/Company.Customer.Client;component/Views/views/Transparant.png"/>
</Border>

... но когда я запускаю это, я вижу вот что:

Вы можете подумать: «Вам нужно скопировать файлы «All_Colours.png» и «Transparant.png» в каталог среды выполнения», но в этом-то и суть:

  • Я скопировал эти файлы в каталог времени выполнения и в каталог «Модули» (я работаю над DLL, расположенной в подкаталоге «Модули» каталога времени выполнения), но это не решило проблему.
  • В окне вывода ничего нет. Я могу себе представить, что Visual Studio хочет показать эти *.png файлы и терпит неудачу, но в этом случае она должна показать некоторую информацию в окне вывода.

Что я могу сделать?

Дополнительная информация: когда я запускаю функцию «Выбрать элемент» в отладчике, я могу выбрать коричневый квадрат, но остальные, похоже, даже не присутствуют в XAML:

Наведение курсора на коричневый (коричневый становится слегка серым):

Наводим курсор на другую (все выглядит слегка серым, как будто других границ вообще нет):

Когда я открываю функцию «Живое визуальное дерево» и выбираю упомянутые поля, они появляются, как вы можете видеть на следующих снимках экрана:

и

Синтаксис означает, что изображение компилируется как Resource в сборку Company.Customer.Client. Таким образом, файлы JPG не обязательно должны находиться в каталоге времени выполнения, а должны находиться в сборке, содержащей изображения.

Klaus Gütter 28.05.2024 12:52

@KlausGütter: большое спасибо за подтверждение. Я уже на это надеялся. Но почему я не вижу этого изображения при запуске приложения?

Dominique 28.05.2024 13:01

@KlausGütter: Надеюсь, этот вопрос не слишком глупый, но я использовал изображения PNG, а вы ссылаетесь на изображения JPG. Надеюсь, это не причина моей проблемы?

Dominique 28.05.2024 13:06

Нет, это не проблема. Можете ли вы проверить свойства этих файлов в обозревателе решений, если для действия компиляции установлено значение «Ресурс»? Вы уверены, что у вас в папке самая последняя версия сборки?

Klaus Gütter 28.05.2024 18:09

@KlausGütter: ты прав! Для «Действия сборки» было установлено значение «Нет», я изменил его на «Ресурс», и теперь оно работает. Отлично! Можете ли вы написать это в ответ и указать порядок действий, как добавить картинку в проект так, чтобы "Действие сборки" было настроено правильно с первого раза? Тогда я приму этот ответ.

Dominique 29.05.2024 08:26
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
5
55
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Синтаксис Source = "/Company.Customer.Client;component/Views/views/All_Colours.png" означает, что изображение должно быть скомпилировано как Resource в сборку Company.Customer.Client. Таким образом, файлы изображений не обязательно должны находиться в каталоге времени выполнения, но эта сборка содержит изображения.

При добавлении файла изображения в проект Company.Customer.Client убедитесь, что для действия сборки установлено значение «Ресурс».

Другие вопросы по теме