현대적인 UI 맞춤 AppBar 버튼

Question

저는 첫 번째 Windows 8 최신 앱을 개발하고 있으며 기본 앱과 다른 앱 바 버튼을 만들기위한 올바른 설명서를 찾는 데 어려움이 있습니다.

는 난 할 노력하고있어이 같은 카드 놀이 컬렉션에서 응용 프로그램 표시 줄과 같이이다 :

1. 사용자 정의 아이콘 (곰에서 : http://www.windows8core.com/wp-content/uploads/2012/08/2b1.png

   주목해야 할 세 가지가있다 첫 번째 것)

2. 아이콘 아래에 텍스트가있는 기본 버튼과 비슷하지 않습니다.
3. 사각형이며 채우기 및 전체 화면 - 가로 모드에서 너비는 앱의 너비에 비례합니다. (고정 된 모드에서 버튼은 단순히 사라지지만 가능하면 고정 된 모드에서 "아이콘 전용"을 원한다).

의미가 버튼이기 때문에 나는 <button>를 사용하는 것에 의해 시작했습니다, 그리고 단지 <button> 및 <hr>이 응용 프로그램 표시 줄에 속하는 것으로 보인다.

data-win-options 속성에 매개 변수를 설정합니까, 아니면 자바 스크립트에서 설정 한 것이 있습니까?

C++/C#/VB가 아닌 JavaScript/HTML5를 사용하고 있습니다. Here are the MSDN articles I've read regarding the app bar.

Answer 1

일반적으로 탐색에 사용되는 위쪽 AppBar 인 경우 data-win-options에서 "custom"값이 "as discussed here"인 "layout"속성을 지정하여 실제로 사용자 정의 UI를 제공 할 수 있습니다.

또한 styling app bars에서 읽을 수 있습니다.

마지막으로, 특히 사용자 정의 레이아웃 사용을 보여주는 the HTML AppBar control sample을 확인하십시오.

Windows Store 앱 개발에 대한 추가 정보는 Generation App으로 등록하십시오.

Answer 2

그리고 나는 당신이 응용 프로그램 막대 아이콘을 사용자 정의에주의를 제안합니다. 디자인 원칙을 크게 벗어나면 앱의 인기가 떨어질 수 있습니다. UI 테스트를 통해 사용자는 표준 UI의 일관성을 좋아한다는 것을 알 수 있습니다. 나는 그것이 매우 멋지고 효과적으로 (눅 애플 리케이션에서와 같이) 끝내는 것을 보았다. 그러나 나는 그것도 좋지 않은 (이름을 언급하지 않고 :) 보았다. 재미있다.

Answer 3

컨트롤의 템플릿을 편집하고 타원 테두리를 제거하거나이 경우 사각형으로 바꿉니다. 색이있는 배경의 경우 템플릿의 컨트롤이 들어있는 표의 배경색을 변경하고 표 크기를 수정하십시오. 유 프로그래밍 응용 프로그램의 크기 변경을 처리해야 레이아웃 인식 appbar 사용 명령 모음 또는 AppBar로를 원한다면이

<AppBarButton.Icon> 
     <BitmapIcon UriSource="ms-appx:///Images/Bear.png" /> 
</AppBarButton.Icon> 

같이 할 수 곰 아이콘

.

은 여기 -

http://msdn.microsoft.com/en-us/library/windows/apps/xaml/jj662742.aspx 내 응용 프로그램에서 같은 짓을 참조하십시오.