Xamarin表单 - 列表视图DataTemplate有两行和图像

时间:2017-10-31 13:34:13

标签: uitableview listview xamarin.forms

我有以下内容将图像放在每个单元格的末尾,问题是文本都在同一行,需要分开。

<ListView.ItemTemplate>
    <DataTemplate>
        <ViewCell>
            <StackLayout Padding="10" HorizontalOptions = "LayoutOptions.StartAndExpand" Orientation="Horizontal">
                <Label Text="{Binding InfoDate, StringFormat='{0:MMMM dd, yyyy H:mm}'}"
       LineBreakMode="NoWrap" FontAttributes="Bold" 
       Style="{DynamicResource TitleStyle}" 
       FontSize="16" />
                <Label Text="{Binding Name}" FontAttributes="Bold"
       LineBreakMode="NoWrap"
       Style="{DynamicResource ListItemDetailTextStyle}" HorizontalOptions="StartAndExpand"
       FontSize="14"/>
                <Label Text="{Binding FullAddress}" HorizontalOptions="StartAndExpand"
       LineBreakMode="WordWrap"
       Style="{DynamicResource ListItemDetailTextStyle }" 
       FontSize="12"/>
                <Image Source="tick.png" Style="{DynamicResource ListItemImageStyle}" HorizontalOptions="EndAndExpand" VerticalOptions="Center"  ></Image>  
            </StackLayout>

        </ViewCell>
    </DataTemplate>
</ListView.ItemTemplate>

有没有办法让文字标签堆叠,但图像本身就在右边的中心?

这样的事情:   [https://i.stack.imgur.com/eH4m7.png]

2 个答案:

答案 0 :(得分:1)

用网格做,像这样:

<ListView.ItemTemplate>
    <DataTemplate>
        <ViewCell>
            <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Label Grid.Row="0" Grid.Column="0"
                       Text="{Binding InfoDate, StringFormat='{0:MMMM dd, yyyy H:mm}'}"
                       LineBreakMode="NoWrap" FontAttributes="Bold"
                       Style="{DynamicResource TitleStyle}"
                       FontSize="16" />
                <Label Grid.Row="1" Grid.Column="0"
                       Text="{Binding Name}" FontAttributes="Bold"
                       LineBreakMode="NoWrap"
                       Style="{DynamicResource ListItemDetailTextStyle}"
                       HorizontalOptions="StartAndExpand"
                       FontSize="14"/>
                <Label Grid.Row="2" Grid.Column="0"
                       Text="{Binding FullAddress}"
                       HorizontalOptions="StartAndExpand"
                       LineBreakMode="WordWrap"
                       Style="{DynamicResource ListItemDetailTextStyle }"
                       FontSize="12"/>
                <Image Grid.Row="0" Grid.RowSpan="3" Grid.Column="1"
                       Source="tick.png" Style="{DynamicResource ListItemImageStyle}"
                       HorizontalOptions="CenterAndExpand"
                       VerticalOptions="Center"  /> 
            </Grid>

        </ViewCell>
    </DataTemplate>
</ListView.ItemTemplate>

答案 1 :(得分:1)

在您的ViewCell中使用网格。您可以根据需要调整标签/图像的宽度比。在这个例子中,它是70%/ 30%:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="7*"/>
        <ColumnDefinition Width="3*"/>
    </Grid.ColumnDefinitions>
    <StackLayout Grid.Column="0" ...>
        <!-- YOUR LABELS HERE -->
    </StackLayout>
    <Image Grid.Column="1" ... />
</Grid>