Hinzufügen eines ToolBar-Elements mit Befehlen (HTML) - Windows app development

Artikel
03/04/2016

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation ]

ToolBar ist ein einfaches Steuerelement für die Befehlsskalierbarkeit. Es verfügt über einen action area, in dem Befehle sofort verfügbar sind, und einen overflow area, in dem Befehle ausgeblendet sind, aber auf Anforderung durch den Endbenutzer angezeigt werden können. Das Steuerelement unterstützt das adaptive Verhalten, indem bei wenig Platz das dynamische Verschieben von Befehlen vom primären in den sekundären Bereich ermöglicht wird. ToolBar ist nicht auf eine bestimmte Position in einer App beschränkt, sondern kann an verschiedenen Stellen wie etwa auf der Splitview, in einem Flyout und auf der canvas angezeigt werden.

Hinweis Ausführliche Informationen zu den folgenden Codierungsszenarien finden Sie auf der Website WinJS ausprobieren.

Erstellen einer Symbolleiste mit deklarativ hinzugefügten Befehlen

Befehle können der Symbolleiste deklarativ hinzugefügt werden. In diesem Szenario enthält die Symbolleiste vier primäre Befehle und zwei sekundäre Befehle.

Dn972389.sample_toolbar(de-de,WIN.10).png

<div class="basicToolbar" data-win-control="WinJS.UI.ToolBar">
    <!-- Primary commands -->
    <button data-win-control="WinJS.UI.Command" data-win-options="{
            id:'cmdEdit',
            label:'edit',
            section:'primary',
            type:'button',
            icon: 'edit',
            onclick: Sample.outputCommand}"></button>
    <button data-win-control="WinJS.UI.Command" data-win-options="{
            id:'cmdDelete',
            label:'delete',
            section:'primary',
            type:'button',
            icon: 'delete',
            onclick: Sample.outputCommand}"></button>
    <button data-win-control="WinJS.UI.Command" data-win-options="{
            id:'cmdFavorite',
            label:'favorite',
            section:'primary',
            type:'toggle',
            icon: 'favorite',
            onclick: Sample.outputCommand}"></button>
    <button data-win-control="WinJS.UI.Command" data-win-options="{
            id:'cmdOpenWith',
            label:'open with',
            section:'primary',
            type:'button',
            icon: 'openfile',
            onclick: Sample.outputCommand}"></button>
    <button data-win-control="WinJS.UI.Command" data-win-options="{
            id:'cmdDownload',
            label:'download',
            section:'primary',
            type:'button',
            icon: 'download',
            onclick: Sample.outputCommand}"></button>

    <!-- Secondary command -->
    <button data-win-control="WinJS.UI.Command" data-win-options="{
            id:'cmdSettings',
            label:'settings',
            section:'secondary',
            type:'button',
            onclick: Sample.outputCommand}"></button>
    <button data-win-control="WinJS.UI.Command" data-win-options="{
            id:'cmdShare',
            label:'share',
            section:'secondary',
            type:'button',
            onclick: Sample.outputCommand}"></button>
</div>
<div class="status"></div>


WinJS.Namespace.define("Sample", {
    outputCommand: WinJS.UI.eventHandler(function (ev) {
        var status = document.querySelector(".status");
        var command = ev.currentTarget;
        if (command.winControl) {
            var label = command.winControl.label || command.winControl.icon || "button";
            var section = command.winControl.section || "";
            var msg = section + " command " + label + " was pressed";
            status.textContent = msg;
        }
    })
});

WinJS.UI.processAll();

Angeben der Gruppierung und Reihenfolge beim Auslagern von Befehlen

Entwickler können eine Gruppierung und eine Reihenfolge für das Auslagern von Befehlen in den Überlaufbereich angeben, die nicht der visuellen Reihenfolge der Leserichtung von rechts nach links entspricht. Dies ist nützlich, wenn der Platz auf dem Bildschirm beschränkt ist. Das Steuerelement wird auf der Grundlage der Werte absteigend ausgelagert. Standardmäßig werden die Befehle von rechts nach links ausgelagert. Der Standardwert für die Priorität ist jedoch nicht definiert.

