1. Hello Guest, selamat datang di Forum WinPoin. Kamu bisa bertanya, berdiskusi, sharing, dan ngobrolin apapun seputar Windows, Windows Phone, PC, Gadget, atau hal seputar Teknologi lainnya. Selamat berkomunitas! ;)

Bikin AppBar beserta List Icon Id-nya di Visual Studio 2013?

Discussion in 'Developer Corner' started by misbahm3, Jun 21, 2014.

  1. misbahm3

    misbahm3 Member

    Joined:
    Jul 5, 2013
    Messages:
    67
    selamat sejahtera penghuni forum.
    Saya lagi ngembangin aplikasi Windows 8 nih buat syarat suatu kompetisi, bingungnya bikin appbar dan list icon id-nya saya nggak tahu.
    icon id tuh maksudnya misal bikin icon home, maka id-nya = home, nah tu kan kayaknya di library VS13 banyak, liat listnya dimana ya?


    [​IMG]

    :sabarmenunggu:
     
  2. Jazz

    Jazz Super Moderatór Staff Member

    Joined:
    Jan 6, 2014
    Messages:
    14,731
    Control List, Examp...
    Code:
    <Page.BottomAppBar>
        <AppBar x:Name="bottomAppBar" Padding="10,0,10,0">
            <Grid>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                    <Button Style="{StaticResource EditAppBarButtonStyle}" Click="Button_Click"/>
                    <Button Style="{StaticResource RemoveAppBarButtonStyle}" Click="Button_Click"/>
                    <Button Style="{StaticResource AddAppBarButtonStyle}" Click="Button_Click"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                    <Button Style="{StaticResource RefreshAppBarButtonStyle}" Click="Button_Click"/>
                    <Button Style="{StaticResource HelpAppBarButtonStyle}" Click="Button_Click"/>
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.BottomAppBar>
    Ini XAML, Bukan HTML
     
  3. misbahm3

    misbahm3 Member

    Joined:
    Jul 5, 2013
    Messages:
    67
    iya itu yang XAML, tp saya buatnya yg HTML + JS, soalnya kalo XAML belum terlalu nguasai,
     
  4. Jazz

    Jazz Super Moderatór Staff Member

    Joined:
    Jan 6, 2014
    Messages:
    14,731
    Gini?

    Bar definiton
    Code:
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>App bar demo</title>
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
        <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
        <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
    
        <!-- App_bar_demo references -->
        <link href="/css/default.css" rel="stylesheet" />
        <script src="/js/default.js"></script>
        <script src="/js/appbar.js"></script>
    </head>
    <body>
        <!-- BEGINTEMPLATE: Template code for an app bar -->
        <div id="appBar" data-win-control="WinJS.UI.AppBar" data-win-options="">
            <button 
                data-win-control="WinJS.UI.AppBarCommand" 
                data-win-options="{id:'cmdAdd',label:'Add',icon:'add',
                    section:'global',tooltip:'Add item'}">
            </button>
            <button 
                data-win-control="WinJS.UI.AppBarCommand" 
                data-win-options="{id:'cmdRemove',label:'Remove',icon:'remove',
                    section:'global',tooltip:'Remove item'}">
            </button>
            <hr 
                data-win-control="WinJS.UI.AppBarCommand" 
                data-win-options="{type:'separator',section:'global'}" />
            <button 
                data-win-control="WinJS.UI.AppBarCommand" 
                data-win-options="{id:'cmdDelete',label:'Delete',icon:'delete',
                    section:'global',tooltip:'Delete item'}">
            </button>
            <button 
                data-win-control="WinJS.UI.AppBarCommand" 
                data-win-options="{id:'cmdCamera',label:'Camera',icon:'camera',
                    section:'selection',tooltip:'Take a picture'}">
            </button>
        </div>
        <!-- ENDTEMPLATE -->
        <div id="statusMessage"></div>
    </body>
    </html>

    AppBar.js
    Code:
    (function () {
        "use strict";
        var page = WinJS.UI.Pages.define("default.html", {
            ready: function (element, options) {
                document.getElementById("cmdAdd")
                    .addEventListener("click", doClickAdd, false);
                document.getElementById("cmdRemove")
                    .addEventListener("click", doClickRemove, false);
                document.getElementById("cmdDelete")
                    .addEventListener("click", doClickDelete, false);
                document.getElementById("cmdCamera")
                    .addEventListener("click", doClickCamera, false);
                WinJS.log && WinJS.log("To show the bar, swipe up from " +
                    "the bottom of the screen, right-click, or " +
                    "press Windows Logo + z. To dismiss the bar, " +
                    "tap in the application, swipe, right-click, " +
                    "or press Windows Logo + z again.", "sample", "status");
            },
        });
    
        // Command button functions
        function doClickAdd() {
            WinJS.log && WinJS.log("Add button pressed");
        }
    
        function doClickRemove() {
            WinJS.log && WinJS.log("Remove button pressed");
        }
    
        function doClickDelete() {
            WinJS.log && WinJS.log("Delete button pressed");
        }
    
        function doClickCamera() {
            WinJS.log && WinJS.log("Camera button pressed");
        }
    
        WinJS.log = function (message) {
            var statusDiv = document.getElementById("statusMessage");
            if (statusDiv) {
                statusDiv.innerText = message;
            }
        };
    })();
    
     
  5. misbahm3

    misbahm3 Member

    Joined:
    Jul 5, 2013
    Messages:
    67
    nah ini, itu value (icon:"" ) button-nya dapet dari mana cha? punya listnya nggak?
     
  6. misbahm3

    misbahm3 Member

    Joined:
    Jul 5, 2013
    Messages:
    67
    eh udah nemu cha, thanks ya buat clue nya hehehe :goodjob: sory ngrepotin mulu
    Code:
    http://msdn.microsoft.com/en-us/library/windows/apps/hh770557.aspx
     
  7. Jazz

    Jazz Super Moderatór Staff Member

    Joined:
    Jan 6, 2014
    Messages:
    14,731
    ye ora po po...
    Namanya juga Forum
     

Share This Page