在网格可观察集合中显示网格项目位置编号

Question

下面是我在网格视图中的项目模板。

                        </Grid.ColumnDefinitions>
                        <StackPanel>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="{Binding SerialNumber}" VerticalAlignment="Center" HorizontalAlignment="Left" FontWeight="Bold" Margin="10" FontSize="25"/>
                                <TextBlock Text="." VerticalAlignment="Center" HorizontalAlignment="Left" FontWeight="Bold" FontSize="25" />
                            </StackPanel>
                            <Image Grid.Column="0" Margin="20" Height="100" Width="150"   HorizontalAlignment="Center" Source="{Binding ImageUri,Mode=TwoWay}" VerticalAlignment="Center"/>
                        </StackPanel>
                </Border>
            </DataTemplate>
        </GridView.ItemTemplate>

我想要实现的是在 TextBlock Text="{Binding SerialNumber} 中显示集合中的项目位置（如果这是一个列表视图，它将是行号），请问我该如何实现这个。

Answer 1

您只需要定义一个具有特定属性的类并将其绑定到 xaml。

我做了一个简单的代码示例供大家参考：

<GridView ItemsSource="{Binding oc}">
        <GridView.ItemTemplate>
            <DataTemplate>
                <Border>
                    <StackPanel>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="{Binding SerialNumber}" VerticalAlignment="Center" HorizontalAlignment="Left" FontWeight="Bold" Margin="10" FontSize="25"/>
                            <TextBlock Text="." VerticalAlignment="Center" HorizontalAlignment="Left" FontWeight="Bold" FontSize="25" />
                        </StackPanel>
                        <Image Grid.Column="0" Margin="20" Height="100" Width="150"   HorizontalAlignment="Center" Source="{Binding source,Mode=TwoWay}" VerticalAlignment="Center"/>
                    </StackPanel>
                </Border>
            </DataTemplate>
        </GridView.ItemTemplate>
</GridView>

public sealed partial class MainPage : Page
{
    public ObservableCollection<Test> oc { get; set;}
    public MainPage()
    {
        this.InitializeComponent();
        oc = new ObservableCollection<Test>();
        oc.CollectionChanged += Oc_CollectionChanged;
        for (int i=0;i<10;i++)
        {
            oc.Add(new Test() {SerialNumber=i,source=new BitmapImage(new Uri("ms-appx:///Assets/test.png")) });
        }
        this.DataContext = this;
    }

    private void Oc_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
    {
        if (e.Action == System.Collections.Specialized.NotifyCollectionChangedAction.Remove)
        {
            for (int i =e.OldStartingIndex; i<oc.Count;i++)
            {
                oc[i].SerialNumber = i;
            }
        }
    }
}


public class Test:INotifyPropertyChanged
{
    private int _SerialNumber;
    public int SerialNumber
    {
        get { return _SerialNumber; }
        set
        {
            _SerialNumber = value;
            RaisePropertyChanged("SerialNumber");
        }
    }

    private BitmapImage _source;
    public BitmapImage source
    {
        get { return _source; }
        set
        {
            _source = value;
            RaisePropertyChanged("source");
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    private void RaisePropertyChanged(string PropertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this,new PropertyChangedEventArgs(PropertyName));
        }
    }
}