Dn972389.grouping_order_toolbar(de-de,WIN.10).png

<div class="groupingToolbar" data-win-control="WinJS.UI.ToolBar">
    <!-- Primary commands -->
    <button data-win-control="WinJS.UI.Command" data-win-options="{
            id:'cmdEdit',
            label:'edit',
            section:'primary',
            type:'button',
            icon: 'edit',
            priority:2,
            onclick: Sample.outputCommand}"></button>
    <button data-win-control="WinJS.UI.Command" data-win-options="{
            id:'cmdDelete',
            label:'delete',
            section:'primary',
            type:'button',
            icon: 'delete',
            priority:2,
            onclick: Sample.outputCommand}"></button>
    <hr data-win-control="WinJS.UI.Command" data-win-options="{type:'separator'}" />
    <button data-win-control="WinJS.UI.Command" data-win-options="{
            id:'cmdFavorite',
            label:'favorite',
            section:'primary',
            type:'toggle',
            icon: 'favorite',
            priority:3,
            onclick: Sample.outputCommand}"></button>
    <button data-win-control="WinJS.UI.Command" data-win-options="{
            id:'cmdOpenWith',
            label:'open with',
            section:'primary',
            type:'button',
            icon: 'openfile',
            priority:3,
            onclick: Sample.outputCommand}"></button>
    <button data-win-control="WinJS.UI.Command" data-win-options="{
            id:'cmdDownload',
            label:'download',
            section:'primary',
            type:'button',
            icon: 'download',
            priority:3,
            onclick: Sample.outputCommand}"></button>
    <button data-win-control="WinJS.UI.Command" data-win-options="{
            id:'cmdPin',
            label:'pin',
            section:'primary',
            type:'button',
            icon: 'pin',
            priority:3,
            onclick: Sample.outputCommand}"></button>
    <hr data-win-control="WinJS.UI.Command" data-win-options="{type:'separator'}" />
    <button data-win-control="WinJS.UI.Command" data-win-options="{
            id:'cmdZoom',
            label:'zoom',
            section:'primary',
            type:'button',
            icon: 'zoomin',
            priority:1,
            onclick: Sample.outputCommand}"></button>
    <button data-win-control="WinJS.UI.Command" data-win-options="{
            id:'cmdFullscreen',
            label:'full screen',
            section:'primary',
            type:'button',
            icon: 'fullscreen',
            priority:1,
            onclick: Sample.outputCommand}"></button>

    <!-- Secondary command -->
    <button data-win-control="WinJS.UI.Command" data-win-options="{
            id:'cmdSettings',
            label:'settings',
            section:'secondary',
            type:'button',
            onclick: Sample.outputCommand}"></button>
    <button data-win-control="WinJS.UI.Command" data-win-options="{
            id:'cmdShare',
            label:'share',
            section:'secondary',
            type:'button',
            onclick: Sample.outputCommand}"></button>
</div>
<div class="status"></div>

WinJS.Namespace.define("Sample", {
    outputCommand: WinJS.UI.eventHandler(function (ev) {
        var status = document.querySelector(".status");
        var command = ev.currentTarget;
        if (command.winControl) {
            var label = command.winControl.label || command.winControl.icon || "button";
            var section = command.winControl.section || "";
            var priority = command.winControl.priority;
            var msg = section + " command " + label + " with priority " + priority + " was pressed";
            status.textContent = msg;
        }
    })
});

WinJS.UI.processAll();

Gleichzeitiges Anzeigen mehrerer Symbolleisten

Entwickler können mehrere Symbolleisten erstellen und gleichzeitig anzeigen.

Beispiel für mehrere Symbolleisten

