Home Make image fill whole container of stacklayout
Reply: 2

Make image fill whole container of stacklayout

Pettanord
1#
Pettanord Published in 2017-12-07 18:56:53Z

Hi I have this Xamarin Forms app where I have the following layout:

 <ContentPage Title="Live" Icon="tv_show-32.png">
        <ScrollView>
            <Grid Margin="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"></RowDefinition>
                    <RowDefinition Height="Auto"></RowDefinition>
                    <RowDefinition Height="Auto"></RowDefinition>
                    <RowDefinition Height="Auto"></RowDefinition>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <StackLayout Grid.Row="0" Grid.Column="0" Spacing="50,20,50,30">
                    <Image Source="http://kanal10.se/images/logga/kanal10.png" HorizontalOptions="FillAndExpand"></Image>
                </StackLayout>

                <StackLayout Grid.Column="0" Grid.Row="1" Style="{StaticResource StackBG}">
                    <Label Text="Sverige/Sweden"></Label>
                    <BoxView WidthRequest="100" HeightRequest="1" BackgroundColor="#009fe3"></BoxView>
                    <Image Source="http://kanal10.se/storage/images/kanal10/kanal-10/tvbild.png" HorizontalOptions="Fill"></Image>
                    <Button x:Name="Sweden" Text="Watch Live" Clicked="Sweden_OnClicked" HorizontalOptions="FillAndExpand" Style="{StaticResource PlayButtonStyle}"></Button>
                </StackLayout>
                <StackLayout Grid.Column="0" Grid.Row="2" Style="{StaticResource StackBG}">
                    <Label Text="Norge/Norway"></Label>
                    <BoxView WidthRequest="100" HeightRequest="1" BackgroundColor="#009fe3"></BoxView>
                    <Image Source="http://kanal10.se/storage/images/kanal10/kanal-10/tvbild.png" HorizontalOptions="FillAndExpand"></Image>
                    <Button x:Name="Norway" Text="Watch Live" Clicked="Norway_OnClicked" HorizontalOptions="FillAndExpand" Style="{StaticResource PlayButtonStyle}"></Button>
                </StackLayout>
                <StackLayout Grid.Column="0" Grid.Row="3" Style="{StaticResource StackBG}">
                    <Label Text="Asien/Asia"></Label>
                    <BoxView WidthRequest="100" HeightRequest="1" BackgroundColor="#009fe3"></BoxView>
                    <Image Source="http://kanal10.se/storage/images/kanal10/kanal-10/tvbild.png" HorizontalOptions="FillAndExpand"></Image>
                    <Button x:Name="Asia" Text="Watch Live" Clicked="Asia_OnClicked" Style="{StaticResource PlayButtonStyle}"></Button>
                </StackLayout>
            </Grid>
        </ScrollView>
    </ContentPage>

The problem is that I can't get the image called tvbild.png, to fill the whole container in the iOS app.

I would like the image to have the same width size as the button (see attached image).

How can I accomplish this?

Thanks for help!

Peter

Benl
2#
Benl Reply to 2017-12-12 15:15:22Z

Assuming image size is known; use separate row in Grid for image and button and set HeightRequest for Image and ColumnDefinition Width for Grid, see sample below:

Original image width is 100 and height is 50. Width of container is 300.

Find scale factor based on width of container and width of image: 300/100=3

Find HeightRequest based on scale and height of image: 3*50=150:

<ContentPage Padding="10,20"
...
<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="Auto"/>
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="300"/>
  </Grid.ColumnDefinitions>
  <Image Grid.Row="0" Source="100x50.png" HeightRequest="150"/>
  <Button Grid.Row="1" Text="Button 1"/>
  <Image Grid.Row="2" Source="200x100.png" HeightRequest="150"/>
  <Button Grid.Row="3" Text="Button 2"/>
</Grid>

Sample output from iPhone SE simulator with page width 320. The left and right border is from area left and right of the display:

Pettanord
3#
Pettanord Reply to 2017-12-08 10:44:52Z

Hi and thanks for answer,

Well what I want is to fill the whole conatiners width for both the button and the image.

Peter

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.303447 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO