У меня есть следующее изображение, которое я попытался создать в формах 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? Спасибо.
Выглядит примерно так же .. только вертикальная линия не пересекается с обоими концами кадра.
Не могли бы вы попробовать извлечь HeightRequest из BoxView?
Я удалил. Те же эффекты. Вертикальная линия просто не пересекается с обоими концами :(
@jones пытается удалить отступы в вашем Frame.
@ ДенисЧорный Это то, о чем я только что подумал.
Я удалил. Ничего не произошло :(
@jones Кажется очень странным. Вам нужно изменить некоторые параметры по горизонтали / вертикали для представлений и посмотреть, что произойдет. Например, попробуйте поменять для вашего BoxView: VerticalOptions=FillAndExpand, HorizontalOptions=FillAndExpand. Может возникнуть проблема с заполнением содержимого, если вы не используете функции Expand ... У меня была такая же проблема, но с разметкой стека.
Неа. Ничего не работает.
Такое поведение наблюдается на всех платформах?
удалите оба отступа для рамки и HeightRequest для представления окна





Если вы хотите добавить отдельную строку, вам просто нужно добавить BoxView в свой xaml с WidthRequest=1.
Я всегда использую это решение для разделения контента.
В вашем случае я бы предложил удалить HeightRequest из вашего BoxView.
Вы читали вопрос OP и XAML? Это то, что сделал xe, но, похоже, есть лишнее дополнение, которое xe не может преодолеть.
Следуйте этому Кодексу.
<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>
Дизайн нравится.
У вас есть снимок того, как это выглядит?
Проверить сейчас @jones
Ваш дизайн сильно испорчен, и его следует очистить
ViewCell у вас есть два вложенных Frames, что вызывает основную проблему: на внутреннем Frame и на внешнем есть прокладка, которая не позволяет разделителю занять всю высоту.Grid и StackLayout, скорее всего, не нужны и определенно вредны для вашей производительности.Предложения:
Frame и добавьте Margin к внутреннему.Padding внутренней рамки на 0StackLayout, завернутый в 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>
И в конечном итоге дизайн выглядит так (есть еще место для настройки, но в основном это все. Я немного изменил цвета для лучшей видимости):
Через минуту добавлю скриншот
Я рад, что смог помочь :)
Не могли бы вы добавить скриншот, как это выглядит на самом деле?