带有按钮的Xamarin.Forms中的Listview XAML
下面的图片是我试图以XAML-Xamarin的形式设计的 xaml代码如下所示：带有按钮的Xamarin.Forms中的Listview XAML,xaml,xamarin,xamarin.forms,Xaml,Xamarin,Xamarin.forms,下面的图片是我试图以XAML-Xamarin的形式设计的 xaml代码如下所示： <ListView x:Name="myList" HasUnevenRows="true" > <ListView.ItemTemplate> <DataTemplate> <ViewCell>
<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>
有人能帮我把上面图片中的组件正确对齐吗？谢谢。如果要添加单独的行，只需在xaml中添加一个
BoxViewWidthRequest=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>
您的设计非常混乱，应该清理一下
- 在
中，有两个嵌套的ViewCell
，这导致了一个主要问题：内部框架
上有一个填充物，外部框架上有一个填充物，这会阻止分隔符占据整个高度框架 - 嵌套的
和网格
很可能不是必需的，而且肯定会对您的性能造成不利影响堆栈布局
- 移除外部
，并在内部框架上添加框架边距 - 将内部框架的
填充设置为0 - 移除包裹在
网格中的
，并将控件添加到堆栈布局网格中- 添加
和网格.RowSpan
，用于在网格.ColumnSpan网格中占据更多高度/宽度的控件
- 添加
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>
你能给它添加一个屏幕截图吗？它看起来很像。。只是垂直线没有与框架的两端相交。能否尝试从
框视图中删除高度请求
？我已删除。同样的效果。垂直线只是不相交于两端：（@jones试图删除你的框架中的填充。你读了OPs问题和XAML了吗？这是xe所做的，但似乎有一个额外的填充xe无法克服。你有一个这样的快照吗？现在检查@jonesI将在几分钟内添加一个屏幕截图。我很高兴我能提供帮助：）