图像超过整个屏幕？答案

【问题标题】：Image overtaking entire screen?图像超过整个屏幕？
【发布时间】：2017-05-01 18:37:44
【问题描述】：

我有这段代码来创建我的页面，但由于某种原因，图像操作系统占用了整个页面而不显示任何其他内容这是我得到的图片。尽管图像位于堆栈布局内，但图像仍位于所有其他内容之上

namespace GarageSale.Views
{
public class abcChapterPage : basePage
{
myDataTypes.abcChapter abc;

StackLayout baseStack;

#region Views
Label lblName = new Label
{
    Text = "",
    VerticalOptions = LayoutOptions.StartAndExpand,
    HorizontalOptions = LayoutOptions.CenterAndExpand
};

Label lblSchool = new Label
{
    Text = "",
    VerticalOptions = LayoutOptions.StartAndExpand,
    HorizontalOptions = LayoutOptions.CenterAndExpand
};

Label lblLocation = new Label
{
    Text = "",
    VerticalOptions = LayoutOptions.CenterAndExpand,
    HorizontalOptions = LayoutOptions.CenterAndExpand
};

Image profImg = new Image
{
    Scale = .1f,
    Aspect = Aspect.AspectFit,

};

Button viewItems = new Button
{
    Text = " View Items ",
    BorderRadius = 0,
    //Margin = 0,
    HorizontalOptions = LayoutOptions.FillAndExpand,
};

Button viewMembers = new Button
{
    Text = "View Members",
    BorderRadius = 0,
    //Margin = 0,
    HorizontalOptions = LayoutOptions.FillAndExpand,
};

#endregion

public abcChapterPage(myDataTypes.abcChapter o)
{
    abc = o;

    populateProfileFields();

}

public abcChapterPage()
{
    shouldGetChapter = true;
    abcid = int.Parse(App.CredManager.GetAccountValue("abc_chapter_id"));
}

StackLayout makeGUI()
{
    viewItems.Command = new Command(() =>
    {
        Navigation.PushAsync(new viewListPage(new itemListView(), abc.id, 1, "Items for sale by " + abc.school));
    });

    viewMembers.Command = new Command(() =>
    {
        Navigation.PushAsync(new viewListPage(new userListView(), abc.id, 2, " abc Members " + abc.school));
    });



    #region basestack
    return new StackLayout
    {
        VerticalOptions = LayoutOptions.Fill,
        HorizontalOptions = LayoutOptions.Fill,
        Children = {
            //lblName,
            profImg,
            lblSchool,
            lblLocation,
            new StackLayout {
                Orientation = StackOrientation.Horizontal,
                Padding = 0,
                // Margin = 0,
                Spacing = 0,
                Children = {
                    viewItems,
                    viewMembers
                }
            }
        }
    };
    #endregion

}

public void populateProfileFields()
{
    baseStack = makeGUI();
    Title = abc.school + " abc";
    lblSchool.Text = abc.school;
    lblLocation.Text = abc.city +", "+ abc.state;

    profImg.Source = ImageSource.FromStream(() => new MemoryStream(abc.picture));

    Content = baseStack;
    //TODO: do this if user is admin
    //if (Constants.AdminUsers.Contains(App.CredManager.GetAccountValue("G_id")) && !adminAlert)
    //{
    //  await Task.Delay(5000);
    //  DisplayAlert("Admin Notice:", "You are logged in as an administrative user!", "Dismiss");
    //  adminAlert = true;
    //}

}

bool shouldGetChapter = false;
int abcid;

protected async override void OnAppearing()
{
    if (shouldGetChapter)
    {
        abc = await App.MANAGER.YSSI.GetabcChapter(abcid);
        populateProfileFields();
    }
}

}

【问题讨论】：

使用 xaml 并通过可用的 xaml 预览工具让您的生活更轻松

标签： image xamarin uiimageview xamarin.android xamarin.forms

【解决方案1】：

由于默认 TextColor 是黑色的，就像您的背景颜色一样，它不可见。图片居中的原因可能是 Scale = .1f, 你应该删除它。

【讨论】：

【解决方案2】：

您可能误解了 Xamarin.Forms 中 Aspect 的使用，Image 控件要么在不保持纵横比的情况下填充容器，要么对图像进行剪辑或对其进行信箱处理。它不会自行调整大小，图像保持其纵横比。

在您的情况下，您的图像容器是整个StackLayout，因此图像覆盖了其他控件。如果你想调整图片大小，有很多方法，除了改变图片源本身，这里最简单的方法应该是给图片控件设置一个固定的大小，但是如果你想为大多数不同的大小创建一个自适应布局设备，在这种情况下，我建议放置一个Xamarin.Forms.Grid，并为其设置RowDefinitions和ColumnDefinitions。

【讨论】：