Очень поздно для вечеринки с моим ответом, но для тех, кто хочет получить чистое решение MVVM, это можно сделать с помощью Trigger Event (для обновления привязки при выборе пользователем нового элемента) и триггера данных (для обновления выбранного элемента когда значение привязки изменяется).
Для этого для работы в главном ViewModel нужны элементы, свойство для выбранного в данный момент элемента и свойство команды, которое будет вызываться, когда изменяется текущий выбранный элемент:
public class MainViewModel : ViewModelBase
{
// the currently selected node, can be changed programmatically
private Node _CurrentNode;
public Node CurrentNode
{
get { return this._CurrentNode; }
set { this._CurrentNode = value; RaisePropertyChanged(() => this.CurrentNode); }
}
// called when the user selects a new node in the tree view
public ICommand SelectedNodeChangedCommand { get { return new RelayCommand<Node>(OnSelectedNodeChanged); } }
private void OnSelectedNodeChanged(Node node)
{
this.CurrentNode = node;
}
// list of items to display in the tree view
private ObservableCollection<Node> _Items;
public ObservableCollection<Node> Items
{
get { return this._Items; }
set { this._Items = value; RaisePropertyChanged(() => this.Items); }
}
}
TreeView требует триггера события для вызова SelectedNodeChangedCommand при изменении выбора и DataTrigger в стиле TreeViewItem, чтобы элементы управления выбирались, когда значение CurrentNode было изменено программно в коде:
<TreeView x:Name="treeView" ItemsSource="{Binding Items}"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:cmd ="http://www.galasoft.ch/mvvmlight">
<TreeView.Resources>
<conv:EqualityConverter x:Key="EqualityConverter" />
<Style TargetType="TreeViewItem">
<Setter Property="IsExpanded" Value="True" />
<Setter Property="IsSelected" Value="False" />
<Style.Triggers>
<!-- DataTrigger updates TreeViewItem selection when vm code changes CurrentNode -->
<DataTrigger Value="True">
<DataTrigger.Binding>
<MultiBinding Converter="{StaticResource EqualityConverter}">
<Binding RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type TreeView}}" Path="DataContext.CurrentNode" />
<Binding />
</MultiBinding>
</DataTrigger.Binding>
<Setter Property="IsSelected" Value="True" />
</DataTrigger>
</Style.Triggers>
</Style>
<!-- *** HierarchicalDataTemplates go here *** -->
</TreeView.Resources>
<!-- EventTrigger invokes SelectedNodeChangedCommand when selection is changed by user interaction -->
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectedItemChanged">
<cmd:EventToCommand Command="{Binding SelectedNodeChangedCommand}" CommandParameter="{Binding RelativeSource={RelativeSource AncestorType=TreeView}, Path=SelectedItem}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</TreeView>
DataTrigger работает, обнаруживая, когда значение CurrentNode соответствует узлу для текущего элемента списка. К сожалению, DataTriggers не могут привязать свое значение, поэтому вместо этого нужно протестировать с помощью EqualityConverter, который просто выполняет простое сравнение:
public class EqualityConverter : IMultiValueConverter
{
public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
{
return values[0] == values[1];
}
public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
Во-первых, подсказка apple-mobile-web-app-capable
должна быть установлена для того, чтобы это работало. Эта подсказка заставляет веб-приложение работать в полноэкранном режиме: оно удаляет адресную строку и кнопки навигации, которые вы получаете по умолчанию в Mobile Safari. Удаленные области выделены красным здесь:
Итак, когда приложение находится в полноэкранном режиме (то есть пользователь добавил сайт на свою домашнюю страницу) ), вы также можете контролировать цвет оставшейся тонкой строки состояния в верхней части страницы с помощью apple-mobile-web-app-status-bar-style
, выделенного красным здесь:
В соответствии с документы:
Если для содержимого установлено значение
default
, строка состояния выглядит нормально. Если установлено значениеblack
, строка состояния имеет черный фон. Если установлено значениеblack-translucent
, строка состояния будет черной и полупрозрачной. Если установлено значение по умолчанию или черный, веб-контент отображается под строкой состояния. Если установлено значениеblack-translucent
, веб-контент отображается на весь экран, частично скрытый строкой состояния.
Несколько предостережений:
Это работает только на первой странице, которую вы загружаете; любая навигация на другую страницу вызовет появление адресной строки и кнопок навигации. Поэтому, если вы хотите, чтобы это работало, вы должны создать одностраничный веб-сайт (для нескольких «страниц» рассмотрите подход загрузки Ajax-страниц, такой как тот, который используется в инфраструктуре jQuery Mobile).
Это работает, только когда вы заходите на веб-страницу с помощью ярлыка приложения; , если вы переходите на веб-сайт непосредственно из Mobile Safari, это не имеет никакого эффекта.
Он меняет верхнюю полосу с баннером и носителем на нем и делает его полупрозрачным черным.