Список просмотра XAML в Xamarin. Формы с кнопкой

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

Следуйте этому коду.

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

Ваш дизайн довольно испорчен и должен быть очищен

• Внутри ViewCell у вас есть два вложенных Frames, что вызывает основную проблему: на внутренней стороне есть отступыFrame это и на внешнем, что мешает разделителю принять полную высоту
• Вложенные Grid и StackLayout, скорее всего, не нужны и определенно вредны для вашей производительности

Предложения:

• Удалите внешнюю Frame и добавьте Margin к внутренней
• Установите Padding внутренней рамки на 0
• Удалите StackLayout, обернутый в Grid и добавьте элементы управления в Grid
  • Добавьте Grid.RowSpan и Grid.ColumnSpan для элементов управления, которые принимают больше высоты / ширины вGrid

Ваш XAML в пределах ViewCell будет выглядеть следующим образом:

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

Если вы хотите добавить отдельную строку, вам просто нужно добавить BoxView в ваш xaml с WidthRequest=1.Я всегда использую это решение для разделения контента.В вашем случае я бы предложил удалить HeightRequest в вашем BoxView.