WinUI 3 C++ 컨트롤 편 – 버튼 컨트롤

앞에서 버튼 컨트롤을 사용해본 적이 있습니다. 가장 기본적인 것은 Button이며, 이제 다른 종류의 버튼 컨트롤을 배우겠습니다. 버튼은 프로그램과 상호작용하기 위한 컨트롤로, 클릭하면 해당 로직이 실행됩니다.

WinUI3 C++에서 주로 제공하는 버튼 컨트롤은 다음과 같습니다.

• Button：표준 클릭 버튼
• ToggleButton：선택/비선택 상태 전환 버튼
• RepeatButton：길게 누르면 클릭 이벤트 연속 발생
• HyperlinkButton：하이퍼링크 스타일 버튼
• SplitButton：메인 버튼 + 드롭다운 메뉴 일체형 컨트롤
• DropDownButton：드롭다운 메뉴만 있는 버튼
• CommandBarButton / AppBarButton：툴바 아이콘 버튼
• MenuFlyoutItem / ToggleMenuFlyoutItem：우클릭/드롭다운 메뉴 항목

아래 XAML로 위 컨트롤을 선언하는 예시를 보여드립니다. 백엔드 이벤트 바인딩 방식은 이전과 동일하며, 가장 간단한 방법은 F12 키를 눌러 이벤트 함수를 자동 생성하는 것입니다. MainWindow.xaml을 수정하겠습니다.

 <StackPanel Spacing="15" Padding="20" Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center">
     <!-- 1. Button: Standard click button -->
     <Button x:Name="NormalBtn" Content="Standard Button (Button)" Click="NormalBtn_Click"/>

     <!-- 2. ToggleButton: Switchable checked/unchecked state button -->
     <ToggleButton x:Name="ToggleBtn" Content="Toggle Button (ToggleButton)"/>

     <!-- 3. RepeatButton: Trigger click continuously when holding down -->
     <RepeatButton x:Name="RepeatBtn" Content="Repeat Button (RepeatButton)" Click="RepeatBtn_Click"/>

     <!-- 4. HyperlinkButton: Hyperlink style button -->
     <HyperlinkButton Content="Hyperlink Button (HyperlinkButton)" NavigateUri="https://learn.microsoft.com/windows/apps/winui"/>

     <!-- 5. SplitButton: Combined main button + dropdown menu -->
     <SplitButton Content="Split Button (SplitButton)">
         <SplitButton.Flyout>
             <MenuFlyout>
                 <MenuFlyoutItem Text="Option A"/>
                 <MenuFlyoutItem Text="Option B"/>
             </MenuFlyout>
         </SplitButton.Flyout>
     </SplitButton>

     <!-- 6. DropDownButton: Button with dropdown menu only -->
     <DropDownButton Content="Dropdown Button (DropDownButton)">
         <DropDownButton.Flyout>
             <MenuFlyout>
                 <MenuFlyoutItem Text="Function 1"/>
                 <ToggleMenuFlyoutItem Text="Enable Mode"/>
             </MenuFlyout>
         </DropDownButton.Flyout>
     </DropDownButton>

     <!-- 8. MenuFlyoutItem / ToggleMenuFlyoutItem: Right-click / dropdown menu items -->
     <Button Content="Right-click to open menu" Width="220">
         <Button.Flyout>
             <MenuFlyout>
                 <MenuFlyoutItem Text="Normal Menu Item (MenuFlyoutItem)"/>
                 <ToggleMenuFlyoutItem Text="Checkable Menu Item (ToggleMenuFlyoutItem)"/>
                 <MenuFlyoutSeparator/>
                 <MenuFlyoutItem Text="Exit"/>
             </MenuFlyout>
         </Button.Flyout>
     </Button>
 </StackPanel>Code language: HTML, XML (xml)

Click="NormalBtn_Click"와 Click="RepeatBtn_Click" 위에 커서를 올리고 F12를 누르면 두 개의 함수가 생성됩니다. 데모용이므로 내부 로직을 구현하지 않아도 되며, 관심 있는 분들은 직접 기능 로직을 추가해볼 수 있습니다.

void winrt::App6::implementation::MainWindow::NormalBtn_Click(winrt::Windows::Foundation::IInspectable const& sender, 
winrt::Microsoft::UI::Xaml::RoutedEventArgs const& e)
{

}

void winrt::App6::implementation::MainWindow::RepeatBtn_Click(winrt::Windows::Foundation::IInspectable const& sender,
 winrt::Microsoft::UI::Xaml::RoutedEventArgs const& e)
{

}
Code language: C++ (cpp)