Xamarin.Forms:如何设置图像以获得预期结果

时间:2018-01-25 17:06:13

标签: image layout xamarin.forms height aspect-ratio

我正在寻找一种实现控件的好方法,该控件看起来像 ListView with 2 columns ,其中每列具有不同的高度。由于我没有找到另一种解决方案,我决定通过 Repeater control来实现。

预期结果是这样的: screenshot

  • 所有项目都来自相同的DataSource ,此DataSource将包含一到十几个项目。
  • 必须将项目自动(按模数)拆分为2列
  • 当用户点击与该项目相关的按钮时,将打开该项目的详细信息页面
  • 红色正方形图像必须具有相同的高度/宽度

我正在设计细胞 DataTemplate ,但我没有看到如何管理图像:

  • 2列之间的区别由包含2列的网格
  • 给出
  • 然后我为每列指定DataTemplate

    <ScrollView>
        <Grid Padding="10">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="2*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <!-- Col.1 -->
            <tabletControls:Repeater  Grid.Column="0" Margin="10"
                                      ItemsSource="{Binding ListProductItems}">
                <tabletControls:Repeater.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <StackLayout Orientation="Vertical" >
                                <StackLayout>
                                    <ffimageloading:CachedImage Source="{Binding Icon}" 
                                                      Aspect="AspectFill"/>
                                </StackLayout>
                                ...
                            </StackLayout>
                        </ViewCell>
                    </DataTemplate>
                </tabletControls:Repeater.ItemTemplate>
            </tabletControls:Repeater>
    
            <!-- Col.2 -->
            <tabletControls:Repeater  Grid.Column="1" Margin="10"
                                      ItemsSource="{Binding ListProductItems}">
                <tabletControls:Repeater.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <StackLayout Orientation="Vertical" >
                                <StackLayout>
                                    <ffimageloading:CachedImage Source="{Binding Icon}" 
                                                      Aspect="AspectFill"/>
                                </StackLayout>
                                ...
                            </StackLayout>
                        </ViewCell>
                    </DataTemplate>
                </tabletControls:Repeater.ItemTemplate>
            </tabletControls:Repeater>
        </Grid>
    </ScrollView
    

但这不能正常工作,因为图像的高度/宽度不一样:

result

我已尝试使用Aspect(AspectFill,AspectFit,Fill)或VerticalOptions / Horizo​​ntalOptions,任何结果......

是否可以在不指定HeightRequest的情况下实现预期结果?还有其他选择吗?

0 个答案:

没有答案