替代行颜色ListView xamarin表单

时间:2016-04-25 12:36:33

标签: listview colors row xamarin.forms

我在我的ListView上绑定了一个ObersvableCollection。

我想替换我的ListView的行颜色。

我找到了很多代码,但对我不起作用......如果你可以分享一个例子/样本!

像这样:

enter image description here

但我不知道我怎么能这样做?

我使用Visual Studio 2015 / Xamarin表单。

我的项目必须适用于Android和IOS。

感谢您的帮助!

4 个答案:

答案 0 :(得分:4)

您可以使用自定义ListView。如果您的Cell继承自ViewCell

,则此方法有效
public class AlternatingListView : ListView
{
    public AlternatingListView(ListViewCachingStrategy cachingStrategy) : base(cachingStrategy)
    { 
    }

    protected override void SetupContent(Cell content, int index)
    {
        base.SetupContent(content, index);

        var viewCell = content as ViewCell;
        viewCell.View.BackgroundColor = index % 2 == 0 ? Color.Blue : Color.Red;
    }     
}

答案 1 :(得分:2)

使用XF没有内置的方法。最简单的方法是在Item模型中包含一个Index属性(您必须在将其添加到List / Collection时手动设置它)来确定颜色。然后,您可以将RowColor属性绑定到ItemTemplate。

public class MyItem {

  public int Index { get; set; }
  public string Name { get; set; }

  public Color RowColor { 
    get {
      if (Index % 2) == 0))
        return Color.Red;
      else
        return Color.Blue; 
    }
  }
}

您还可以使用ValueConverter根据索引行确定颜色 - 这样可以让您的模型不必确定它自己的颜色,这将是一个更清晰的实现。

答案 2 :(得分:0)

另一个选择是将列表视图传递到绑定上下文之前,将其添加到列表视图本身包含的对象中。

例如,当从API请求列表并反序列化它们时,您可以继续进行迭代,并为列表中的每个对象分配背景颜色属性:

            var response = client.GetAsync(EndPointHelper.GetEndPoint("MaintenanceForEquipment") + "/" + equipmentid).Result;
            var content = await response.Content.ReadAsStringAsync();
            var contentmaintenances = JsonConvert.DeserializeObject<List<Maintenance>>(content);
            var count = 1;
            foreach (var maint in contentmaintenances)
            {
                maint.BackgroundColor = count % 2 == 0 ? "#A1DBE4" : "#155DB0";
                maint.TextColor = count % 2 == 0 ? "#529CFF" : "#e9ecf0";
                count++;
            }

从此处,在将访问记录分配给绑定上下文之后,您可以在列表视图的ItemTemplate中对其进行访问:

<ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <StackLayout BackgroundColor="{Binding BackgroundColor}"
                    Orientation="Vertical">
                        <StackLayout Orientation="Horizontal">
                            <Label Text="{Binding EquipmentName}"
                            TextColor="{Binding TextColor}" FontSize="Medium"/>
                            <Label Text="{Binding StartDateString}" TextColor="{Binding TextColor}"></Label>
                            <Label Text="{Binding MaintenanceTypeName}"
                            HorizontalOptions="EndAndExpand"
                            TextColor="{Binding TextColor}" />
                        </StackLayout>
                    </StackLayout>
                </ViewCell>

            </DataTemplate>
        </ListView.ItemTemplate>

如果您想在Xamarin代码中使用更少的迭代,则可以通过正在使用的任何API隐式生成背景色,前提是您也可以访问它,因此只需分配一次并再次访问即可在调用API之后在客户端上进行。

希望这可以帮助寻找这个旧问题的人寻求另一种可能的解决方案。

答案 3 :(得分:0)

您可以使用自定义视图单元格。我已经在项目中编写了一个自定义视图单元格,并使用了XFGloss(XFGloss是Xamarin.Forms项目的附加组件,它为标准XF页面和控件类添加了新属性),以使listView的行变得丰富多彩。您的listView不会失去XFGloss的触觉反馈。它也适用于分组的listViews。我使用的自定义viewCell是:

from PyQt5.QtWidgets import *

class ModelessDialog(QDialog):
    def __init__(self, part, threshold, parent=None):
        super().__init__(parent)
        self.setWindowTitle("Baseline")
        self.setGeometry(800, 275, 300, 200)
        self.part = part
        self.threshold = threshold
        self.threshNew = 4.4
        
        label    = QLabel("Part            : {}\nThreshold   : {}".format(
                                                self.part, self.threshold))
        self.label2 = QLabel("ThreshNew : {:,.2f}".format(self.threshNew))
        
        self.spinBox = QDoubleSpinBox()
        self.spinBox.setMinimum(-2.3)
        self.spinBox.setMaximum(99)
        self.spinBox.setValue(self.threshNew)
        self.spinBox.setSingleStep(0.02)
        self.spinBox.valueChanged.connect(self.valueChang)
        
        buttonBox = QDialogButtonBox(
            QDialogButtonBox.Ok 
            | QDialogButtonBox.Cancel
            | QDialogButtonBox.Apply)

        layout = QVBoxLayout()            
        layout.addWidget(label)
        layout.addWidget(self.label2)
        layout.addWidget(self.spinBox)
        layout.addWidget(buttonBox)
        self.resize(300, 200)  
        self.setLayout(layout)                                 

        okBtn = buttonBox.button(QDialogButtonBox.Ok) 
        okBtn.clicked.connect(self._okBtn)

        cancelBtn = buttonBox.button(QDialogButtonBox.Cancel)
        cancelBtn.clicked.connect(self.reject)   

        applyBtn = buttonBox.button(QDialogButtonBox.Apply)       # +++
        applyBtn.clicked.connect(self._apply)                     # +++

    def _apply(self):                                             # +++
        print('Hello Apply')    

    def _okBtn(self):
        print("""
            Part      : {}
            Threshold : {}
            ThreshNew : {:,.2f}""".format(
                self.part, self.threshold, self.spinBox.value()))
        
    def valueChang(self):
        self.label2.setText("ThreshNew : {:,.2f}".format(self.spinBox.value()))
        

class Window(QWidget):
    def __init__(self):
        super().__init__()
        label  = QLabel('Hello Dialog', self)
        button = QPushButton('Open Dialog', self)
        button.clicked.connect(self.showDialog)
        
        layout = QVBoxLayout()
        layout.addWidget(label)
        layout.addWidget(button)
        self.setLayout(layout)        

    def showDialog(self):
        self.dialog = ModelessDialog(2, 55.77, self)
        self.dialog.show()

if __name__ == '__main__':
    import sys
    app = QApplication(sys.argv)
    win = Window()
    win.resize(300, 200)
    win.show()
    sys.exit(app.exec_())

及其在xaml文件中的用法很简单,如下行:

rename --bundleId com.newpackage.appname
pub global run rename --appname "Your New App Name"