c# - 使用 xaml 设计项目模板

Question

我必须设计一个类似计算器的界面。我对如何做到这一点完全感到困惑。任何人都可以为我提供见解吗？如何在运行时将数据与这些按钮绑定。？

Answer 1

好的，这个工作正常 - 基本上我创建了以下 XAML 布局并使用以下绑定：

<Grid x:Name="grdItems">
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>

        <Button Content="{Binding Items[0].ItemName}"></Button>
        <Button Content="{Binding Items[1].ItemName}" Grid.Column="1"></Button>
        <Button Content="{Binding Items[2].ItemName}" Grid.Column="2"></Button>
        <Button Content="{Binding Items[3].ItemName}" Grid.Row="1"></Button>
        <Button Content="{Binding Items[4].ItemName}" Grid.Row="1" Grid.Column="1"></Button>
        <Button Content="{Binding Items[5].ItemName}" Grid.Row="1" Grid.Column="2"></Button>
        <Button Content="{Binding Items[6].ItemName}" Grid.Row="2"></Button>
        <Button Content="{Binding Items[7].ItemName}" Grid.Row="2" Grid.Column="1"></Button>
        <Button Content="{Binding Items[8].ItemName}" Grid.Row="2" Grid.Column="2"></Button>
        <Button Content="Prev" Command="{Binding MovePrevCommand}" Grid.Row="3"></Button>
        <Button Content="{Binding Items[9].ItemName}" Grid.Row="3" Grid.Column="1"></Button>
        <Button Content="Next" Command="{Binding MoveNextCommand}" Grid.Row="3" Grid.Column="2"></Button>
    </Grid>

这为您提供了网格布局

然后我创建了一个可以执行“窗口视图”的集合管理器类

class TestCollection
{
    public ObservableCollection<TestItem> Items { get; set; }

    List<TestItem> _items = new List<TestItem>();
    int pos = 0;

    public TestCollection(int size)
    {
        MoveNextCommand = new Command(new Action(MoveNext));
        MovePrevCommand = new Command(new Action(MovePrev));


        Items = new ObservableCollection<TestItem>();
        for (int i = 0; i < size; i++)
        {
            _items.Add(new TestItem("Item " + i.ToString()));
        }

        UpdateItems();
    }

    public void MoveNext()
    {
        pos += 10;

        if (pos > _items.Count - 10)
            pos = _items.Count - 10;

        UpdateItems();
    }

    public ICommand MoveNextCommand { get; set; }
    public ICommand MovePrevCommand { get; set; }

    public void MovePrev()
    {
        pos -= 10;

        if (pos < 0)
            pos = 0;

        UpdateItems();
    }

    private void UpdateItems()
    {
        Items.Clear();

        foreach (var i in _items.Skip(pos).Take(10))
        {
            Items.Add(i);
        }

   }

}

我创建了一个简单的 ICommand 实现来调用委托：

class Command : ICommand
{
    Action CallBack = null;

    public Command(Action cb)
    {
        CallBack = cb;
    }

    public bool CanExecute(object parameter)
    {
        return true;
    }

    public event EventHandler CanExecuteChanged;

    public void Execute(object parameter)
    {
        CallBack();
    }
}

TestItem 只是一个带有 ItemName 属性的简单类

class TestItem
{
    public string ItemName { get; set; }

    public TestItem(string itemName)
    {
        ItemName = itemName;
    }
}

然后在我添加的主应用程序代码中

 var i = new TestCollection(2000);

 grdItems.DataContext = i;

将集合连接到网格。效果很好 - 如果您按下按钮，您可以将命令绑定添加到您的项目以获得所需的效果（假设您当然需要每个项目的按钮！）

让我知道这是否可以帮助您入门，或者是否有任何您不明白的地方（或者这甚至可以在 Metro 上使用！！）

编辑：刚刚阅读，似乎 IObservableVector 现在取代了 WinRT 中的 ObservableCollection

这是 2012 年 1 月，所以可能是从那以后更新添加了 ObservableVector 的实现 - 但从本文看来，您需要实现它

http://blogs.u2u.be/diederik/post/2012/01/03/Hello-ObservableVector-goodbye-ObservableCollection.aspx

反正代码就在那里，所以不需要脑力！