단추

단추를 사용하면 즉각적인 작업을 트리거할 수 있습니다. 일부 단추는 탐색, 반복 작업, 메뉴 표시 등의 특정 작업에 맞게 전문화되어 있습니다.

XAML(Extensible Application Markup Language) 프레임워크는 표준 단추 컨트롤뿐 아니라 여러 특수 단추 컨트롤도 제공합니다.

컨트롤	설명
Button	즉시 작업을 시작하는 단추입니다. Click 이벤트 또는 Command 바인딩에 사용할 수 있습니다.
RepeatButton	누르고 있는 동안 계속해서 Click 이벤트를 발생시키는 단추입니다.
HyperlinkButton	하이퍼링크처럼 스타일이 지정되는 단추로, 탐색에 사용됩니다. 하이퍼링크에 대한 자세한 내용은 하이퍼링크를 참조하세요.
DropDownButton	연결된 플라이아웃을 여는 펼침 단추가 있는 단추입니다.
SplitButton	두 면이 있는 단추입니다. 한 쪽은 작업을 시작하고, 다른 쪽은 메뉴를 엽니다.
ToggleSplitButton	두 면이 있는 토글 단추입니다. 한쪽은 켜기/끄기를 전환하고, 다른 쪽은 메뉴를 엽니다.
ToggleButton	설정하거나 해제할 수 있는 단추입니다.

올바른 컨트롤인가요?

Button 컨트롤을 사용하면 사용자가 양식 제출 같은 즉각적인 작업을 시작할 수 있습니다.

다른 페이지를 탐색하는 작업인 경우에는 Button 컨트롤을 사용하지 말고 HyperlinkButton 컨트롤을 사용합니다. 하이퍼링크에 대한 자세한 내용은 하이퍼링크를 참조하세요.

Important

마법사 탐색인 경우에는 뒤로 및 다음이라는 레이블이 붙은 단추를 사용합니다. 역방향 탐색 또는 상위 수준 탐색에는 뒤로 단추를 사용합니다.

사용자가 작업을 반복적으로 트리거하려는 경우에는 RepeatButton 컨트롤을 사용합니다. 예를 들어 카운터 값을 늘리거나 줄이려면 RepeatButton 컨트롤을 사용합니다.

단추에 더 많은 옵션을 포함하는 플라이아웃이 있으면 DropDownButton 컨트롤을 사용합니다. 기본 펼침 단추는 단추에 플라이아웃이 포함되어 있다는 것을 시각적으로 나타냅니다.

사용자가 즉각적인 작업을 시작하거나 추가 옵션에서 독립적으로 선택할 수 있게 하려면 SplitButton 컨트롤을 사용합니다.

사용자가 상호 배타적인 두 상태 간에 즉시 전환할 수 있도록 하려면 ToggleButton 컨트롤을 사용하고, 단추는 UI 요구 사항에 가장 적합합니다. UI에서 단추를 사용하지 않는 경우 AppBarToggleButton, CheckBox, RadioButton 또는 ToggleSwitch를 사용하는 것이 더 적합할 수 있습니다.

권장 사항

• 단추의 목적과 상태가 사용자에게 명확하게 전달되는지 확인합니다.

• 확인 대화 상자처럼 동일한 결정에 대한 단추가 여러 개 있는 경우에는 다음과 같은 순서로 커밋 단추를 표시합니다. 여기서 [그렇게 함] 및 [그렇게 하지 않음]은 기본 지침에 대한 구체적인 응답입니다.

  • 확인/[그렇게 함]/예
    • [그렇게 하지 않음]/아니요
    • 취소

• 사용자에게 단추를 한 번에 한 개 또는 두 개만 표시합니다(예: 수락 및 취소). 사용자에게 더 많은 작업을 표시해야 하는 경우 사용자가 하나의 명령 단추로 작업을 선택하여 트리거할 수 있도록 확인란 또는 라디오 단추를 사용하는 것이 좋습니다.

• 앱 내의 여러 페이지에서 작업을 사용할 수 있어야 하는 경우 단추를 여러 페이지에 복제하는 대신 하단 앱 바를 사용하는 것이 좋습니다.

단추 텍스트

단추의 콘텐츠는 일반적으로 텍스트입니다. 해당 텍스트를 디자인할 때는 다음 권장 사항을 사용합니다.

• 단추가 수행하는 작업을 명확히 설명해 주는 간결하고 구체적이며 설명적인 텍스트를 사용합니다. 일반적으로 단추 텍스트는 한 단어로 된 동사입니다.

• 브랜드 지침에 다른 글꼴을 사용하도록 규정되어 있지 않은 경우 기본 글꼴을 사용하세요.

• 텍스트가 짧은 경우에는 120px의 최소 단추 너비를 사용하여 명령 단추가 좁아지지 않도록 합니다.

• 텍스트가 긴 경우에는 텍스트의 최대 길이를 26자로 제한하여 명령 단추가 넓어지지 않도록 합니다.

• 단추의 텍스트 콘텐츠가 동적인 경우에는(예: 지역화) 단추 크기를 조정하는 방법과 주위의 컨트롤에 나타날 변화를 고려하세요.

해결할 문제: 오버플로 텍스트가 포함된 단추
옵션 1: 단추 너비를 늘리고, 단추를 중첩하고, 텍스트 길이가 26자 이상이면 줄바꿈 합니다.
옵션 2: 단추 높이를 늘리고 텍스트를 줄바꿈 합니다.

권장하는 단일 단추 레이아웃

레이아웃에 단추가 하나만 필요한 경우 컨테이너 컨텍스트에 따라 왼쪽 또는 오른쪽에 맞춰야 합니다.

• 단추가 하나만 있는 대화 상자의 경우 단추를 오른쪽에 맞춰야 합니다. 대화 상자에 단추가 하나만 있는 경우 단추가 안전한 비파괴 작업을 수행하는지 확인합니다. ContentDialog를 사용하고 단일 단추를 지정하면 자동으로 오른쪽에 맞춰집니다.

  

• 단추가 알림 메시지, 플라이아웃 또는 목록 보기 항목과 같은 컨테이너 UI 내에 나타나는 경우 컨테이너 내에서 단추를 오른쪽에 맞춰야합니다.

  

• 설정 페이지의 아래쪽에 있는 적용 단추와 같이 단일 단추가 있는 페이지에서는 단추를 왼쪽에 맞춰야 합니다. 그러면 단추가 나머지 페이지 콘텐츠와 맞춰집니다.

  

뒤로 단추

뒤로 단추는 뒤로 스택 또는 사용자의 탐색 기록을 통해 뒤로 탐색할 수 있게 하는 시스템 제공 UI 요소입니다. 뒤로 단추를 직접 만들지 않아도 되지만 좋은 뒤로 탐색 환경을 사용하려면 일부 작업을 수행해야 할 수 있습니다. 자세한 내용은 Windows 앱에 대한 탐색 기록 및 뒤로 탐색을 참조하세요.

예제

이 예제에서는 사용자에게 작업을 저장할지 묻는 대화 상자에서 저장, 저장 안 함 및 취소라는 세 개의 단추를 사용합니다.

UWP 및 WinUI 2

Important

이 문서의 정보 및 예제는 Windows 앱 SDK 및 WinUI 3를 사용하는 앱에 최적화되어 있지만 통상적으로 WinUI 2를 사용하는 UWP 앱에도 적용할 수 있습니다. 플랫폼별 정보 및 예제는 UWP API 참조를 확인하세요.

이 섹션에는 UWP 또는 WinUI 2 앱에서 컨트롤을 사용하는 데 필요한 정보가 있습니다.

