Control the height of an image in a scrollview
I would like to achieve the layout shown at the bottom in my app.
I got it sort of working by using the following structure
<ScrollView Orientation="Vertical">
<Grid>
<ScrollView Orientation="Horizontal">
<StackLayout>
<Image>
I currently have the problem that I want to control the image height so that, considering the screen size or screen orientation, there are 2 or 3 rows of images visible.
Things I tried:
- setting a HeightRequest on the image. This seems to be ignored, probably because the scrollcontainer creates an "unlimited" canvas to paint on. The image scales up to the actual image size, which is too large.
- set a hard value for the height of the Grid.Row. This clips the fullsize image.
I've seen this workaround in the demo of the flexgrid where they seem to get around this by downloading a image that is resized on the fly. But this does not seem like an ultimate fix for me.
blue lines = scrollview
black lines = view
red lines = image
xaml xamarin layout xamarin.forms
edited Dec 30 '18 at 16:40
Cheesebaron
17.1k64099
asked Dec 29 '18 at 13:15
sjors miltenburgsjors miltenburg
1,14231848
add a comment |
I would like to achieve the layout shown at the bottom in my app.
I got it sort of working by using the following structure
<ScrollView Orientation="Vertical">
<Grid>
<ScrollView Orientation="Horizontal">
<StackLayout>
<Image>
I currently have the problem that I want to control the image height so that, considering the screen size or screen orientation, there are 2 or 3 rows of images visible.
Things I tried:
- setting a HeightRequest on the image. This seems to be ignored, probably because the scrollcontainer creates an "unlimited" canvas to paint on. The image scales up to the actual image size, which is too large.
- set a hard value for the height of the Grid.Row. This clips the fullsize image.
I've seen this workaround in the demo of the flexgrid where they seem to get around this by downloading a image that is resized on the fly. But this does not seem like an ultimate fix for me.
blue lines = scrollview
black lines = view
red lines = image
xaml xamarin layout xamarin.forms
edited Dec 30 '18 at 16:40
Cheesebaron
17.1k64099
asked Dec 29 '18 at 13:15
sjors miltenburgsjors miltenburg
1,14231848
1
the way to go is 'set a hard value for the height of the Grid.Row. This clips the fullsize image.' But dunno why it clips it for you when you set AspectRatio = AspectFit. Yeah and try use ffimageloading for your images.
– Nick Kovalsky
Dec 29 '18 at 15:00
add a comment |
I would like to achieve the layout shown at the bottom in my app.
I got it sort of working by using the following structure
<ScrollView Orientation="Vertical">
<Grid>
<ScrollView Orientation="Horizontal">
<StackLayout>
<Image>
I currently have the problem that I want to control the image height so that, considering the screen size or screen orientation, there are 2 or 3 rows of images visible.
Things I tried:
- setting a HeightRequest on the image. This seems to be ignored, probably because the scrollcontainer creates an "unlimited" canvas to paint on. The image scales up to the actual image size, which is too large.
- set a hard value for the height of the Grid.Row. This clips the fullsize image.
I've seen this workaround in the demo of the flexgrid where they seem to get around this by downloading a image that is resized on the fly. But this does not seem like an ultimate fix for me.
blue lines = scrollview
black lines = view
red lines = image
xaml xamarin layout xamarin.forms
edited Dec 30 '18 at 16:40
Cheesebaron
17.1k64099
asked Dec 29 '18 at 13:15
sjors miltenburgsjors miltenburg
1,14231848
I would like to achieve the layout shown at the bottom in my app.
I got it sort of working by using the following structure
<ScrollView Orientation="Vertical">
<Grid>
<ScrollView Orientation="Horizontal">
<StackLayout>
<Image>
I currently have the problem that I want to control the image height so that, considering the screen size or screen orientation, there are 2 or 3 rows of images visible.
Things I tried:
- setting a HeightRequest on the image. This seems to be ignored, probably because the scrollcontainer creates an "unlimited" canvas to paint on. The image scales up to the actual image size, which is too large.
- set a hard value for the height of the Grid.Row. This clips the fullsize image.
I've seen this workaround in the demo of the flexgrid where they seem to get around this by downloading a image that is resized on the fly. But this does not seem like an ultimate fix for me.
blue lines = scrollview
black lines = view
red lines = image
xaml xamarin layout xamarin.forms
xaml xamarin layout xamarin.forms
edited Dec 30 '18 at 16:40
Cheesebaron
17.1k64099
asked Dec 29 '18 at 13:15
sjors miltenburgsjors miltenburg
1,14231848
edited Dec 30 '18 at 16:40
Cheesebaron
17.1k64099
asked Dec 29 '18 at 13:15
sjors miltenburgsjors miltenburg
1,14231848
edited Dec 30 '18 at 16:40
Cheesebaron
17.1k64099
edited Dec 30 '18 at 16:40
Cheesebaron
17.1k64099
edited Dec 30 '18 at 16:40
Cheesebaron
17.1k64099
17.1k64099
asked Dec 29 '18 at 13:15
sjors miltenburgsjors miltenburg
1,14231848
asked Dec 29 '18 at 13:15
sjors miltenburgsjors miltenburg
1,14231848
asked Dec 29 '18 at 13:15
sjors miltenburgsjors miltenburg
1,14231848
1,14231848
1
the way to go is 'set a hard value for the height of the Grid.Row. This clips the fullsize image.' But dunno why it clips it for you when you set AspectRatio = AspectFit. Yeah and try use ffimageloading for your images.
– Nick Kovalsky
Dec 29 '18 at 15:00
add a comment |
1
the way to go is 'set a hard value for the height of the Grid.Row. This clips the fullsize image.' But dunno why it clips it for you when you set AspectRatio = AspectFit. Yeah and try use ffimageloading for your images.
– Nick Kovalsky
Dec 29 '18 at 15:00
1
1
the way to go is 'set a hard value for the height of the Grid.Row. This clips the fullsize image.' But dunno why it clips it for you when you set AspectRatio = AspectFit. Yeah and try use ffimageloading for your images.
– Nick Kovalsky
Dec 29 '18 at 15:00
the way to go is 'set a hard value for the height of the Grid.Row. This clips the fullsize image.' But dunno why it clips it for you when you set AspectRatio = AspectFit. Yeah and try use ffimageloading for your images.
– Nick Kovalsky
Dec 29 '18 at 15:00
add a comment |
1 Answer
1
active
oldest
votes
Thx @Nick Kovalsky for telling me that it should work like that. I just found out that the cause seems to lie in the fact that I used a StackLayout around the image (containing the image and the image-label). This was something I left out when posting my original question. When I replaced this StackLayout with a Grid it worked as expected.
Old situation:
<ScrollView Orientation="Vertical">
<Grid>
<ScrollView Orientation="Horizontal">
<StackLayout Orientation="Vertical">
<Image>
<Label>
New situation:
<ScrollView Orientation="Vertical">
<Grid>
<ScrollView Orientation="Horizontal">
<Grid>
<Image>
<Label>
answered Dec 30 '18 at 10:03
sjors miltenburgsjors miltenburg
1,14231848
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53969895%2fcontrol-the-height-of-an-image-in-a-scrollview%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thx @Nick Kovalsky for telling me that it should work like that. I just found out that the cause seems to lie in the fact that I used a StackLayout around the image (containing the image and the image-label). This was something I left out when posting my original question. When I replaced this StackLayout with a Grid it worked as expected.
Old situation:
<ScrollView Orientation="Vertical">
<Grid>
<ScrollView Orientation="Horizontal">
<StackLayout Orientation="Vertical">
<Image>
<Label>
New situation:
<ScrollView Orientation="Vertical">
<Grid>
<ScrollView Orientation="Horizontal">
<Grid>
<Image>
<Label>
answered Dec 30 '18 at 10:03
sjors miltenburgsjors miltenburg
1,14231848
add a comment |
Thx @Nick Kovalsky for telling me that it should work like that. I just found out that the cause seems to lie in the fact that I used a StackLayout around the image (containing the image and the image-label). This was something I left out when posting my original question. When I replaced this StackLayout with a Grid it worked as expected.
Old situation:
<ScrollView Orientation="Vertical">
<Grid>
<ScrollView Orientation="Horizontal">
<StackLayout Orientation="Vertical">
<Image>
<Label>
New situation:
<ScrollView Orientation="Vertical">
<Grid>
<ScrollView Orientation="Horizontal">
<Grid>
<Image>
<Label>
answered Dec 30 '18 at 10:03
sjors miltenburgsjors miltenburg
1,14231848
add a comment |
Thx @Nick Kovalsky for telling me that it should work like that. I just found out that the cause seems to lie in the fact that I used a StackLayout around the image (containing the image and the image-label). This was something I left out when posting my original question. When I replaced this StackLayout with a Grid it worked as expected.
Old situation:
<ScrollView Orientation="Vertical">
<Grid>
<ScrollView Orientation="Horizontal">
<StackLayout Orientation="Vertical">
<Image>
<Label>
New situation:
<ScrollView Orientation="Vertical">
<Grid>
<ScrollView Orientation="Horizontal">
<Grid>
<Image>
<Label>
answered Dec 30 '18 at 10:03
sjors miltenburgsjors miltenburg
1,14231848
Thx @Nick Kovalsky for telling me that it should work like that. I just found out that the cause seems to lie in the fact that I used a StackLayout around the image (containing the image and the image-label). This was something I left out when posting my original question. When I replaced this StackLayout with a Grid it worked as expected.
Old situation:
<ScrollView Orientation="Vertical">
<Grid>
<ScrollView Orientation="Horizontal">
<StackLayout Orientation="Vertical">
<Image>
<Label>
New situation:
<ScrollView Orientation="Vertical">
<Grid>
<ScrollView Orientation="Horizontal">
<Grid>
<Image>
<Label>
answered Dec 30 '18 at 10:03
sjors miltenburgsjors miltenburg
1,14231848
answered Dec 30 '18 at 10:03
sjors miltenburgsjors miltenburg
1,14231848
answered Dec 30 '18 at 10:03
sjors miltenburgsjors miltenburg
1,14231848
answered Dec 30 '18 at 10:03
sjors miltenburgsjors miltenburg
1,14231848
1,14231848
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53969895%2fcontrol-the-height-of-an-image-in-a-scrollview%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
the way to go is 'set a hard value for the height of the Grid.Row. This clips the fullsize image.' But dunno why it clips it for you when you set AspectRatio = AspectFit. Yeah and try use ffimageloading for your images.
– Nick Kovalsky
Dec 29 '18 at 15:00