Xamarin.forms使用堆栈布局和网格在后面的代码中添加动态视图单元格

时间:2015-11-05 01:35:28

标签: xaml tableview xamarin.forms

我正在尝试创建如下所示的动态视图单元格并添加到tableview中。 但是,当使用xaml.cs时,我似乎无法显示数据。我无法使用堆栈布局属性在视图单元格内创建网格。以下是我尝试过的代码。有人请帮助我,我被卡住了,我似乎无法在谷歌上找到答案:(

以下是我在xaml表单上编写的代码:

 <ViewCell x:Name="viewCellM">
    <StackLayout Orientation="Horizontal">
        <Grid>
            <Grid.ColumnDefinitions>
                 <ColumnDefinition Width="10">
                 </ColumnDefinition>
                 <ColumnDefinition Width="250">
                 </ColumnDefinition>
                 <ColumnDefinition Width="*">
                 </ColumnDefinition>
             </Grid.ColumnDefinitions>
             <Label x:Name="M" Text="Block M" YAlign="Center" Grid.Row="0" Grid.Column="1"></Label>
             <Image x:Name="ImageM" Source="check_mark.jpg" Grid.Row="0" Grid.Column="2"></Image>
          </Grid>
     </StackLayout>
 </ViewCell>

以下是我试过的代码,但它没有显示任何内容,希望有人可以指导我:

 for (int m = 0; m < filterList.Count; m++) 
        {
            Grid gridAdd = new Grid
            {
                ColumnDefinitions = 
                {
                    new ColumnDefinition { Width = new GridLength(10,GridUnitType.Absolute)},
                    new ColumnDefinition { Width = new GridLength(250,GridUnitType.Absolute)},
                    new ColumnDefinition { Width = new GridLength(1,GridUnitType.Star)},
                }
            };

            gridAdd.Children.Add (new Label { TextColor = Color.Black, Text = "Block L Level 2" }, 1, 0);

            blockSection.Add(new ViewCell()
            {
                    View = new StackLayout {
                        Orientation = StackOrientation.Horizontal,

                        Children = gridAdd
                    }
            });
                ForceLayout();
        }
    }

非常感谢帮助:)

1 个答案:

答案 0 :(得分:1)

我不确定您的代码尝试实现的目标,但我假设您想要在UI中显示所有filterList项目的列表?

以下是粗略大纲如何做到这一点。

首先让您的filterList成为ObservableCollection<FilterItem>FilterItem应该实现INotifyPropertyChanged

public class FilterItem: INotifyPropertyChanged{

   public event PropertyChangedEventHandler PropertyChanged;

   bool _IsChecked
   public bool IsChecked{
     get { return _IsChecked;}
     set { SetProperty(ref _IsChecked, value);}
   }

   bool _BlockM
   public bool BlockM{
     get { return _BlockM;}
     set { SetProperty(ref _BlockM, value);}
   } 

   private void SetProperty<T>(ref T backingField, T newValue, [CallerMemberName] string propertyName = null){
     if (backingField!=newValue){
       backingField = newValue;

       if (PropertyChanged!=null)
         PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
     }
   }
}

然后在XAML中

...

<ListView x:Name="lvFilter">
  <ListView.ItemTemplate>
    <DataTemplate>
      <ViewCell> 
        <Grid>
            <Grid.ColumnDefinitions>
                 <ColumnDefinition Width="10">
                 </ColumnDefinition>
                 <ColumnDefinition Width="250">
                 </ColumnDefinition>
                 <ColumnDefinition Width="*">
                 </ColumnDefinition>
             </Grid.ColumnDefinitions> 
             <Image Source="check_mark.jpg" Grid.Column="0" IsVisible="{Binding IsChecked, Converter={...}}"/>
             <Label Text="Block M" YAlign="Center" Grid.Column="1"/>
             <Label Text="{Binding BlockM}" YAlign="Center" Grid.Column="2"/>
          </Grid> 
      </ViewCell>
    </DataTemplate>
 </ListView.ItemTemplate>
</ListView>

在代码隐藏中,您可以设置ItemsSource

public class MyView: ..

... 
   private readonly ObservableCollection<FilterItem> filterList = new ...;
...

  public MyView(){
     InitializeComponent();
     lvFilter.ItemsSource = filterList;
  }
}