UWP 앱용 DropDownButton, SplitButton 및 ToggleSplitButton 컨트롤은 Windows UI 라이브러리 2의 일부로 포함됩니다. 설치 지침을 비롯한 자세한 내용은 Windows UI 라이브러리를 참조하세요. 이러한 컨트롤용 API는 Windows.UI.Xaml.Controls 및 Microsoft.UI.Xaml.Controls 네임스페이스에 모두 존재합니다.

• UWP API:Button 클래스, RepeatButton 클래스, HyperlinkButton 클래스, DropDownButton, SplitButton, ToggleSplitButton, ToggleButton, Click 이벤트, Command 속성, Content 속성
• WinUI 2 API:DropDownButton, SplitButton, ToggleSplitButton
• WinUI 2 갤러리 앱을 열고 작동 중인 Button을 확인합니다. WinUI 2 갤러리 앱에는 대부분의 WinUI 2 컨트롤, 특징, 기능의 대화형 예제가 포함되어 있습니다. Microsoft Store에서 앱을 다운로드하거나 GitHub에서 소스 코드를 가져오세요.

최신 WinUI 2 를 사용하여 모든 컨트롤에 대한 최신 스타일과 템플릿을 가져오는 것이 좋습니다. WinUI 2.2 및 이후 버전에는 둥근 모서리를 사용하는 이러한 컨트롤의 새 템플릿이 포함되어 있습니다. 자세한 내용은 모서리 반경을 참조하세요.

이 문서의 코드를 WinUI 2와 함께 사용하려면 XAML의 별칭(여기서는 muxc를 사용)을 사용하여 프로젝트에 포함된 Windows UI 라이브러리 API를 표현합니다. 자세한 내용은 WinUI 2 시작 섹션을 참조하세요.

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:DropDownButton />
<muxc:SplitButton />
<muxc:ToggleSplitButton />

단추 만들기

• 중요 API:Button 클래스, Click 이벤트, 명령 속성, 콘텐츠 속성

WinUI 3 갤러리 앱을 열고 작동 중인 Buttons을 확인합니다.

WinUI 3 갤러리 앱에는 대부분의 WinUI 3 컨트롤, 특징, 기능의 대화형 예제가 포함되어 있습니다. 앱을 Microsoft Store 에서 다운로드하거나 GitHub에서 소스 코드를 가져오세요.

이 예제에서는 클릭에 응답하는 단추를 보여 줍니다.

XAML에서 단추를 만듭니다.

<Button Content="Subscribe" Click="SubscribeButton_Click"/>

또는 코드에서 단추를 만듭니다.

Button subscribeButton = new Button();
subscribeButton.Content = "Subscribe";
subscribeButton.Click += SubscribeButton_Click;

// Add the button to a parent container in the visual tree.
stackPanel1.Children.Add(subscribeButton);

Click 이벤트를 처리합니다.

private async void SubscribeButton_Click(object sender, RoutedEventArgs e)
{
    // Call app specific code to subscribe to the service. For example:
    ContentDialog subscribeDialog = new ContentDialog
    {
        Title = "Subscribe to App Service?",
        Content = "Listen, watch, and play in high definition for only $9.99/month. Free to try, cancel anytime.",
        CloseButtonText = "Not Now",
        PrimaryButtonText = "Subscribe",
        SecondaryButtonText = "Try it"
    };

    ContentDialogResult result = await subscribeDialog.ShowAsync();
}

단추 조작

손가락 또는 스타일러스로 Button 컨트롤을 탭하거나 포인터가 그 위에 있을 때 마우스 왼쪽 단추를 누르면 Click 이벤트가 발생합니다. 단추에 키보드 포커스가 있는 경우 Enter 키 또는 스페이스바를 눌러도 Click 이벤트가 발생합니다.

단추에는 Click 동작이 있기 때문에 일반적으로 Button 개체에서 하위 수준의 PointerPressed 이벤트를 처리할 수 없습니다. 자세한 내용은 이벤트 및 라우트된 이벤트 개요를 참조하세요.

