WinUI 3 C++ コントロール編－選択・切り替えコントロール

Posted on 2026年7月7日 by

今回の講座ではWinUI 3 C++の選択系と切り替え系コントロールを学習します。

コントロール名日本語名称
CheckBox複数選択チェックボックス
RadioButton単一選択ラジオボタン（同一GroupName内は排他的）
ToggleSwitchスライド式切り替えスイッチ
ComboBoxドロップダウン選択ボックス
ComboBoxItemドロップダウン内の選択項目
ListBox固定リスト選択枠（仮想化なし）
ListBoxItemListBoxのリスト項目
SelectorBar横方向セグメント選択器
SelectorBarItemセグメントタブ項目
TreeView階層ツリービュー
TreeViewItemツリーノード項目
RatingControl星評価コントロール

下記でこれら汎用コントロールの使用例を示します。

SDKバージョンによって細かい差異がある場合があり、今回はVS2022を使用しています。

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="App6.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App6"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="App6 Control Demo">

    <ScrollViewer Padding="30" VerticalScrollBarVisibility="Auto">
        <StackPanel Spacing="35">
            <!-- 1. CheckBox Multi-selection Checkbox -->
            <Border Padding="14" BorderThickness="1" BorderBrush="Gray" CornerRadius="8">
                <StackPanel Spacing="12">
                    <TextBlock Text="1. CheckBox - 複数選択チェックボックス" FontWeight="SemiBold" FontSize="14" Margin="0,0,0,8"/>
                    <CheckBox Content="オプションA" IsChecked="True"/>
                    <CheckBox Content="オプションB"/>
                    <CheckBox Content="オプションC" IsThreeState="True"/>
                </StackPanel>
            </Border>

            <!-- 2. RadioButton Grouped Single Selection -->
            <Border Padding="14" BorderThickness="1" BorderBrush="Gray" CornerRadius="8">
                <StackPanel Spacing="12">
                    <TextBlock Text="2. RadioButton - グループ化単一選択ラジオボタン(GroupName)" FontWeight="SemiBold" FontSize="14" Margin="0,0,0,8"/>
                    <TextBlock Text="性別グループ(GroupName=Gender)"/>
                    <RadioButton GroupName="Gender" Content="男性" IsChecked="True"/>
                    <RadioButton GroupName="Gender" Content="女性"/>
                    <RadioButton GroupName="Gender" Content="回答しない"/>
                    <TextBlock Margin="0,10,0,0" Text="年齢層グループ(GroupName=Age)"/>
                    <RadioButton GroupName="Age" Content="18歳未満"/>
                    <RadioButton GroupName="Age" Content="18～30歳"/>
                    <RadioButton GroupName="Age" Content="30歳以上"/>
                </StackPanel>
            </Border>

            <!-- 3. ToggleSwitch Toggle Slider Switch -->
            <Border Padding="14" BorderThickness="1" BorderBrush="Gray" CornerRadius="8">
                <StackPanel Spacing="12">
                    <TextBlock Text="3. ToggleSwitch - スライド切り替えスイッチ" FontWeight="SemiBold" FontSize="14" Margin="0,0,0,8"/>
                    <StackPanel Orientation="Horizontal" Spacing="20" VerticalAlignment="Center">
                        <ToggleSwitch Header="自動同期" IsOn="True"/>
                        <ToggleSwitch Header="ダークモード" OffContent="オフ" OnContent="オン"/>
                    </StackPanel>
                </StackPanel>
            </Border>

            <!-- 4. ComboBox Dropdown Single Select List -->
            <Border Padding="14" BorderThickness="1" BorderBrush="Gray" CornerRadius="8">
                <StackPanel Spacing="12">
                    <TextBlock Text="4. ComboBox - ドロップダウン単一選択リスト" FontWeight="SemiBold" FontSize="14" Margin="0,0,0,8"/>
                    <ComboBox Width="260" SelectedIndex="1">
                        <ComboBoxItem Content="New York"/>
                        <ComboBoxItem Content="London"/>
                        <ComboBoxItem Content="Hong Kong"/>
                        <ComboBoxItem Content="Tokyo"/>
                    </ComboBox>
                </StackPanel>
            </Border>

            <!-- 5. ListBox Fixed Height Single/Multi List -->
            <Border Padding="14" BorderThickness="1" BorderBrush="Gray" CornerRadius="8">
                <StackPanel Spacing="12">
                    <TextBlock Text="5. ListBox - 固定高さ複数/単一選択リスト" FontWeight="SemiBold" FontSize="14" Margin="0,0,0,8"/>
                    <ListBox Width="280" Height="140" SelectionMode="Multiple">
                        <ListBoxItem Content="ドキュメント"/>
                        <ListBoxItem Content="画像"/>
                        <ListBoxItem Content="動画"/>
                        <ListBoxItem Content="音声"/>
                        <ListBoxItem Content="インストーラー"/>
                    </ListBox>
                </StackPanel>
            </Border>

            <!-- 6. ListView Virtualized High-Performance List (Recommended for Large Data) -->
            <Border Padding="14" BorderThickness="1" BorderBrush="Gray" CornerRadius="8">
                <StackPanel Spacing="12">
                    <TextBlock Text="6. ListView - 仮想化ハイパフォーマンスリスト（大量データ推奨）" FontWeight="SemiBold" FontSize="14" Margin="0,0,0,8"/>
                    <ListView Width="320" Height="160" SelectionMode="Single">
                        <ListViewItem>
                            <StackPanel Orientation="Horizontal" Spacing="10">
                                <SymbolIcon Symbol="Document"/>
                                <TextBlock Text="データ項目 001"/>
                            </StackPanel>
                        </ListViewItem>
                        <ListViewItem>
                            <StackPanel Orientation="Horizontal" Spacing="10">
                                <SymbolIcon Symbol="Document"/>
                                <TextBlock Text="データ項目 002"/>
                            </StackPanel>
                        </ListViewItem>
                        <ListViewItem>
                            <StackPanel Orientation="Horizontal" Spacing="10">
                                <SymbolIcon Symbol="Document"/>
                                <TextBlock Text="データ項目 003"/>
                            </StackPanel>
                        </ListViewItem>
                    </ListView>
                </StackPanel>
            </Border>

            <!-- 7. GridView Grid Card Layout -->
            <Border Padding="14" BorderThickness="1" BorderBrush="Gray" CornerRadius="8">
                <StackPanel Spacing="12">
                    <TextBlock Text="7. GridView - グリッドカードレイアウト" FontWeight="SemiBold" FontSize="14" Margin="0,0,0,8"/>
                    <GridView Width="500" Height="180">
                        <GridView.ItemContainerStyle>
                            <Style TargetType="GridViewItem">
                                <Setter Property="Width" Value="110"/>
                                <Setter Property="Height" Value="100"/>
                            </Style>
                        </GridView.ItemContainerStyle>
                        <GridViewItem>
                            <Border Background="LightBlue" Margin="5" CornerRadius="6">
                                <TextBlock Text="カード1" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            </Border>
                        </GridViewItem>
                        <GridViewItem>
                            <Border Background="LightGreen" Margin="5" CornerRadius="6">
                                <TextBlock Text="カード2" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            </Border>
                        </GridViewItem>
                        <GridViewItem>
                            <Border Background="LightSalmon" Margin="5" CornerRadius="6">
                                <TextBlock Text="カード3" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            </Border>
                        </GridViewItem>
                        <GridViewItem>
                            <Border Background="LightPink" Margin="5" CornerRadius="6">
                                <TextBlock Text="カード4" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            </Border>
                        </GridViewItem>
                        <GridViewItem>
                            <Border Background="LightGoldenrodYellow" Margin="5" CornerRadius="6">
                                <TextBlock Text="カード5" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            </Border>
                        </GridViewItem>
                        <GridViewItem>
                            <Border Background="LightCyan" Margin="5" CornerRadius="6">
                                <TextBlock Text="カード6" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            </Border>
                        </GridViewItem>
                    </GridView>
                </StackPanel>
            </Border>

            <!-- 9. SelectorBar Horizontal Tab Selector -->
            <Border Padding="14" BorderThickness="1" BorderBrush="Gray" CornerRadius="8">
                <StackPanel Spacing="12">
                    <TextBlock Text="9. SelectorBar - 横タブ選択バー" FontWeight="SemiBold" FontSize="14" Margin="0,0,0,8"/>
                    <SelectorBar Width="450">
                        <SelectorBarItem Text="ホーム">
                            <SelectorBarItem.Icon>
                                <SymbolIcon Symbol="Home"/>
                            </SelectorBarItem.Icon>
                        </SelectorBarItem>
                        <SelectorBarItem Text="メッセージ">
                            <SelectorBarItem.Icon>
                                <SymbolIcon Symbol="Message"/>
                            </SelectorBarItem.Icon>
                        </SelectorBarItem>
                        <SelectorBarItem Text="ファイル">
                            <SelectorBarItem.Icon>
                                <SymbolIcon Symbol="Folder"/>
                            </SelectorBarItem.Icon>
                        </SelectorBarItem>

                    </SelectorBar>
                </StackPanel>
            </Border>
        </StackPanel>
    </ScrollViewer>
</Window>Code language: HTML, XML (xml)

POSTED IN WinUI C++ ガイド

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です