Data-Driven UI

Templates enable a certain kind of UI programming sometimes called data-centric UI and sometimes called data-driven UI. The idea is that the data is the most important thing in our application, and through the use of declarative UI techniques (as enabled by XAML) we shape the data into something suitable for presentation to the user. Ideally, we do this without changing the underlying data at all, but by instead transforming the data on its way to the user as appropriate.

For example, getting back to our tic-tac-toe program, we haven't been very data-driven at all, instead bundling up the manipulation of the data with the UI code (a.k.a. "putting your logic in the click handler"). A better way to start is to move our game logic into a class of its own that has nothing at all to do with the UI:[59]

class TicTacThree : INotifyPropertyChanged {
  public TicTacThree(int dimension) {...}
  public void NewGame(  ) {...}
  public void Move(int cellNumber) {...}
  public IEnumerable<Cell> Cells { get {...} }
  public string CurrentPlayer { get {...} }
  public bool HasWinner { get {...} }
}

class Cell : INotifyPropertyChanged {
  public Cell(int cellNumber) {...}
  public int CellNumber { get {...} }
  public PlayerMove Move { get {...} set {...} }
}

class PlayerMove : INotifyPropertyChanged { public string PlayerName { get {...} set {...} } public int MoveNumber { get {...} set {...} } public bool IsPartOfWin { get {...} set {...} } public PlayerMove(string playerName, int moveNumber) {...} ...

Get Programming WPF, 2nd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.