Question

尝试使用网格渲染ListView。网格包含两列。第一个，带按钮。第二个，带有标签。

模型包含两个属性。第一个，特定对象的列表。第二个，一个字符串。

最后，listview内部网格的标签将被绑定到模型对象列表的一个随机属性。

我最好的方法是：

<ListView x:Name="intervectionList"
                  ItemsSource="{Binding .}">
      <ListView.ItemTemplate>
        <DataTemplate>
          <ViewCell>
            <Grid Padding="5">
              <Grid.RowDefinitions>
                <RowDefinition Height="20"></RowDefinition>
                <RowDefinition Height="1"></RowDefinition>
              </Grid.RowDefinitions>
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*"></ColumnDefinition>
                <ColumnDefinition Width="3*"></ColumnDefinition>
              </Grid.ColumnDefinitions>

              <Button Text="Play" Grid.Row="0" Grid.Column="0" Clicked="OnLogginClicked"/>
              <Label Grid.Row="0" Grid.Column="1" Text="{Binding random_attribute}"/>
              <BoxView Color="Navy" HeightRequest="1" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"/>

            </Grid>
          </ViewCell>
        </DataTemplate>
      </ListView.ItemTemplate>
    </ListView>

代码隐藏：

public Intervection()
        {
            InitializeComponent();
            var obj= new Model();
            this.BindingContext = prueba.List_of_object;
        }

public class ViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        public void RaiseOnPropertyChange([CallerMemberName] string propertyName = null)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }

    public ViewModel()
    {
        _viewmodel = new ViewModel();
    }

    private ViewModel _viewmodel;

    private string _attribute1;

    public string Attribute1
    {
        get { return _attribute1; }
        set { _attribute1= value; RaiseOnPropertyChange(); }
    }
.............
    }

public class Model
    {
        public List<obj> Intervencion;
        public string attribute2;
// Helpers...
}

这不会呈现任何东西。

我尝试了连续的方法。来自基本ListView与字符串，ListView的对象，...等。问题来自于我插入网格时。

检查Stackoverflow后。我找到了这个链接Create Grid from Code-Behind，但这不符合我的目的，因为我无法重新编写视图模型。（我甚至试图编码）。

像往常一样，谢谢你们。

Answer 1

我已将VerticalOptions添加到Listview和Grid。我创建了一个viewmodel，其中有一个属性，即项目列表。 viewmodel还实现了INotifyPropertyChanged。

您可以阅读有关INotifyPropertyChanged here的信息。

INotifyPropertyChanged接口用于通知客户端，通常是绑定客户端，属性值已更改。

XAML：

<ListView ItemsSource="{Binding MyObservableCollection}" VerticalOptions="FillAndExpand">
    <ListView.ItemTemplate>
      <DataTemplate>
        <ViewCell>
          <Grid Padding="5" VerticalOptions="Fill">
            <Grid.RowDefinitions>
              <RowDefinition Height="20"></RowDefinition>
              <RowDefinition Height="1"></RowDefinition>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="1*"></ColumnDefinition>
              <ColumnDefinition Width="3*"></ColumnDefinition>
            </Grid.ColumnDefinitions>

            <Button Text="Play" Grid.Row="0" Grid.Column="0"/>
            <Label Grid.Row="0" Grid.Column="1" Text="{Binding .}"/>
            <BoxView Color="Navy" HeightRequest="1" Grid.Row="1" 
                     Grid.Column="0" Grid.ColumnSpan="2"/>

          </Grid>
        </ViewCell>
      </DataTemplate>
    </ListView.ItemTemplate>
  </ListView>

ViewModel：

public class ListViewWithGridViewModel : INotifyPropertyChanged
{
    private ObservableCollection<string> _myObservableCollection;

    public ListViewWithGridViewModel()
    {
        MyObservableCollection = new ObservableCollection<string>(new List<string> { "abc", "xyz", "pqr", "aaa", "abc", "xyz", "pqr", "aaa", "abc", "xyz", "pqr", "aaa" });
    }

    public ObservableCollection<string> MyObservableCollection
    {
        get { return _myObservableCollection; }
        set
        {
            _myObservableCollection = value;
            OnPropertyChanged();
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null) => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

XAML.cs：

public partial class ListViewWithGrid : ContentPage
{
    public ListViewWithGrid()
    {
        InitializeComponent();
        BindingContext = new ListViewWithGridViewModel();
    }
}

Answer 2

最后我明白了。它所需的xaml是下一个（您可以编译来自代码问题的所有代码）。发布以防万一你想要使用另一种方法。正确答案（更优雅）是@ Rohit的回答。

<ContentPage.Resources>
      <ResourceDictionary>
        <Color x:FactoryMethod="FromHex" x:Key="fondoBlancoPalido">
          <x:Arguments>
            <x:String>#F2F2F2</x:String>
          </x:Arguments>
        </Color>
      </ResourceDictionary>
    </ContentPage.Resources>

<ListView x:Name="listView" ItemsSource="{Binding .}" BackgroundColor="{StaticResource fondoBlancoPalido}">
        <ListView.ItemTemplate>
          <DataTemplate>
            <ViewCell>
              <ViewCell.View>
                <Grid Padding="5">
                  <Grid.RowDefinitions>
                    <RowDefinition Height="60"></RowDefinition>
                    <RowDefinition Height="60"></RowDefinition>
                    <RowDefinition Height="10"></RowDefinition>
                  </Grid.RowDefinitions>
                  <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1*"></ColumnDefinition>
                    <ColumnDefinition Width="2*"></ColumnDefinition>
                    <ColumnDefinition Width="3*"></ColumnDefinition>
                  </Grid.ColumnDefinitions>

                  <Button Grid.Row="0" Grid.Column="0" Clicked="OnStartClicked" Image="play.png" BackgroundColor="Transparent" HorizontalOptions="Center" Grid.RowSpan="2"/>
                  <Label Grid.Row="0" Grid.Column="1" Text="Hora de Inicio: " XAlign="Center" YAlign="Center" TextColor="Black" FontAttributes="Bold"/>
                  <Label Grid.Row="0" Grid.Column="2" Text="{ Binding attribute3 }" XAlign="Center" YAlign="Center" TextColor="Black"/>
                  <Label Grid.Row="1" Grid.Column="1" Text="Encargado de la Tarea: " XAlign="Center" YAlign="Center" TextColor="Black" FontAttributes="Bold"/>
                  <Label Grid.Row="1" Grid.Column="2" Text="{ Binding attribute4 }" XAlign="Center" YAlign="Center" TextColor="Black"/>
                  <BoxView Color="Navy" HeightRequest="2" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3"/>
                </Grid>
              </ViewCell.View>
            </ViewCell>
          </DataTemplate>
        </ListView.ItemTemplate>
      </ListView>

将对象列表绑定到网格

2 个答案: