Что делает стиль apple-mobile-web-app-status-bar?

Очень поздно для вечеринки с моим ответом, но для тех, кто хочет получить чистое решение 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();
    }
}
23
задан BoltClock 13 July 2011 в 20:01
поделиться

2 ответа

Во-первых, подсказка apple-mobile-web-app-capable должна быть установлена ​​для того, чтобы это работало. Эта подсказка заставляет веб-приложение работать в полноэкранном режиме: оно удаляет адресную строку и кнопки навигации, которые вы получаете по умолчанию в Mobile Safari. Удаленные области выделены красным здесь:

apple mobile web app capable

Итак, когда приложение находится в полноэкранном режиме (то есть пользователь добавил сайт на свою домашнюю страницу) ), вы также можете контролировать цвет оставшейся тонкой строки состояния в верхней части страницы с помощью apple-mobile-web-app-status-bar-style, выделенного красным здесь:

apple mobile web app status bar style

В соответствии с документы:

Если для содержимого установлено значение default, строка состояния выглядит нормально. Если установлено значение black, строка состояния имеет черный фон. Если установлено значение black-translucent, строка состояния будет черной и полупрозрачной. Если установлено значение по умолчанию или черный, веб-контент отображается под строкой состояния. Если установлено значение black-translucent, веб-контент отображается на весь экран, частично скрытый строкой состояния.

Несколько предостережений:

  1. Это работает только на первой странице, которую вы загружаете; любая навигация на другую страницу вызовет появление адресной строки и кнопок навигации. Поэтому, если вы хотите, чтобы это работало, вы должны создать одностраничный веб-сайт (для нескольких «страниц» рассмотрите подход загрузки Ajax-страниц, такой как тот, который используется в инфраструктуре jQuery Mobile).

  2. Это работает, только когда вы заходите на веб-страницу с помощью ярлыка приложения; , если вы переходите на веб-сайт непосредственно из Mobile Safari, это не имеет никакого эффекта.

48
ответ дан Ben 13 July 2011 в 20:01
поделиться

Он меняет верхнюю полосу с баннером и носителем на нем и делает его полупрозрачным черным.

0
ответ дан Anonymous 13 July 2011 в 20:01
поделиться