[C#/UWP] AppBarButton 엘리먼트 사용하기

■ AppBarButton 엘리먼트를 사용하는 방법을 보여준다.

▶ MainPage.xaml


<Page x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    RequestedTheme="Dark"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock Name="titleTextBlock"
            Style="{StaticResource TitleTextBlockStyle}"
            Margin="20 0 0 20"
            Text="컬렉션" />
        <CommandBar Name="mainCommandBar"
            Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
            RelativePanel.AlignRightWithPanel="True"
            OverflowButtonVisibility="Collapsed"
            DefaultLabelPosition="Right">
            <AppBarButton Name="appBarButton"
                Icon="Zoom"
                Label="확대/축소">
                <AppBarButton.Flyout>
                    <Flyout>
                        <StackPanel>
                            <Slider Name="zoomSlider"
                                Margin="0 5 0 0"
                                TickFrequency="90"
                                SnapsTo="Ticks"
                                Minimum="180"
                                Maximum="540"
                                Value="270"
                                Header="항목 크기" />
                            <ToggleSwitch Name="fitScreenToggleSwitch"
                                Header="화면 맞춤"
                                ToolTipService.ToolTip="이용 가능한 공간을 사용하기 위해서 크기를 재조정합니다." />
                        </StackPanel>
                    </Flyout>
                </AppBarButton.Flyout>
            </AppBarButton>
        </CommandBar>
    </RelativePanel>
</Page>

<Page x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

RequestedTheme="Dark"

FontFamily="나눔고딕코딩"

FontSize="16">

<TextBlock Name="titleTextBlock"

Style="{StaticResource TitleTextBlockStyle}"

Margin="20 0 0 20"

Text="컬렉션" />

<CommandBar Name="mainCommandBar"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

RelativePanel.AlignRightWithPanel="True"

OverflowButtonVisibility="Collapsed"

DefaultLabelPosition="Right">

<AppBarButton Name="appBarButton"

Icon="Zoom"

Label="확대/축소">

<AppBarButton.Flyout>

<Slider Name="zoomSlider"

Margin="0 5 0 0"

TickFrequency="90"

SnapsTo="Ticks"

Minimum="180"

Maximum="540"

Value="270"

Header="항목 크기" />

<ToggleSwitch Name="fitScreenToggleSwitch"

Header="화면 맞춤"

ToolTipService.ToolTip="이용 가능한 공간을 사용하기 위해서 크기를 재조정합니다." />

</StackPanel>

</Flyout>

</AppBarButton.Flyout>

</AppBarButton>

</CommandBar>

</RelativePanel>

</Page>

TestProject.zip