ClickMode 속성을 변경하여 단추가 Click 이벤트를 발생시키는 방법을 변경할 수 있습니다. ClickMode의 기본값은 Release이지만, 단추의 ClickMode 값을 Hover 또는 Press로 설정할 수도 있습니다. ClickMode가 Hover인 경우 키보드 또는 터치를 통해 Click 이벤트를 발생시킬 수는 없습니다.

단추 콘텐츠

Button은 ContentControl 클래스의 콘텐츠 컨트롤입니다. 단추의 XAML 콘텐츠 속성은 Content이며 XAML에 대해 <Button>A button's content</Button>과 같은 구문을 가능하게 합니다. 어떠한 개체라도 단추 콘텐츠로 설정할 수 있습니다. 콘텐츠가 UIElement 개체인 경우 단추에서 렌더링됩니다. 콘텐츠가 다른 유형의 개체인 경우 해당 문자열 표현이 단추에 표시됩니다.

단추의 콘텐츠는 일반적으로 텍스트입니다. 해당 텍스트를 디자인할 때 이전에 나열된 버튼 텍스트 권장 사항 을 따릅니다.

단추의 모양을 만드는 시각 효과를 사용자 지정할 수도 있습니다. 예를 들어 텍스트를 아이콘으로 바꾸거나 아이콘과 텍스트를 함께 사용할 수 있습니다.

여기서는 이미지와 텍스트가 포함된 StackPanel이 단추의 콘텐츠로 설정되어 있습니다.

<Button x:Name="Button2" Click="Button_Click" Width="80" Height="90">
    <StackPanel>
        <Image Source="/Assets/Slices.png" Height="52"/>
        <TextBlock Text="Slices" Foreground="Black" HorizontalAlignment="Center"/> 
    </StackPanel>
</Button>

단추는 다음과 같습니다.

반복 단추 만들기

• 중요 API:RepeatButton 클래스, Click 이벤트, 콘텐츠 속성

WinUI 3 갤러리 앱을 열고 작동 중인 RepeatButton을 확인합니다.

WinUI 3 갤러리 앱에는 대부분의 WinUI 3 컨트롤, 특징, 기능의 대화형 예제가 포함되어 있습니다. 앱을 Microsoft Store 에서 다운로드하거나 GitHub에서 소스 코드를 가져오세요.

RepeatButton 컨트롤은 사용자가 눌렀다가 놓을 때까지 반복해서 Click 이벤트를 발생시키는 단추입니다. Delay 속성을 설정하여 RepeatButton 컨트롤이 클릭 동작 반복을 시작하기 전에 눌러진 후 대기해야 하는 시간을 지정합니다. Interval 속성을 설정하여 클릭 동작의 반복 간 시간을 지정합니다. 두 속성에 대한 시간은 밀리초로 지정됩니다.

다음 예제에서는 두 RepeatButton 컨트롤(해당 Click 이벤트는 텍스트 블록에 표시되는 값을 늘리고 줄이는 데 사용함)을 보여 줍니다.

<StackPanel>
    <RepeatButton Width="100" Delay="500" Interval="100" Click="Increase_Click">Increase</RepeatButton>
    <RepeatButton Width="100" Delay="500" Interval="100" Click="Decrease_Click">Decrease</RepeatButton>
    <TextBlock x:Name="clickTextBlock" Text="Number of Clicks:" />
</StackPanel>

private static int _clicks = 0;
private void Increase_Click(object sender, RoutedEventArgs e)
{
    _clicks += 1;
    clickTextBlock.Text = "Number of Clicks: " + _clicks;
}

private void Decrease_Click(object sender, RoutedEventArgs e)
{
    if(_clicks > 0)
    {
        _clicks -= 1;
        clickTextBlock.Text = "Number of Clicks: " + _clicks;
    }
}

드롭다운 단추 만들기

• 중요 API: DropDownButton 클래스, 플라이아웃 속성

