1

我有下面的图像，我尝试在 XAML-Xamarin 表单中进行设计。

xml代码如下：

<ListView x:Name="myList" HasUnevenRows="true" >
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <ViewCell>
                                    <Frame Padding="0,0,0,8" BackgroundColor="#edeeef" BorderColor="#edeeef">
                                        <Frame.Content>
                                            <Frame OutlineColor="Transparent" BackgroundColor="White">
                                                <Frame.Content>

                                                    <Grid>
                                                        <Grid.RowDefinitions>
                                                            <RowDefinition Height="*" />
                                                        </Grid.RowDefinitions>
                                                        <Grid.ColumnDefinitions>
                                                            <ColumnDefinition Width="7*" />
                                                            <ColumnDefinition Width="*" />
                                                            <ColumnDefinition Width="2*" />
                                                        </Grid.ColumnDefinitions>

                                                        <StackLayout Orientation="Vertical" Grid.Row="0" Grid.Column="0">
                                                            <Label Text="{Binding ItemName}"
                                                               TextColor="Black"
                                                               FontFamily="OpenSans-Light"
                                                               FontSize="16"
                                                               HorizontalOptions="FillAndExpand"/>

                                                            <Label Text="Engine coolant temperature sesnor 1 circuit intermittent (DTC Confirmed)" FontSize="11" HorizontalOptions="StartAndExpand"/>

                                                            <StackLayout Orientation="Horizontal">
                                                                <Button Text="OBD" />
                                                                <Button Text="CUS" />
                                                            </StackLayout>
                                                        </StackLayout>

                                                        <BoxView  
                                                            VerticalOptions="Fill"
                                                            HorizontalOptions="End"
                                                            WidthRequest="1"
                                                            HeightRequest="5"
                                                            Color="Blue"
                                                            Grid.Row="0"
                                                            Grid.Column="1"/>


                                                        <ffsvg:SvgCachedImage
                                                            Aspect="AspectFit"                                                     
                                                            VerticalOptions="Center"
                                                            Source="Bin.png"
                                                            Grid.Column="2"
                                                            Grid.Row="0"
                                                            />

                                                    </Grid>

                                                </Frame.Content>
                                            </Frame>

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

我遇到的问题是我无法绘制分隔内容和右侧红色方形框的垂直右线。

当我添加图像时，它会在底部添加额外的填充。

有人可以帮我在 XamarinForms 中正确对齐组件吗？谢谢。

4

3 回答 3

2

你的设计很乱，应该清理一下

  • 在 中ViewCell，您有两个嵌套Frames的 ，这导致了主要问题：内部Frame和外部都有一个填充，这会阻止分隔符占据整个高度
  • 嵌套的Grid并且StackLayout很可能没有必要并且绝对不利于您的表现

建议：

  • 去掉外部Frame并Margin在内部添加一个
  • 将Padding内框的设置为0
  • 去掉StackLayout包裹在的Grid并将控件添加到Grid
    • 为在Grid.RowSpan_Grid.ColumnSpanGrid

您的 XAMLViewCell将如下所示：

<Frame Padding="0"
       Margin="5"
       BorderColor="Transparent"
       BackgroundColor="White"
       CornerRadius="10">
    <Grid ColumnSpacing="0" RowSpacing="5" Padding="0">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>

        <Label Text="ItemName"
               TextColor="Black"
               FontFamily="OpenSans-Light"
               FontSize="16"
               HorizontalOptions="FillAndExpand"
               VerticalOptions="End"
               Grid.Column="0"
               Grid.Row="0"
               Grid.ColumnSpan="2"
               Margin="10,10,10,0" />

        <Label Grid.Column="0"
               Grid.Row="1"
               Grid.ColumnSpan="2"
               Text="Engine coolant temperature sesnor 1 circuit intermittent (DTC Confirmed)"
               FontSize="11"
               HorizontalOptions="StartAndExpand"
               Margin="10,0,0,0" />


        <Button Text="OBD"
                VerticalOptions="End"
                HorizontalOptions="Start"
                Grid.Row="2"
                Grid.Column="0"
                Margin="10,0,5,10" />
        <Button Text="CUS"
                VerticalOptions="End"
                HorizontalOptions="Start"
                Grid.Row="2"
                Grid.Column="1"
                Margin="0,0,10,10" />


        <BoxView VerticalOptions="Fill"
                 HorizontalOptions="End"
                 WidthRequest="1"
                 Color="LightPink"
                 Margin="0"
                 Grid.Row="0"
                 Grid.Column="2"
                 Grid.RowSpan="3" />


        <Image Aspect="AspectFit"
               VerticalOptions="Center"
               HorizontalOptions="End"
               Source="http://lorempixel.com/output/abstract-q-c-200-200.jpg"
               Grid.Column="3"
               Grid.Row="0"
               Grid.RowSpan="3"
               Margin="10"/>

    </Grid>
</Frame>

最终设计看起来像这样（仍有调整空间，但基本上就是这样。为了更好的可见性，我稍微改变了颜色）：

更新的设计。

于 2018-10-02T08:14:22.707 回答
1

遵守本准则。

<Grid Grid.Row="3" Padding="{StaticResource Padding15050}">
        <ListView x:Name="ListViewFood" ItemsSource="{Binding FoodList}" HasUnevenRows="True"  ItemSelected="OnSelection" >
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid Padding="{StaticResource Padding510}">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="0.5*"/>
                            </Grid.ColumnDefinitions>
                            <Grid Grid.Column="0">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <Controls:Label x:Name="LabelName" Grid.Row="0" Text = "{Binding Name}"  Font="17" TextColor="{StaticResource Black}"/>
                                <Controls:Label x:Name="LabelDescription" Grid.Row="1" Text = "{Binding Description}" Font="15" />
                                <Controls:Label x:Name="LabelPrice" Grid.Row="2" Text = "{Binding Price}" Font="15" TextColor="{StaticResource YetiBlue}"/>
                            </Grid>
                            <Grid Grid.Column="1">
                                <Controls:RectangleButton Text="Add" Font="Bold,15"  VerticalOptions="Start" HorizontalOptions="EndAndExpand"  CommandParameter="{Binding Id}"  Clicked="RectangleButton_Clicked"/>
                            </Grid>
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>

像这样设计。

在此处输入图像描述

于 2018-10-02T07:18:55.323 回答
0

如果要添加单独的行，只需BoxView在 xaml 中添加WidthRequest=1. 我总是使用这个解决方案来分离内容。在您的情况下，我建议HeightRequest在您的BoxView.

于 2018-10-02T04:56:15.517 回答