AppBar 스타일 및 템플릿

Applies to Windows only

이 항목에서는 AppBar 컨트롤에 대한 스타일 및 템플릿에 대해 설명합니다. 이러한 리소스 및 기본 ControlTemplate을 수정하여 컨트롤에 고유한 모양을 지정할 수 있습니다.

시각적 상태

다음은 컨트롤의 기본 스타일에 정의된 VisualState입니다.

VisualState 이름VisualStateGroup 이름설명
FloatingVisibleFloatingStates앱 바가 표시됩니다.
FloatingHiddenFloatingStates앱 바가 숨겨집니다.
TopDockPositions앱 바가 화면 위쪽에 있습니다.
BottomDockPositions앱 바가 화면 아래쪽에 있습니다.

 

테마 리소스

다음 리소스는 컨트롤의 기본 스타일에서 사용됩니다.

어두운 테마 브러시

어두운 테마에서 컨트롤의 색을 변경하려면 App.xaml에서 다음과 같은 브러시를 재정의하세요.


<SolidColorBrush x:Key="AppBarBackgroundThemeBrush" Color="#FF000000" />
<SolidColorBrush x:Key="AppBarBorderThemeBrush" Color="#FF000000" />

밝은 테마 브러시

밝은 테마에서 컨트롤의 색을 변경하려면 App.xaml에서 다음과 같은 브러시를 재정의하세요.


<SolidColorBrush x:Key="AppBarBackgroundThemeBrush" Color="#FFF0F0F0" />
<SolidColorBrush x:Key="AppBarBorderThemeBrush" Color="#FFF0F0F0" />

다른 리소스


<x:Double x:Key="AppBarThemeMinHeight">68</x:Double>
<Thickness x:Key="AppBarBottomBorderThemeThickness">0,2,0,0</Thickness>
<Thickness x:Key="AppBarBottomThemePadding">0,0,0,2</Thickness>
<Thickness x:Key="AppBarTopBorderThemeThickness">0,0,0,2</Thickness>
<Thickness x:Key="AppBarTopThemePadding">0,2,0,0</Thickness>

HighContrast 테마에 사용되는 값을 포함하여 테마 리소스에 대한 자세한 내용은 XAML 테마 리소스 참조를 참조하세요.

기본 스타일


<!-- Default style for Windows.UI.Xaml.Controls.AppBar -->
<Style TargetType="AppBar">
    <Setter Property="Background" Value="{ThemeResource AppBarBackgroundThemeBrush}" />
    <Setter Property="BorderBrush" Value="{ThemeResource AppBarBorderThemeBrush}" />
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="VerticalContentAlignment" Value="Stretch" />
    <Setter Property="MinHeight" Value="{ThemeResource AppBarThemeMinHeight}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="AppBar">
                <Border x:Name="LayoutRoot"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="FloatingStates">
                            <VisualState x:Name="FloatingVisible">
                                <Storyboard>
                                    <FadeInThemeAnimation TargetName="LayoutRoot" />
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible" Storyboard.TargetName="LayoutRoot">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <x:Boolean>True</x:Boolean>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="FloatingHidden">
                                <Storyboard>
                                    <FadeOutThemeAnimation TargetName="LayoutRoot" />
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible" Storyboard.TargetName="LayoutRoot">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <x:Boolean>False</x:Boolean>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="DockPositions">
                            <VisualState x:Name="Top">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot"
                                                                   Storyboard.TargetProperty="BorderThickness">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarTopBorderThemeThickness}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot"
                                                                   Storyboard.TargetProperty="Padding">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarTopThemePadding}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Bottom">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot"
                                                                   Storyboard.TargetProperty="BorderThickness">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarBottomBorderThemeThickness}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot"
                                                                   Storyboard.TargetProperty="Padding">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarBottomThemePadding}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <ContentPresenter Content="{TemplateBinding Content}"
                                      ContentTemplate="{TemplateBinding ContentTemplate}"
                                      ContentTransitions="{TemplateBinding ContentTransitions}"
                                      Margin="{TemplateBinding Padding}"
                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

 

 

표시:
© 2015 Microsoft