WinUI 3 갤러리 앱을 열고 작동 중인 DropdownButton을 확인합니다.

WinUI 3 갤러리 앱에는 대부분의 WinUI 3 컨트롤, 특징, 기능의 대화형 예제가 포함되어 있습니다. 앱을 Microsoft Store 에서 다운로드하거나 GitHub에서 소스 코드를 가져오세요.

DropDownButton은 더 많은 옵션을 포함하는 연결된 플라이아웃이 있는 시각적 표시기 형태의 갈매기형 펼침 단추를 표시합니다. 플라이아웃을 사용하는 표준 Button 컨트롤과 동작은 동일하고, 모양만 다릅니다.

드롭다운 단추는 Click 이벤트를 상속하지만 일반적으로 사용되지 않습니다. 대신, Flyout 속성을 사용하여 플라이아웃을 연결하고 플라이아웃의 메뉴 옵션을 사용하여 작업을 호출합니다. 단추를 클릭하면 플라이아웃이 자동으로 열립니다. 단추를 원하는 대로 배치하려면 플라이아웃의 Placement 속성을 지정해야 합니다. 기본 배치 알고리즘으로는 상황에 따라 의도한 대로 배치하지 못할 수 있습니다. 플라이아웃에 대한 자세한 내용은 플라이아웃 및 메뉴 플라이아웃과 메뉴 바를 참조하세요.

예제 - 드롭다운 단추

이 예제에서는 RichEditBox 컨트롤의 단락 맞춤 명령이 포함된 플라이아웃을 사용하여 드롭다운 단추를 만드는 방법을 보여줍니다. 자세한 정보 및 코드는 서식 있는 편집 상자를 참조하세요.

<DropDownButton ToolTipService.ToolTip="Alignment">
    <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="14" Text="&#xE8E4;"/>
    <DropDownButton.Flyout>
        <MenuFlyout Placement="BottomEdgeAlignedLeft">
            <MenuFlyoutItem Text="Left" Icon="AlignLeft" Tag="left"
                            Click="AlignmentMenuFlyoutItem_Click"/>
            <MenuFlyoutItem Text="Center" Icon="AlignCenter" Tag="center"
                            Click="AlignmentMenuFlyoutItem_Click"/>
            <MenuFlyoutItem Text="Right" Icon="AlignRight" Tag="right"
                            Click="AlignmentMenuFlyoutItem_Click"/>
        </MenuFlyout>
    </DropDownButton.Flyout>
</DropDownButton>

private void AlignmentMenuFlyoutItem_Click(object sender, RoutedEventArgs e)
{
    var option = ((MenuFlyoutItem)sender).Tag.ToString();

    Windows.UI.Text.ITextSelection selectedText = editor.Document.Selection;
    if (selectedText != null)
    {
        // Apply the alignment to the selected paragraphs.
        var paragraphFormatting = selectedText.ParagraphFormat;
        if (option == "left")
        {
            paragraphFormatting.Alignment = Windows.UI.Text.ParagraphAlignment.Left;
        }
        else if (option == "center")
        {
            paragraphFormatting.Alignment = Windows.UI.Text.ParagraphAlignment.Center;
        }
        else if (option == "right")
        {
            paragraphFormatting.Alignment = Windows.UI.Text.ParagraphAlignment.Right;
        }
    }
}

분할 단추 만들기

• 중요 API: SplitButton 클래스, Click 이벤트, 플라이아웃 속성

WinUI 3 갤러리 앱을 열고 작동 중인 SplitButton을 확인합니다.

WinUI 3 갤러리 앱에는 대부분의 WinUI 3 컨트롤, 특징, 기능의 대화형 예제가 포함되어 있습니다. 앱을 Microsoft Store 에서 다운로드하거나 GitHub에서 소스 코드를 가져오세요.

SplitButton 컨트롤은 개별적으로 호출할 수 있는 두 부분으로 구성됩니다. 한 부분은 표준 단추처럼 동작하며 즉각적인 작업을 호출합니다. 다른 부분은 사용자가 선택할 수 있는 추가 옵션을 포함하는 플라이아웃을 호출합니다.

참고 항목

터치로 호출하면 분할 단추가 드롭다운 단추처럼 동작하고, 단추의 양쪽 절반이 플라이아웃을 호출합니다. 또 다른 입력 방법으로, 사용자는 단추의 절반을 개별적으로 호출할 수 있습니다.

분할 단추의 일반적인 동작은 다음과 같습니다.

• 사용자가 단추 부분을 클릭하면 Click 이벤트를 처리하여 현재 드롭다운 목록에서 선택된 옵션을 호출합니다.

• 드롭다운이 열려 있으면 드롭다운의 항목 호출을 처리하여 현재 선택된 옵션을 변경하고 호출합니다. 터치를 사용할 때에는 단추 Click 이벤트가 발생하지 않으므로 플라이아웃 항목을 호출해야 합니다.

팁

여러 가지 방법으로 드롭다운에 항목을 배치하고 호출을 처리할 수 있습니다. ListView 또는 GridView를 사용하는 경우 한 가지 방법은 SelectionChanged 이벤트를 처리하는 것입니다. 이렇게 하는 경우 SingleSelectionFollowsFocus를 false로 설정합니다. 그러면 사용자는 변경할 때마다 항목을 호출하지 않고 키보드를 사용하여 옵션을 탐색할 수 있습니다.

예제 - 분할 단추

이 예제에서는 RichEditBox 컨트롤에서 선택한 텍스트의 전경색을 변경하는 데 사용되는 분할 단추를 만드는 방법을 보여줍니다. 자세한 정보 및 코드는 서식 있는 편집 상자를 참조하세요. 분할 단추의 플라이아웃은 Placement 속성의 기본값으로 BottomEdgeAlignedLeft를 사용합니다. 이 값을 재정의할 수 없습니다.

<SplitButton ToolTipService.ToolTip="Foreground color"
             Click="BrushButtonClick">
    <Border x:Name="SelectedColorBorder" Width="20" Height="20"/>
    <SplitButton.Flyout>
        <Flyout x:Name="BrushFlyout">
            <!-- Set SingleSelectionFollowsFocus="False"
                 so that keyboard navigation works correctly. -->
            <GridView ItemsSource="{x:Bind ColorOptions}"
                      SelectionChanged="BrushSelectionChanged"
                      SingleSelectionFollowsFocus="False"
                      SelectedIndex="0" Padding="0">
                <GridView.ItemTemplate>
                    <DataTemplate>
                        <Rectangle Fill="{Binding}" Width="20" Height="20"/>
                    </DataTemplate>
                </GridView.ItemTemplate>
                <GridView.ItemContainerStyle>
                    <Style TargetType="GridViewItem">
                        <Setter Property="Margin" Value="2"/>
                        <Setter Property="MinWidth" Value="0"/>
                        <Setter Property="MinHeight" Value="0"/>
                    </Style>
                </GridView.ItemContainerStyle>
            </GridView>
        </Flyout>
    </SplitButton.Flyout>
</SplitButton>

public sealed partial class MainPage : Page
{
    // Color options that are bound to the grid in the split button flyout.
    private List<SolidColorBrush> ColorOptions = new List<SolidColorBrush>();
    private SolidColorBrush CurrentColorBrush = null;

    public MainPage()
    {
        this.InitializeComponent();

        // Add color brushes to the collection.
        ColorOptions.Add(new SolidColorBrush(Colors.Black));
        ColorOptions.Add(new SolidColorBrush(Colors.Red));
        ColorOptions.Add(new SolidColorBrush(Colors.Orange));
        ColorOptions.Add(new SolidColorBrush(Colors.Yellow));
        ColorOptions.Add(new SolidColorBrush(Colors.Green));
        ColorOptions.Add(new SolidColorBrush(Colors.Blue));
        ColorOptions.Add(new SolidColorBrush(Colors.Indigo));
        ColorOptions.Add(new SolidColorBrush(Colors.Violet));
        ColorOptions.Add(new SolidColorBrush(Colors.White));
    }

    private void BrushButtonClick(object sender, object e)
    {
        // When the button part of the split button is clicked,
        // apply the selected color.
        ChangeColor();
    }

    private void BrushSelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        // When the flyout part of the split button is opened and the user selects
        // an option, set their choice as the current color, apply it, then close the flyout.
        CurrentColorBrush = (SolidColorBrush)e.AddedItems[0];
        SelectedColorBorder.Background = CurrentColorBrush;
        ChangeColor();
        BrushFlyout.Hide();
    }

    private void ChangeColor()
    {
        // Apply the color to the selected text in a RichEditBox.
        Windows.UI.Text.ITextSelection selectedText = editor.Document.Selection;
        if (selectedText != null)
        {
            Windows.UI.Text.ITextCharacterFormat charFormatting = selectedText.CharacterFormat;
            charFormatting.ForegroundColor = CurrentColorBrush.Color;
            selectedText.CharacterFormat = charFormatting;
        }
    }
}

설정/해제 분할 단추 만들기

• 중요 API: ToggleSplitButton 클래스, IsCheckedChanged 이벤트, IsChecked 속성

WinUI 3 갤러리 앱을 열고 작동 중인 ToggleSplitButton을 확인합니다.

WinUI 3 갤러리 앱에는 대부분의 WinUI 3 컨트롤, 특징, 기능의 대화형 예제가 포함되어 있습니다. 앱을 Microsoft Store 에서 다운로드하거나 GitHub에서 소스 코드를 가져오세요.

ToggleSplitButton 컨트롤은 개별적으로 호출할 수 있는 두 부분으로 구성됩니다. 한 부분은 끄거나 켤 수 있는 토글 단추처럼 동작합니다. 다른 부분은 사용자가 선택할 수 있는 추가 옵션을 포함하는 플라이아웃을 호출합니다.

설정/해제 분할 단추는 일반적으로 기능에 사용자가 선택할 수 있는 여러 옵션이 있을 때 기능을 활성화 또는 비활성화하는 데 사용됩니다. 예를 들어 문서 편집기에서 목록을 켜고 끄는 데 사용할 수 있습니다. 반면 드롭다운은 목록의 스타일을 선택하는 데 사용됩니다.

참고 항목

터치로 호출하면 설정/해제 분할 단추가 드롭다운 단추로 작동합니다. 또 다른 입력 방법으로, 사용자는 단추의 절반을 개별적으로 전환하고 호출할 수 있습니다. 터치를 사용하면 단추의 두 절반이 플라이아웃을 호출합니다. 따라서 플라이아웃 콘텐츠에 단추를 켜고 끄는 옵션을 포함해야 합니다.

ToggleButton과의 차이점

ToggleButton과는 다르게, ToggleSplitButton은 확정되지 않은 상태가 없습니다. 따라서 다음과 같은 차이점을 기억해야 합니다.

• ToggleSplitButton에는 IsThreeState 속성 또는 Indeterminate 이벤트가 없습니다.
• ToggleSplitButton.IsChecked 속성은 Nullable<bool>이 아닌 부울입니다.
• ToggleSplitButton에는 IsCheckedChanged 이벤트만 있고, 별도의 Checked 및 Unchecked 이벤트는 없습니다.

예제 - 설정/해제 분할 단추

다음 예제는 RichEditBox 컨트롤에서 설정/해제 분할 단추를 사용하여 목록 서식 지정을 켜고 끄는 방법과 목록 스타일을 변경하는 방법을 보여줍니다. 자세한 정보 및 코드는 서식 있는 편집 상자를 참조하세요. 설정/해제 분할 단추의 플라이아웃은 Placement 속성의 기본값으로 BottomEdgeAlignedLeft를 사용합니다. 이 값을 재정의할 수 없습니다.

