Встроенное изображение Xamarin.Forms не растягивается должным образом
У меня есть пара встроенных изображений в моем приложении Xamarin.Forms.
Большинство из них находились в папках для конкретных платформ. Я пытаюсь вернуть их к встроенным изображениям для простоты и обслуживания.
Вот мой xaml: До:
<Image Source = "RJ45-Pinout-T568A-4.jpg" />
После (2 разные попытки):
<Image Source = "{local:ImageResource ApplicationCalcul.RJ45-Pinout-T568A-4.jpg}" Aspect = "AspectFill" />
<Image Source = "{local:ImageResource ApplicationCalcul.RJ45-Pinout-T568A-4.jpg}" />
Но почему-то мне не удается получить тот же результат.
Раньше изображение растягивалось в стороны экрана и сохраняло хорошее соотношение сторон.
Теперь я получаю либо маленькое изображение, либо изображение, которое растягивается только по горизонтали, либо изображение, обрезанное сверху и снизу.
- Первое изображение на скриншоте — это изображение, как и раньше (в проекте ios).
- Второе изображение было хорошо растянуто, но обрезано сверху и снизу.
- Третье изображение мы можем видеть только частично, но оно совсем не растянуто, но слишком маленькое, хотя соотношение сторон хорошее.
Ответы 1
Первое изображение на скриншоте — это изображение, как и раньше (в проекте ios).
При использовании
<Image Source = "RJ45-Pinout-T568A-4.jpg"/>
размер изображения будет большим и установите Aspect по умолчанию как AspectFit.
Третье изображение мы можем видеть только частично, но оно совсем не растянуто, но слишком маленькое, хотя соотношение сторон хорошее.
А если использовать
<Image Source = "{local:ImageResource ApplicationCalcul.RJ45-Pinout-T568A-4.jpg}" />
размер изображения будет маленьким, а также установите Aspect по умолчанию как AspectFit.
Второе изображение было хорошо растянуто, но обрезано сверху и снизу.
О Aspect вы можете посмотреть на следующем скриншоте:
Затем, если вы используете Aspect = "AspectFill", изображение будет обрезано и внизу.
Например, код Xaml выглядит следующим образом:
<ScrollView>
<StackLayout>
<Label Text = "Image Embedded Resource XAML" FontAttributes = "Bold" HorizontalOptions = "Center" />
<Label Text = "Image Embedded Resource XAML" FontAttributes = "Bold" HorizontalOptions = "Center" />
<!-- uses a custom Extension defined in this project for now -->
<Image Source = "Tree.png" BackgroundColor = "LightBlue"/>
<Image Source = "{local:ImageResource WorkingWithImages.Tree.png}" BackgroundColor = "LightBlue"/>
<Image Source = "{local:ImageResource WorkingWithImages.Tree.png}" BackgroundColor = "LightBlue" Aspect = "AspectFill" />
<Image Source = "{local:ImageResource WorkingWithImages.Tree.png}" BackgroundColor = "LightBlue" Aspect = "AspectFit"/>
<Image Source = "{local:ImageResource WorkingWithImages.Tree.png}" BackgroundColor = "LightBlue" Aspect = "Fill" />
<Label Text = "This image is an embedded resource, referenced in XAML. The same image file is used, regardless of the pixel density of the device (eg. iOS Retina)." />
</StackLayout>
</ScrollView>
Эффект:
===========================Обновление===================== ===========
Есть ли способ сделать дерево шириной телефона, а также сделать высоту изображения дерева такой же, как ширина телефона?
Вы можете установить HeightRequest и Aspect = "Fill" для изображения, независимо от того, используете ли вы Source = "RJ45-Pinout-T568A-4.jpg" или Source = "{local:ImageResource ApplicationCalcul.RJ45-Pinout-T568A-4.jpg}", это будет работать.
Например, код Xaml выглядит следующим образом:
<Image Source = "Tree.png" BackgroundColor = "LightBlue" HeightRequest = "300" Aspect = "Fill" />
<Image Source = "{local:ImageResource WorkingWithImages.Tree.png}" BackgroundColor = "LightBlue" HeightRequest = "300" Aspect = "Fill" />
Эффект:
Собственно в чем моя проблема. Есть ли способ сделать дерево шириной телефона, а также сделать высоту изображения дерева такой же, как ширина телефона?
@user3704628 user3704628 Если вам нужно это сделать, вам нужно установить HeightRequest и Aspect = "Fill" для изображения. Я обновил ответ, вы можете взглянуть на него, когда у вас будет время. Если ответ полезен, не забудьте принять его как ответ (щелкните ✔ в верхнем левом углу этого ответа) и проголосуйте за него, это поможет другим, у кого есть похожая проблема.
Спасибо за помощь, извините за придирчивость, но это решение дает мне прямоугольное изображение, поскольку я думаю, что with зависит от устройства, на котором запущено приложение. Есть ли способ убедиться, что ширина/высота рациона остаются такими же, как на исходном изображении? т.е. если квадратное изображение, то изображение остается квадратным. Я предполагаю, что мне следует изменить размер кода после завершения рендеринга приложения?
Решение, которое я нашел: Aspect = "Fill" AND private void ContentPage_LayoutChanged (отправитель объекта, EventArgs e) { img1.HeightRequest = img1.Width; }
1. Пробовали ли вы Aspect = "AspectFit". 2. Поместили ли вы свои изображения в прокручиваемый контейнер?