<div class="sampleToolBar" data-win-control="WinJS.UI.ToolBar">
    <!-- Primary commands -->
    <button data-win-control="WinJS.UI.Command" data-win-options="{
                id:'cmdEdit',
                label:'edit',
                section:'primary',
                type:'button',
                icon: 'edit',
                onclick: Sample.outputCommand}"></button>
    <button data-win-control="WinJS.UI.Command" data-win-options="{
                id:'cmdFavorite',
                label:'favorite',
                section:'primary',
                type:'toggle',
                icon: 'favorite',
                onclick: Sample.outputCommand}"></button>
    <button data-win-control="WinJS.UI.Command" data-win-options="{
                id:'cmdDelete',
                label:'delete',
                section:'primary',
                type:'button',
                icon: 'delete',
                onclick: Sample.outputCommand}"></button>

    <!-- Secondary commands -->
    <button data-win-control="WinJS.UI.Command" data-win-options="{
                id:'cmdSettings',
                label:'settings',
                section:'secondary',
                type:'button',
                onclick: Sample.outputCommand}"></button>
    <button data-win-control="WinJS.UI.Command" data-win-options="{
                id:'cmdShare',
                label:'share',
                section:'secondary',
                type:'button',
                onclick: Sample.outputCommand}"></button>
</div>

<div class="sampleToolBar2" data-win-control="WinJS.UI.ToolBar">
    <!-- Primary commands -->
    <button data-win-control="WinJS.UI.Command" data-win-options="{
                id:'cmdBold',
                section:'primary',
                type:'toggle',
                icon: 'bold',
                onclick: Sample.outputCommand}"></button>
    <button data-win-control="WinJS.UI.Command" data-win-options="{
                id:'cmdItalic',
                section:'primary',
                type:'toggle',
                icon: 'italic',
                onclick: Sample.outputCommand}"></button>
    <button data-win-control="WinJS.UI.Command" data-win-options="{
                id:'cmdUnderline',
                section:'primary',
                type:'toggle',
                icon: 'underline',
                onclick: Sample.outputCommand}"></button>
    <button data-win-control="WinJS.UI.Command" data-win-options="{
                id:'cmdEmoticon',
                section:'primary',
                type:'button',
                icon: 'emoji',
                onclick: Sample.outputCommand}"></button>

    <!-- Secondary commands -->
    <button data-win-control="WinJS.UI.Command" data-win-options="{
                id:'cmdSettings',
                label:'settings',
                section:'secondary',
                type:'button',
                onclick: Sample.outputCommand}"></button>
    <button data-win-control="WinJS.UI.Command" data-win-options="{
                id:'cmdShare',
                label:'share',
                section:'secondary',
                type:'button',
                onclick: Sample.outputCommand}"></button>
</div>
<div class="status"></div>

WinJS.Namespace.define("Sample", {
    outputCommand: WinJS.UI.eventHandler(function (ev) {
        var status = document.querySelector(".status");
        var command = ev.currentTarget;
        if (command.winControl) {
            var label = command.winControl.label || command.winControl.icon || "button";
            var section = command.winControl.section || "";
            var msg = section + " command " + label + " was pressed";
            status.textContent = msg;
        }
    })
});

WinJS.UI.processAll();

Erstellen einer Symbolleiste mit Befehlen, die mit „WinJS.Binding.List“ hinzugefügt werden

Mithilfe von WinJS.Binding.List kann eine Symbolleiste über die Eigenschaft data der Symbolleiste mit Befehlen gefüllt werden.

Beispiel für eine Symbolleiste mit Befehlen aus einer WinJS-Bindungsliste

<div class="imperativeToolBar" data-win-control="WinJS.UI.ToolBar"
     data-win-options="{data: Sample.commandList}"></div>
<div class="status"></div>

WinJS.Namespace.define("Sample", {
    commandList: null,
    outputCommand: WinJS.UI.eventHandler(function (ev) {
        var status = document.querySelector(".status");
        var command = ev.currentTarget;
        if (command.winControl) {
            var label = command.winControl.label || command.winControl.icon || "button";
            var section = command.winControl.section || "";
            var msg = section + " command " + label + " was pressed";
            status.textContent = msg;
        }
    })
});

