Управление множественными выборами с MVVM

Вы можете использовать объект Player и изменить его свойства x и y.
Создайте также объект K, чтобы установить логическое значение используемых в настоящее время ключей чисел.
Чем внутри петли, как requestAnimationFrame переместить игрока:

const Player = {
  el: document.getElementById('mouse'),
  x: 200,
  y: 100,
  speed: 2,
  move() {
    // If no collision with map or tiles... (TODO!)
    this.el.style.transform = `translate(${this.x}px, ${this.y}px)`;
  }
};
 
const K = {
  fn(ev) {
    ev.preventDefault();
    const k = ev.which;
    if (k >= 37 && k <= 40) K[k] = ev.type === "keydown"; // If is arrow
  }
};
  
const update = () => {
    // 1 / Math.sqrt(2) = 0.7071.. (Diagonal)
    let dist = K[38] && (K[37] || K[39]) || K[40] && (K[37] || K[39]) ? 0.707 : 1;
    dist *= Player.speed;
    if (K[37]) Player.x -= dist;
    if (K[38]) Player.y -= dist;
    if (K[39]) Player.x += dist;
    if (K[40]) Player.y += dist;
    Player.move();
}

document.addEventListener('keydown', K.fn);
document.addEventListener('keyup', K.fn);

(function engine() {
  update();
  window.requestAnimationFrame(engine);
}());
#mouse{
  position: absolute;
  left: 0;  top: 0;
  width: 20px;  height: 20px;
  background: #000;  border-radius: 50%;
}
Click here to focus, and use arrows
<div id="mouse"></div>

<час>

A [ 1123] более простой пример , который перемещает элемент на Npx шагов и повторяется до тех пор, пока вы удерживаете клавишу нажатой (как при наборе текста), будет:

]
const Player = {
  el: document.getElementById('mouse'),
  x: 0,
  y: 0,
  step: 10,
  move() {
    this.el.style.transform = `translate(${this.x}px, ${this.y}px)`;
  }
};

const keysHandler = (ev) => {
  const k = ev.which;
  if (k>=37 && k<=40) {
    ev.preventDefault();
    ({
      '37' () {Player.x -= Player.step},
      '38' () {Player.y -= Player.step},
      '39' () {Player.x += Player.step},
      '40' () {Player.y += Player.step},
    }[k]());
    Player.move();
  }
}

document.addEventListener('keydown', keysHandler);
#mouse{
  position: absolute;
  left: 0;  top: 0;
  width: 20px;  height: 20px;
  background: #000;  border-radius: 50%;
}
Click here to focus, and use arrows
<div id="mouse"></div>

59
задан Paul Alexander 29 April 2009 в 16:35
поделиться

2 ответа

Добавьте свойство IsSelected к вашему дочернему ViewModel ( OrderViewModel в вашем случае):

public bool IsSelected { get; set; }

Привязать выбранное свойство контейнера к этому ( для ListBox в этом случае):

<ListBox.ItemContainerStyle>
    <Style TargetType="{x:Type ListBoxItem}">
        <Setter Property="IsSelected" Value="{Binding Mode=TwoWay, Path=IsSelected}"/>
    </Style>
</ListBox.ItemContainerStyle>

IsSelected обновляется в соответствии с соответствующим полем в контейнере.

Вы можете получить выбранные дочерние элементы в модели представления, выполнив следующие действия:

public IEnumerable<OrderViewModel> SelectedOrders
{
    get { return Orders.Where(o => o.IsSelected); }
}
94
ответ дан 24 November 2019 в 18:22
поделиться

Если вы используете MVVM-LIGHT, вы можете использовать этот шаблон:

https://galasoft.ch/posts/2010/05/handling-datagrid-selecteditems-in-an -mvvm-friendly-way

Не особенно элегантно, но похоже, что он должен быть как минимум надежным

1
ответ дан 24 November 2019 в 18:22
поделиться
Другие вопросы по тегам:

Похожие вопросы: