2017-10-05 15 views
2

Je développe une application UWP. Je veux avoir une barre de commande avec un bouton Précédent et Suivant pour aider les utilisateurs à naviguer en arrière et avant. Cependant, l'interface utilisateur n'a pas réussi ce que j'essaye d'accomplir.UWP CommandBar bouton avant et arrière ne montrant pas

C'est ce que je suis en train de réaliser: UI trying to achieve

Voici comment mon interface ressemble maintenant: Actual UI

Le dos et l'avant sont affichés sous forme de texte au lieu d'icônes et ils sont sur la côté droit de la barre de commande.

Voici mon code XAML:

<CommandBar IsSticky="True" 
       IsOpen="True" 
       Name="WebViewCommandBar" 
       Background="{StaticResource CitiKioskBackgroundBrush}" 
       HorizontalAlignment="Stretch" 
       VerticalAlignment="Bottom"> 

     <CommandBar.Transitions> 
      <TransitionCollection> 

      </TransitionCollection> 
     </CommandBar.Transitions> 

     <CommandBar.PrimaryCommands> 
      <AppBarToggleButton Label="Instagram" 
           IsCompact="True" 
           IsChecked="True" 
           Name="WebViewInstagramButton" 
           Click="WebViewInstagramButton_Click"> 

       <AppBarToggleButton.Icon> 
        <PathIcon HorizontalAlignment="Center" 
           VerticalAlignment="Center" 
           Foreground="White" 
           Data="M9.97867488861084,7.20437383651733L9.54365062713623,7.2351450920105 7.79691314697266,8.17826080322266 7.2708568572998,9.02131462097168 7.07487726211548,10.0166091918945 7.36349153518677,11.3397054672241 8.1572790145874,12.3524122238159 8.19353580474854,12.381049156189 8.2119779586792,12.3956165313721 9.94506454467773,12.9863567352295 11.0567455291748,12.7660837173462 11.979341506958,12.1575241088867 12.6106977462769,11.2597017288208 12.8486633300781,10.1716403961182 12.6326217651367,9.01014423370361 12.0255851745605,8.06982421875 11.1125907897949,7.43859577178955 9.97867488861084,7.20437383651733z M0.204548388719559,7.13297843933105L5.68732500076294,7.13850927352905 5.78951168060303,7.15514135360718 4.90260219573975,9.44109153747559 5.18843698501587,11.8609714508057 6.01344013214111,13.3186454772949 7.28439044952393,14.4163703918457 8.83327960968018,15.0481796264648 10.4646596908569,15.1450786590576 12.0411882400513,14.7238512039185 13.4255237579346,13.8012838363647 14.4520330429077,12.4383029937744 14.9794578552246,10.7761964797974 14.8979682922363,8.96072196960449 14.0977325439453,7.13763618469238 15.5856904983521,7.13763618469238 19.6856136322021,7.13337802886963 19.9149150848389,7.36137056350708 19.9090938568115,16.1435375213623 19.5959320068359,17.6298408508301 18.7542190551758,18.8571910858154 17.5204677581787,19.6917743682861 16.0311851501465,19.9997787475586 3.90109658241272,19.9998149871826 2.40375375747681,19.6914520263672 1.16712784767151,18.8549728393555 0.325676739215851,17.6230506896973 0.0138576431199908,16.1283626556396 0.0112377209588885,7.37043046951294 0.204548388719559,7.13297843933105z M9.96401309967041,6.16715049743652L11.4818696975708,6.47564172744751 12.7234716415405,7.31509256362915 13.5634679794312,8.55998802185059 13.8765115737915,10.0848112106323 13.5733013153076,11.6170873641968 12.7314901351929,12.8659477233887 11.4762935638428,13.7066211700439 9.93292427062988,14.0143356323242 8.41271877288818,13.7068710327148 7.16936302185059,12.8687133789063 6.32838821411133,11.6252336502075 6.01532745361328,10.1018056869507 6.32141780853271,8.57305812835693 7.16788578033447,7.32167959213257 8.4252462387085,6.47670030593872 9.96401309967041,6.16715049743652z M16.4200878143311,1.65452766418457L15.3651809692383,1.66138708591461 14.9484748840332,1.80187773704529 14.948450088501,1.80190110206604 14.7337226867676,2.30761909484863 14.7330675125122,3.37468886375427 14.7339963912964,4.44175672531128 15.3758811950684,5.07638740539551 17.4615039825439,5.076096534729 18.0673847198486,4.64739370346069 18.0673961639404,4.64735555648804 18.0954151153564,4.45471143722534 18.0955257415771,2.29634284973145 17.9235496520996,1.84173333644867 17.4749870300293,1.66186022758484 16.4200878143311,1.65452766418457z M5.45150232315063,1.6658582353557E-06L16.0992107391357,0.00618810812011361 17.4747848510742,0.288062632083893 18.6524124145508,1.04852998256683 19.4996070861816,2.16558766365051 19.8838844299316,3.51723384857178 19.9140892028809,6.37719964981079 19.7212162017822,6.53466606140137 17.1017303466797,6.53331756591797 13.8273859024048,6.53597354888916 13.4012060165405,6.37417888641357 11.7566804885864,5.34520387649536 9.91614151000977,5.01156997680664 8.0790958404541,5.3713493347168 6.44505453109741,6.42261552810669 6.14584589004517,6.53517389297485 0.227764710783958,6.53313541412354 0.00923560187220573,6.37843608856201 0.0454814843833447,3.49474239349365 0.531499147415161,1.96258723735809 1.61619710922241,0.766114294528961 1.68897974491119,0.753560423851013 1.68432188034058,4.7226996421814 1.92075479030609,4.95895290374756 2.40411639213562,4.88502788543701 2.4732460975647,4.41035175323486 2.47342801094055,0.481098204851151 2.68695402145386,0.209208399057388 3.01554799079895,0.128100618720055 3.05434131622314,0.323522448539734 3.05630588531494,4.17981147766113 3.05630588531494,4.34957885742188 3.13063049316406,4.8825216293335 3.65079236030579,4.95818901062012 3.86742925643921,4.74373435974121 3.86342668533325,2.560866355896 3.85738492012024,0.208162307739258 3.95179295539856,0.00864517875015736 4.15400981903076,0.00509752612560987 4.34406280517578,0.0164247378706932 4.42144870758057,0.213619664311409 4.41020441055298,4.7006459236145 4.6572642326355,4.95935249328613 5.15134286880493,4.88273048400879 5.22201919555664,4.39266538619995 5.21823406219482,0.245279848575592 5.45150232315063,1.6658582353557E-06z" /> 
       </AppBarToggleButton.Icon> 

      </AppBarToggleButton> 

      <AppBarToggleButton Label="Facebook" 
           IsCompact="True" 
           Foreground="White" 
           Name="WebViewFacebookButton" 
           Click="WebViewBackButton_Click"> 
       <AppBarToggleButton.Icon> 
        <PathIcon HorizontalAlignment="Center" 
           VerticalAlignment="Center" 
           Data="M1.02904176712036,0L18.7531337738037,0 19.4806938171387,0.334847688674927 19.7821369171143,1.14315927028656 19.7821369171143,18.8567867279053 19.4806938171387,19.6652908325195 18.7531337738037,20 13.6363229751587,20 13.6363229751587,11.7826108932495 16.0952949523926,11.7826108932495 16.0952949523926,9.11336040496826 13.6363229751587,9.11336040496826 13.6363229751587,8.21858692169189 13.9752616882324,7.38667869567871 14.7947940826416,7.04201602935791 16.0952949523926,7.04201602935791 16.0952949523926,4.3735990524292 13.2796297073364,4.3735990524292 12.0740346908569,4.6205849647522 11.0897855758667,5.29418992996216 10.4263172149658,6.29338455200195 10.1830644607544,7.51713943481445 10.1830644607544,9.11336040496826 7.96399402618408,9.11336040496826 7.96399402618408,11.7826108932495 10.1830644607544,11.7826108932495 10.1830644607544,20 1.02904176712036,20 0.301447361707687,19.6652908325195 0,18.8567867279053 0,1.14315927028656 0.301447361707687,0.334847688674927 1.02904176712036,0z" /> 
       </AppBarToggleButton.Icon> 
      </AppBarToggleButton> 

      <AppBarToggleButton Label="Twitter" 
           IsCompact="True" 
           Foreground="White" 
           Name="WebViewTwitterButton" 
           Click="WebViewTwitterButton_Click"> 
       <AppBarToggleButton.Icon> 
        <PathIcon HorizontalAlignment="Center" 
           VerticalAlignment="Center" 
           Data="M13.8468732833862,0L15.5061712265015,0.288037329912186 16.8415641784668,1.07007586956024 19.4474983215332,0.247780367732048 18.7480487823486,1.32465946674347 17.6431274414063,2.12260270118713 20,1.58885657787323 17.9524993896484,3.34315156936646 17.9643726348877,3.78167033195496 17.7722911834717,5.48182535171509 17.2015743255615,7.17769765853882 14.9573802947998,10.2823972702026 11.2980880737305,12.5473728179932 8.95849895477295,13.1935911178589 6.28999710083008,13.4242305755615 2.9569149017334,13.0233716964722 0,11.901442527771 0.97906106710434,11.948938369751 3.72105479240417,11.564435005188 6.07468605041504,10.4981575012207 3.68070244789124,9.81594848632813 2.24156379699707,8.14456653594971 3.01405906677246,8.20546817779541 4.09468650817871,8.08648586273193 2.78844332695007,7.66685819625854 1.74496293067932,6.92400979995728 1.05345439910889,5.93164443969727 0.803127229213715,4.76346588134766 0.803747117519379,4.72113752365112 2.66249656677246,5.14494228363037 1.33671998977661,3.94736123085022 0.836877763271332,2.32392692565918 1.39249801635742,0.620466768741608 3.08804559707642,2.01878547668457 5.10117053985596,3.10660934448242 7.37433338165283,3.83651208877563 9.84999656677246,4.16106796264648 9.74374771118164,3.38883566856384 10.0662136077881,2.06980514526367 10.9455833435059,0.992617785930634 12.2498168945313,0.266330569982529 13.8468732833862,0z" /> 
       </AppBarToggleButton.Icon> 
      </AppBarToggleButton> 

      <AppBarToggleButton Label="YouTube" 
           IsCompact="True" 
           Foreground="White" 
           Name="WebViewYouTubeButton" 
           Click="WebViewYouTubeButton_Click"> 
       <AppBarToggleButton.Icon> 
        <PathIcon HorizontalAlignment="Center" 
           VerticalAlignment="Center" 
           Data="M16.2308826446533,11.0260734558105L16.2910308837891,11.0260734558105 16.7455883026123,11.1358823776245 16.934118270874,11.4334850311279 16.9023532867432,11.9701919555664 15.585147857666,11.9701919555664 15.6151466369629,11.4334850311279 15.7950010299683,11.1417207717896 16.2308826446533,11.0260734558105z M11.9629707336426,10.8395881652832L12.3899412155151,10.9448528289795 12.5768375396729,11.1800594329834 12.5768375396729,13.729118347168 12.3899412155151,13.9585151672363 11.9629707336426,14.0579414367676 11.5342350006104,13.9585151672363 11.3499994277954,13.729118347168 11.3499994277954,11.1800594329834 11.5342350006104,10.9448528289795 11.9629707336426,10.8395881652832z M5.55495595932007,10.4438676834106L5.58686780929565,13.1358976364136 5.57091188430786,13.6674118041992 5.58686780929565,13.9916324615479 5.6444411277771,14.3704557418823 5.9305591583252,14.6947059631348 6.48951435089111,14.8051471710205 7.1193380355835,14.726616859436 7.68892621994019,14.5140590667725 8.06892681121826,14.2223234176636 8.04145526885986,14.7597055435181 9.1788387298584,14.7817640304565 9.1788387298584,10.4438676834106 7.80141115188599,10.4438676834106 7.80141115188599,13.1579847335815 7.81557321548462,13.6121759414673 7.75533771514893,13.8162202835083 7.40013265609741,14.0741624832153 6.95986747741699,13.8369998931885 6.94838237762451,13.6238670349121 6.95986747741699,13.1781320571899 6.93242645263672,10.4438676834106 5.55495595932007,10.4438676834106z M16.2708835601807,10.195897102356L15.9517641067505,10.2138528823853 15.2086753845215,10.4217796325684 14.6275148391724,10.9617357254028 14.4476909637451,11.9058675765991 14.4476909637451,13.2567501068115 15.063383102417,14.4750738143921 16.2582359313965,14.8155889511108 16.3805885314941,14.8155889511108 17.6242637634277,14.3763236999512 18.0282363891602,13.5972213745117 17.9652938842773,13.2567501068115 16.934118270874,13.2567501068115 16.934118270874,13.3659267425537 16.934118270874,13.7499408721924 16.7614707946777,14.0241479873657 16.3504409790039,14.1222648620605 16.1386775970459,14.1222648620605 15.7445592880249,14.0241479873657 15.585147857666,13.7499408721924 15.585147857666,13.7070293426514 15.585147857666,13.2781915664673 15.585147857666,12.7063970565796 17.9652938842773,12.7063970565796 17.9652938842773,12.1021032333374 17.9492664337158,11.4497060775757 17.8776473999023,10.9617357254028 17.5091171264648,10.482852935791 16.7916164398193,10.2365732192993 16.3760280609131,10.1969413757324 16.2708835601807,10.195897102356z M10.0026769638062,8.92857360839844L10.0026769638062,14.7382354736328 11.1400585174561,14.7161769866943 11.2295150756836,14.3542356491089 12.2243089675903,14.7720584869385 12.9736909866333,14.7102937698364 13.4511470794678,14.2606325149536 13.6238822937012,13.5413379669189 13.6238822937012,11.2898817062378 12.9967203140259,10.3678379058838 12.5166177749634,10.2794857025146 11.3792200088501,10.6199560165405 11.3792200088501,8.92857360839844 10.0026769638062,8.92857360839844z M1.3774676322937,8.92857360839844L1.3774676322937,9.67582321166992 2.80273532867432,9.67582321166992 2.80273532867432,14.7817640304565 4.17751502990723,14.7817640304565 4.17751502990723,9.69661808013916 5.82516145706177,9.69661808013916 5.82516145706177,8.92857360839844 1.3774676322937,8.92857360839844z M3.2784264087677,7.3151912689209L16.7110290527344,7.3151912689209 17.9820594787598,7.48477935791016 19.0291175842285,7.93505859375 19.739559173584,8.60498523712158 20,9.42372035980225 20,14.2444114685059 19.739559173584,15.072793006897 19.0291175842285,15.7382345199585 17.9883823394775,16.1879425048828 16.7110290527344,16.3529415130615 3.2784264087677,16.3529415130615 2.0143678188324,16.1879425048828 0.973513185977936,15.7382345199585 0.260436773300171,15.072793006897 0,14.2444114685059 0,9.42372035980225 0.260436773300171,8.60498523712158 0.973513185977936,7.93505859375 2.0143678188324,7.48477935791016 3.2784264087677,7.3151912689209z M9.75994205474854,2.33917641639709L9.33563232421875,2.47822046279907 9.14697074890137,2.81155896186829 9.14697074890137,5.19497060775757 9.32855892181396,5.50879383087158 9.75994205474854,5.64461803436279 10.1895885467529,5.51272058486938 10.3738088607788,5.19497060775757 10.3738088607788,2.81155896186829 10.1895885467529,2.47822046279907 9.75994205474854,2.33917641639709z M12.4572792053223,1.77974998950958L13.7443675994873,1.77974998950958 13.7443675994873,5.2716326713562 13.8781328201294,5.5029559135437 14.2377500534058,5.60170555114746 14.5956478118896,5.5029559135437 14.7497053146362,5.2716326713562 14.7497053146362,1.77974998950958 15.9420595169067,1.77974998950958 15.9420595169067,6.26061725616455 14.4202508926392,6.26061725616455 14.4476909637451,5.89867639541626 14.0437650680542,6.23785305023193 13.5175876617432,6.34766149520874 12.9479999542236,6.23785305023193 12.6043090820313,5.94286775588989 12.5334558486938,5.76089715957642 12.4847345352173,5.57961750030518 12.4572792053223,5.28201484680176 12.4572792053223,4.79988241195679 12.4572792053223,1.77974998950958z M9.68908786773682,1.60298526287079L10.6165437698364,1.73552942276001 11.2295150756836,2.12022066116333 11.4996910095215,2.57051467895508 11.5891618728638,3.30670595169067 11.5891618728638,4.45810317993164 11.4996910095215,5.36066150665283 11.1976470947266,5.9207649230957 10.6165437698364,6.28270578384399 9.75994205474854,6.41392660140991 8.86526489257813,6.30411767959595 8.31163215637207,5.98704385757446 8.00958824157715,5.4906325340271 7.91922092437744,4.59067630767822 7.91922092437744,3.40419125556946 8.06892681121826,2.4061324596405 8.65532398223877,1.82325005531311 9.68908786773682,1.60298526287079z M3.00823521614075,0L4.61158847808838,0 5.5275297164917,2.20727944374084 6.44077920913696,0 8.04145526885986,0 6.31588268280029,2.95322060585022 6.31588268280029,6.39314699172974 4.84897089004517,6.39314699172974 4.84897089004517,2.95322060585022 3.00823521614075,0z" /> 
       </AppBarToggleButton.Icon> 
      </AppBarToggleButton> 

      <AppBarSeparator/> 

      <AppBarButton Icon="Refresh" 
          Label="Refresh" 
          IsCompact="True" 
          Name="WebViewRefreshButton" 
          Foreground="White" 
          Click="WebViewRefreshButton_Click"/> 
      <AppBarButton Icon="DockBottom" 
          Label="Hide" 
          IsCompact="True" 
          Foreground="White" 
          Name="WebViewHideNavigationButton" 
          Click="WebViewHideNavigationButton_Click"/> 


     </CommandBar.PrimaryCommands> 

     <CommandBar.SecondaryCommands> 
      <AppBarButton Icon="Back" 
          Label="Back" 
          IsCompact="True" 
          IsEnabled="{Binding CanGoBack,ElementName=webView}" 
          Name="WebViewBackButton" 
          Click="WebViewBackButton_Click" /> 
      <AppBarButton Icon="Forward" 
          Label="Forward" 
          IsCompact="True" 
          IsEnabled="{Binding CanGoForward,ElementName=webView}" 
          Name="WebViewForwardButton" 
          Click="WebViewForwardButton_Click" /> 
     </CommandBar.SecondaryCommands> 

    </CommandBar> 
+0

Qu'est-ce que vous attendez est l'apparition sur win8.1. Windows 10 a repensé la disposition de SecondaryCommands. Voir cette [réponse] (https://stackoverflow.com/questions/34342022/set-icon-on-secondarycommand-of-commandbar) – kennyzx

Répondre

3

Vous devez définir WebViewForwardButton et WebViewBackButton en CommandBar.Content pas CommandBar.SecondaryCommands. Définir OverflowButtonVisibility comme Collapsed pour cacher le bouton Plus

<CommandBar OverflowButtonVisibility="Collapsed"> 
    <CommandBar.Content> 
     <Grid> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition/> 
       <ColumnDefinition/> 
      </Grid.ColumnDefinitions> 
      <AppBarButton Icon="Back" 
        Label="Back" 
        IsCompact="False" 
        Name="WebViewBackButton"/> 
      <AppBarButton Icon="Forward" 
        Label="Forward" 
        IsCompact="False" 
        Name="WebViewForwardButton" Grid.Column="1"/> 
     </Grid> 
    </CommandBar.Content> 
    .... 
</CommandBar>