<ToggleSplitButton x:Name="ListButton"
                   ToolTipService.ToolTip="List style"
                   Click="ListButton_Click"
                   IsCheckedChanged="ListStyleButton_IsCheckedChanged">
    <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="14" Text="&#xE8FD;"/>
    <ToggleSplitButton.Flyout>
        <Flyout>
            <ListView x:Name="ListStylesListView"
                      SelectionChanged="ListStylesListView_SelectionChanged"
                      SingleSelectionFollowsFocus="False">
                <StackPanel Tag="bullet" Orientation="Horizontal">
                    <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE7C8;"/>
                    <TextBlock Text="Bullet" Margin="8,0"/>
                </StackPanel>
                <StackPanel Tag="alpha" Orientation="Horizontal">
                    <TextBlock Text="A" FontSize="24" Margin="2,0"/>
                    <TextBlock Text="Alpha" Margin="8"/>
                </StackPanel>
                <StackPanel Tag="numeric" Orientation="Horizontal">
                    <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xF146;"/>
                    <TextBlock Text="Numeric" Margin="8,0"/>
                </StackPanel>
                <TextBlock Tag="none" Text="None" Margin="28,0"/>
            </ListView>
        </Flyout>
    </ToggleSplitButton.Flyout>
</ToggleSplitButton>

private void ListStyleButton_IsCheckedChanged(ToggleSplitButton sender, ToggleSplitButtonIsCheckedChangedEventArgs args)
{
    // Use the toggle button to turn the selected list style on or off.
    if (((ToggleSplitButton)sender).IsChecked == true)
    {
        // On. Apply the list style selected in the drop down to the selected text.
        var listStyle = ((FrameworkElement)(ListStylesListView.SelectedItem)).Tag.ToString();
        ApplyListStyle(listStyle);
    }
    else
    {
        // Off. Make the selected text not a list,
        // but don't change the list style selected in the drop down.
        ApplyListStyle("none");
    }
}

private void ListStylesListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    var listStyle = ((FrameworkElement)(e.AddedItems[0])).Tag.ToString();

    if (ListButton.IsChecked == true)
    {
        // Toggle button is on. Turn it off...
        if (listStyle == "none")
        {
            ListButton.IsChecked = false;
        }
        else
        {
            // or apply the new selection.
            ApplyListStyle(listStyle);
        }
    }
    else
    {
        // Toggle button is off. Turn it on, which will apply the selection
        // in the IsCheckedChanged event handler.
        ListButton.IsChecked = true;
    }
}

private void ApplyListStyle(string listStyle)
{
    Windows.UI.Text.ITextSelection selectedText = editor.Document.Selection;
    if (selectedText != null)
    {
        // Apply the list style to the selected text.
        var paragraphFormatting = selectedText.ParagraphFormat;
        if (listStyle == "none")
        {  
            paragraphFormatting.ListType = Windows.UI.Text.MarkerType.None;
        }
        else if (listStyle == "bullet")
        {
            paragraphFormatting.ListType = Windows.UI.Text.MarkerType.Bullet;
        }
        else if (listStyle == "numeric")
        {
            paragraphFormatting.ListType = Windows.UI.Text.MarkerType.Arabic;
        }
        else if (listStyle == "alpha")
        {
            paragraphFormatting.ListType = Windows.UI.Text.MarkerType.UppercaseEnglishLetter;
        }
        selectedText.ParagraphFormat = paragraphFormatting;
    }
}

샘플 코드 가져오기

• WinUI 갤러리: 이 샘플은 모든 XAML 컨트롤을 대화형 형식으로 보여줍니다.

관련된 문서

• Button 클래스
• 라디오 단추
• 확인란
• 토글 스위치