WinRT 로그 아웃 appbar 스타일을 만드는 방법은 무엇입니까?

Question

appbar에 로그 아웃 아이콘이 있습니다. 나는 그것이 일반적인 스타일에 있어야한다고 확신했지만 불행하게도 그렇지는 않다는 것을 알았다.

어떻게 할 수 있습니까?

Answer 1

내가 로그 아웃 버튼을 원했던 아이콘을 찾은 사이트 this을 발견했으며, 경로를 준 xaml을 복사했습니다. 우리는 기본 appbar 아이콘을 누르지 그것을 누르고 있으면 때문에

경로의 채우기 속성에 주목하는 것이 중요하다

<Style x:Key="LogoutAppBarButtonStyle" TargetType="ButtonBase" BasedOn="{StaticResource AppBarButtonStyle}"> 
    <Setter Property="AutomationProperties.AutomationId" Value="LogoutAppBarButton" /> 
    <Setter Property="AutomationProperties.Name" Value="Logout" /> 
    <Setter Property="ContentTemplate"> 
     <Setter.Value> 
      <DataTemplate> 
       <Grid> 
        <Viewbox RenderTransformOrigin="0.47,0.47"> 
         <Viewbox.RenderTransform> 
          <TransformGroup> 
           <CompositeTransform Rotation="0" ScaleX="0.551720260135184" ScaleY="0.551720260135184" /> 
          </TransformGroup> 
         </Viewbox.RenderTransform> 
         <Path Stretch="Uniform" 
           Fill="{Binding Path=Foreground, RelativeSource={RelativeSource Mode=TemplatedParent}}" 
           Data="F1 M 0,71.4297C -0.0207825,54.2669 7.09511,41.2825 13.974,33.0403C 20.8893,24.7292 27.6055,20.7252 28.2083,20.3522C 32.6992,17.6946 38.4714,19.2199 41.0976,23.7583C 43.7188,28.2812 42.2317,34.0878 37.7787,36.7583L 37.7604,36.7707L 37.7044,36.8053L 37.2148,37.1308L 35.1185,38.6797C 33.3203,40.1106 30.849,42.3333 28.414,45.2734C 23.5221,51.2292 18.8593,59.6705 18.8385,71.427C 18.8424,83.2799 23.5678,93.9374 31.2579,101.724C 38.9648,109.497 49.5065,114.279 61.2304,114.281C 72.9544,114.279 83.4961,109.497 91.2019,101.724C 98.8932,93.9374 103.619,83.2799 103.622,71.427C 103.602,60.0305 99.2304,51.7707 94.5065,45.8346C 90.0091,40.207 85.1979,37.0722 84.7188,36.7799L 84.7031,36.7721L 84.6888,36.7642L 84.6784,36.7597C 80.2304,34.0865 78.7435,28.2799 81.362,23.7571C 83.9909,19.2187 89.7618,17.6933 94.2514,20.3509C 94.8568,20.7226 101.573,24.7265 108.488,33.0384C 115.371,41.2825 122.483,54.2655 122.464,71.427C 122.457,105.611 95.0443,133.322 61.2317,133.333C 27.4205,133.322 0.00785828,105.611 0,71.4297 Z M 51.8125,66.668L 51.8125,38.0944L 51.8125,9.52411C 51.8125,4.26556 56.03,-3.05176e-005 61.233,-3.05176e-005C 66.4323,-3.05176e-005 70.6497,4.26556 70.6497,9.52411L 70.6497,38.0944L 70.6497,66.668L 70.6524,66.668C 70.6524,71.9218 66.4323,76.1901 61.233,76.1901C 56.03,76.1901 51.8125,71.9218 51.8125,66.668 Z " /> 
        </Viewbox> 
       </Grid> 
      </DataTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

, 그것은, 화이트 색상 수 없습니다 : 다음으로 일반에이 코드를 추가 흰색이되면 색상이 검은 색으로 변경되어야하므로 부모로부터 전경색 인 AppBarButtonStyle을 얻는이 코드를 사용합니다. AppBarButtonStyle은 이미 appbar 아이콘을 누른 상태에서이 논리를 사용합니다. 이 코드입니다 :

이

Fill="{Binding Path=Foreground, RelativeSource={RelativeSource Mode=TemplatedParent}}" 

한가지 더, 나는 이미지가 약간 비뚤어진 때문에 일부 렌더링 사용하고, 그래서 아마 가장 좋은 방법은 그것을 렌더링하여 고정,하지만 지금은 완벽하게 작동 !

이 도움이되지

<Button Style="{StaticResource LogoutAppBarButtonStyle}" Click="Logout_Click" />