검색 버튼을 눌렀을 때 택스트 박스 표시하기

UWP앱들을 보면 검색 버튼을 클릭하면 택스트 박스가 출력되는 UI를 자주 볼 수 있습니다.

음..기본으로 제공되는 줄 알았는데..그러지는 않더군요..ㅋㅋ

간단하게 만들어보았습니다.

1. XAML

<Page>

    <Page.Resources>

        <Style x:Key="SearchBoxStyle" TargetType="FlyoutPresenter">
            <Setter Property="Margin" Value="78,0,0,0"/>
            <Setter Property="Padding" Value="5"/>
            <Setter Property="Height" Value="50"/>
        </Style>
    </Page.Resources>

    <Grid>

        <CommandBar Background="Transparent" IsOpen="False" DefaultLabelPosition="Right">
            <AppBarButton Icon="Find" Label="Find">
                <AppBarButton.Flyout>
                    <Flyout Placement="Left" FlyoutPresenterStyle="{StaticResource SearchBoxStyle}"
                            Opened="FlyoutBase_OnOpened">
                        <AutoSuggestBox x:Name="SuggestBox" PlaceholderText="Input words to search" AllowFocusOnInteraction="True" />
                    </Flyout>
                </AppBarButton.Flyout>
            </AppBarButton>
            <AppBarButton Icon="Add" Label="Add" Command="{Binding AddCommand}"/>
        </CommandBar>

    </Grid>

</Page>

2. XAML.CS

        private void FlyoutBase_OnOpened(object sender, object e)
        {
            SuggestBox.Focus(FocusState.Programmatic);
        }

3. 설명

여기서 핵심은 AppBarButton의 Flyout을 이용해서 툴팁 같은 팝업을 출력하는 것입니다. 그 내부에 메뉴도 넣을 수 있고, 머 여러가지로 활용을 하는데.. 이번에는 AutoSuggestBox를 집어 넣은 것입니다.

AutoSuggestBox가 Windows 10의 기본 검색 컨트롤이라고 하네요..음..SearchBox 컨트롤도 존재하지만, 이전 버전에서 사용되는 컨트롤이라...

검색 버튼을 누르기전

검색 버튼을 누른 후

검색 버튼을 누른 후 포커스를 넣기 위해서 CS에서 코딩을 하나 했습니다.

CS 코딩이 싫은 분들은 Behavior를 만들어서 사용하시면 됩니다.