var dataArray = [
    new WinJS.UI.Command(null, 
      { id: 'cmdEdit', label: 'edit', section: 'primary', type: 'button', icon: 'edit', onclick: Sample.outputCommand }),
    new WinJS.UI.Command(null, 
      { id: 'cmdDelete', label: 'delete', section: 'primary', type: 'button', icon: 'delete', onclick: Sample.outputCommand }),
    new WinJS.UI.Command(null, 
      { id: 'cmdFavorite', label: 'favorite', section: 'primary', type: 'toggle', icon: 'favorite', 
        onclick: Sample.outputCommand }),
    new WinJS.UI.Command(null, 
      { id: 'cmdOpenWith', label: 'open with', section: 'primary', type: 'button', icon: 'openfile', 
        onclick: Sample.outputCommand }),
    new WinJS.UI.Command(null, 
      { id: 'cmdDownload', label: 'download', section: 'primary', type: 'button', icon: 'download', 
        onclick: Sample.outputCommand }),
    new WinJS.UI.Command(null, 
      { id: 'cmdPin', label: 'pin', section: 'primary', type: 'button', icon: 'pin', onclick: Sample.outputCommand }),
    new WinJS.UI.Command(null, 
      { id: 'cmdZoom', label: 'zoom', section: 'primary', type: 'button', icon: 'zoomin', onclick: Sample.outputCommand }),
    new WinJS.UI.Command(null, 
      { id: 'cmdFullscreen', label: 'full screen', section: 'primary', type: 'button', icon: 'fullscreen', 
        onclick: Sample.outputCommand })
];

Sample.commandList = new WinJS.Binding.List(dataArray);

WinJS.UI.processAll();

Anpassen der Symbolleiste

Die Standardfarben der Symbolleiste werden entweder durch das Stylesheet ui-dark.css oder das Stylesheet ui-light.css bestimmt – abhängig davon, welches Stylesheet geladen wird. Sie können die Farben der Symbolleiste durch Überschreiben der entsprechenden CSS-Regeln anpassen. In diesem Beispiel wird die Hintergrundfarbe der Symbolleiste auf „transparent“ festgelegt, und die Hintergrundfarbe des Überlaufbereichs der Symbolleiste wird an das Hintergrundbild angepasst.

Beispiel für angepasste Symbolleiste

<div class="image">
    <img src="/pages/toolbar/images/Sunset.jpg" alt="" />
    <div data-win-control="WinJS.UI.ToolBar">
        <!-- Primary commands -->
        <button data-win-control="WinJS.UI.Command" data-win-options="{
                id:'cmdEdit',
                label:'edit',
                section:'primary',
                type:'button',
                icon: 'edit'}"></button>
        <button data-win-control="WinJS.UI.Command" data-win-options="{
                id:'cmdFavorite',
                label:'favorite',
                section:'primary',
                type:'toggle',
                icon: 'favorite'}"></button>
        <button data-win-control="WinJS.UI.Command" data-win-options="{
                id:'cmdDelete',
                label:'delete',
                section:'primary',
                type:'button',
                icon: 'delete'}"></button>
    </div>
</div>

/* Add your CSS here */
 body {
     background-color: rgb(112,112,112);
 }

 #content {
     text-align: center;
  overflow: hidden;
 }

 .image {
     position: relative;
     margin: auto;
     margin-top: 50px;
     margin-bottom:50px;
 }

 img { 
  max-width: 100%; 
 }

 .win-toolbar-actionarea {
  background: transparent;
 }

    .win-toolbar-overflowarea {
        background-color: rgb(74, 61, 78);
        border: 0;
    }

WinJS.UI.processAll();

Anmerkungen

Ausführliche Informationen zu diesen und anderen Codebeispielen finden Sie auf der Website WinJS ausprobieren. Experimentieren Sie mit dem Code, und sehen Sie sofort die Ergebnisse.

Freigeben über