Question

嗨，我有这个Xamarin Forms应用程序，我有以下布局：

 <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>

问题是我无法获得名为tvbild.png的图像，以填充iOS应用中的整个容器。

我希望图像的宽度与按钮的宽度相同（参见附图）。

我该如何做到这一点？

感谢您的帮助！

彼得

Answer 1

假设图像大小已知;在Grid中使用单独的行来显示图像和按钮为Image设置HeightRequest，为Grid设置ColumnDefinition Width，请参阅下面的示例：

原始图像宽度为100，高度为50.容器宽度为300。

根据容器宽度和图像宽度查找比例因子：300/100 = 3

根据图片的比例和高度查找HeightRequest：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>

来自iPhone SE模拟器的示例输出，页面宽度为320.左右边框来自显示屏的左右两侧：

Answer 2

嗨，谢谢你的回答，

我想要的是填充按钮和图像的整个宽度。

彼得

使图像填充stacklayout的整个容器

2 个答案: