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:
     
    misbahm3, Jun 21, 2014
    #1
  2. Jazz

    Jazz Windows Freak Staff Member

    Joined:
    Jan 6, 2014
    Messages:
    14,720
    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
     
    Jazz, Jun 21, 2014
    #2
  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,
     
    misbahm3, Jun 21, 2014
    #3
  4. Jazz

    Jazz Windows Freak Staff Member

    Joined:
    Jan 6, 2014
    Messages:
    14,720
    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;
        }
    };
})();
     
    Jazz, Jun 21, 2014
    #4
  5. misbahm3

    misbahm3 Member

    Joined:
    Jul 5, 2013
    Messages:
    67
    nah ini, itu value (icon:"" ) button-nya dapet dari mana cha? punya listnya nggak?
     
    misbahm3, Jun 22, 2014
    #5
  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
     
    misbahm3, Jun 22, 2014
    #6
  7. Jazz

    Jazz Windows Freak Staff Member

    Joined:
    Jan 6, 2014
    Messages:
    14,720
    ye ora po po...
    Namanya juga Forum
     
    Jazz, Jun 22, 2014
    #7

Share This Page