带有按钮的Xamarin.Forms中的Listview XAML

Question

我在下面的图片中尝试使用XAML-Xamarin表单进行设计。

xaml代码如下：

<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？ 谢谢。

Answer 1

你的设计很混乱，应该清理干净

• 在ViewCell ，你有两个嵌套的Frames ，这会导致主要问题：内Frame上和外Frame上有一个填充，这会阻止分隔符占据整个高度
• 嵌套的Grid和StackLayout很可能不是必需的，对您的性能肯定是有害的

建议：

• 移除Frame并在内Frame添加Margin
• 将内框的Padding设置为0
• 取出StackLayout包裹在Grid和控件添加到Grid
  • 添加Grid.RowSpan和Grid.ColumnSpan以获取在Grid中占用更多高度/宽度的控件

您在ViewCell XAML将如下所示：

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

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

Answer 2

遵守此准则。

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

像这样的设计 。

Answer 3

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