C#

【WPF】画面作成で使う「コントロール」一覧(種類別に紹介)

C#のWPFには、UI画面で使える多くの「コントロール」が予め用意されています。

このブログではちょくちょく、コントロールの使い方を紹介してきました。画面を作成するときに纏めてあった方が親切だと思うので、今回このような一覧表を作成してみました。

アルファベット順に並べています。

ここにあるコントロールは全てではなく、使用頻度が高いコントロールを載せています。時間がある時に他のコントロールは順次追加をしていく予定です。

プログラミング用のノートパソコンで悩んでいませんか?

これからプログラミングを始めたい初心者の方におすすめのノートパソコンを紹介しています。プログラミング向けのノートパソコンの選び方も解説していますので、参考にしてみてください。

>>おすすめのノートパソコンをもっと詳しくみる

WPFで使えるコントロール一覧

それではWPFで使うコントロールについて紹介をしていきます。

Border

枠線(罫線)を作るためのコントロールが「ボーダー」です。Borderは線の太さや角の丸み、背景色などを設定することができます。

Borderの基本的な使い方

単なる枠線として使用したり、複数の関連するコントロールをまとめる時に使用します。

上図のボーダーは次のように XAML へ記述します。

<Border
    Width="100"
    Height="40"
    Margin="0,10,0,0"
    BorderBrush="#383838"
    BorderThickness="1"
    HorizontalAlignment="Center"
    CornerRadius="5" 
    VerticalAlignment="Top" />

 

コントロールに枠線を付ける

BorderThicknessプロパティが使えず、枠線が作れないコントロールにはBorderコントロールで囲めば枠線を付けることができます。

上図のボーダーは次のように XAML へ記述します。

<Border
    Width="100"
    Height="40"
    Margin="0,10,0,0"
    HorizontalAlignment="Center"
    VerticalAlignment="Top"
    BorderBrush="#383838"
    BorderThickness="1"
    CornerRadius="5">
    <TextBlock
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Text="SAMPLE" />
</Border>

 

Button

UI画面に必要不可欠であるコントロールが「ボタン」です。

ボタンをクリックすると発生する Click イベントにより、あらゆる操作を行うことができます。使用頻度が高いコントロールの1つと言えるでしょう。

Button

Buttonの使い方の使い方を紹介
(Binding・Command)

\ ボタンの使い方を詳しくみる /

Buttonの基本的な使い方

画面上にあるボタンをユーザーがクリックすることで、処理を実行するトリガーとして使います。

上図のボタンは次のように XAML へ記述します。

<Button
    Width="100"
    Height="40"
    Margin="0,10,0,0"
    HorizontalAlignment="Center"
    VerticalAlignment="Top"
    Click="Button_Click"
    Content="Button"/>

 

CheckBox

条件を反転するコントロールが「チェックボックス」です。

正方形の領域でクリックすることで、「ON」と「OFF」を切り替えることができます。

CheckBox

CheckBoxの基本的な使用方法
(Binding・IsCheck)

\ CheckBoxの使い方を詳しくみる /

CheckBoxの基本的な使い方

ある条件の反転やコントロールの有効・無効を切り替える時に使用します。

上図のチェックボックスは次のように XAML へ記述します。

<CheckBox
    Width="100"
    Height="40"
    Margin="0,10,0,0"
    HorizontalAlignment="Center"
    VerticalAlignment="Top"
    Content="SAMPLE"
    IsChecked="True" />

 

ComboBox

文字入力またはドロップダウンリストから任意の値を選択できるコントロールが「コンボボックス」です。

コンボボックスはテキストボックスドロップダウンリストの組み合わせで、ドロップダウンリストで選択した項目がテキストボックスに入力されます。

ComoboBox

ComboBoxの使い方と実装方法を解説
(バインド)

\ コンボボックスの使い方を詳しくみる /

ComboBoxの基本的な使い方

ユーザーに複数の項目から選択をしてもらう時に使用します。

上図のコンボボックスは次のように XAML へ記述します。

<ComboBox
    Width="100"
    Height="30"
    Margin="0,10,0,0"
    HorizontalAlignment="Center"
    VerticalAlignment="Top">
    <ComboBoxItem Content="SAMPLE 1"/>
    <ComboBoxItem Content="SAMPLE 2"/>
</ComboBox>

 

DataGrid

複数存在するデータをグリッド形式(表形式)で表示するコントロールが「データグリッド」です。

DataGridでは、セルのフォント、色、サイズなど外観をカスタマイズが可能です。

DataGrid

DataGridの使い方を徹底解説
基本的な操作方法を紹介

\ データグリッドの使い方を詳しくみる /

DataGridの基本的な使い方

データベースのデータを表示と編集、並び替えができるテーブルを作成したい時に使用することが多いです。

上図のデータグリッドは次のように XAML へ記述します。

<DataGrid
    Margin="10"
    AutoGenerateColumns="False">
    <DataGrid.ColumnHeaderStyle>
        <Style BasedOn="{StaticResource MaterialDesignDataGridColumnHeader}" TargetType="DataGridColumnHeader">
            <Setter Property="HorizontalContentAlignment" Value="Center" />
            <Setter Property="FontSize" Value="10" />
        </Style>
    </DataGrid.ColumnHeaderStyle>
    <DataGrid.Columns>
        <DataGridTextColumn Width="80" Header="ユーザー名" />
        <DataGridTextColumn Width="80" Header="名前" />
        <DataGridComboBoxColumn Width="60" Header="性別" />
        <DataGridCheckBoxColumn Width="60" Header="会員" />
    </DataGrid.Columns>
</DataGrid>

 

Image

画像データを表示するコントロールが「イメージ」です。

このコントロールは、さまざまなファイル形式の画像を表示することができます。またコントロールに表示した画像を回転することも可能です。

Image

Imageコントロール
基本的な使い方を紹介

\ イメージの使い方を詳しくみる /

表示可能なファイル形式
  • BMP:ビットマップ
  • JPEG:ジョイント・フォトグラフィック・エキスパーツ・グループ
  • PNG:ポータブル・ネットワーク・グラフィックス
  • TIFF:タグド・イメージ・ファイル・フォーマット
  • GIF:グラフィックス インターチェンジ
  • ICN:アイコン
  • Microsoft Windows Media Photo
Imageの基本的な使い方

WPFで画像を表示したい時に使用します。ImageのSourceプロパティに画像ファイルのパスを指定すると画像を表示できます。

上図のイメージは次のように XAML へ記述します。

<Grid>
    <Image Margin="10" Source="Images\Sample.jpg"/>
</Grid>

 

Label

画面にテキストを表示するコントロールが「ラベル」です。

このコントロールは、文字を表示するだけで入力することはできません。文字の色や背景をプロパティで変更することが可能です。

Labelの基本的な使い方

ユーザーに対して文字列を表示したい時に使用します。

上図のラベルは次のように XAML へ記述します。

<Label
    Width="100"
    Height="30"
    Margin="0,10,0,0"
    HorizontalAlignment="Center"
    VerticalAlignment="Top"
    Content="Sample" /&gt;

 

ListBox

データを一覧で表示することができるコントロールが「ListView」です。

リストボックスは文字列だけでなく、画像データやパネルなどのオブジェクトのコレクションも表示することができます。

ListBox

【WPF】ListBox(リストボックス)
使い方と書き方まとめ

\ リストボックスの使い方を詳しくみる /

ListBoxの基本的な使い方

ユーザーに対して、一覧の表示から任意の項目を選択させたい時に使用します。

上図のリストボックスは次のように XAML へ記述します。

<ListBox
    Margin="10"
    BorderBrush="#383838"
    BorderThickness="1"
    SelectionMode="Single">
    <ListBoxItem>Samole 1</ListBoxItem>
    <ListBoxItem>Samole 2</ListBoxItem>
    <ListBoxItem>Samole 3</ListBoxItem>
    <ListBoxItem>Samole 4</ListBoxItem>
    <ListBoxItem>Samole 5</ListBoxItem>
    <ListBoxItem>Samole 6</ListBoxItem>
    <ListBoxItem>Samole 7</ListBoxItem>
    <ListBoxItem>Samole 8</ListBoxItem>
    <ListBoxItem>Samole 9</ListBoxItem>
    <ListBoxItem>Samole 10</ListBoxItem>
</ListBox>

 

ListView

複数存在するデータをグリッド形式(表形式)で表示するコントロールが「データグリッド」です。

ListBoxから派生されたItemsControlです。ListBoxと比べて簡単に行列の表示を行うことができます。

ListView

【WPF】ListView(リストビュー)
使い方まとめ

\ リストビューの使い方を詳しくみる /

ListViewの基本的な使い方

データベースのデータやリストなどのコレクションを一覧で表示したい時に使用することが多いです。

上図のリストビューは次のように XAML へ記述します。

<Grid>
    <Grid.Resources>
        <XmlDataProvider x:Key="Items" XPath="Items">
            <x:XData>
                <Items xmlns="">
                    <Item
                        No="1"
                        Name="Apple"
                        Color="Red" />
                    <Item
                        No="2"
                        Name="Banana"
                        Color="Yelllow" />
                    <Item
                        No="3"
                        Name="Cherry"
                        Color="Red" />
                    <Item
                        No="4"
                        Name="Kiwi"
                        Color="Green" />
                    <Item
                        No="5"
                        Name="Orange"
                        Color="Orange" />
                </Items>
            </x:XData>
        </XmlDataProvider>
    </Grid.Resources>
    <ListView Margin="10" ItemsSource="{Binding Source={StaticResource Items}, XPath=Item}">
        <ListView.View>
            <GridView>
                <GridViewColumn
                    Width="50"
                    DisplayMemberBinding="{Binding XPath=@No}"
                    Header="No" />
                <GridViewColumn
                    Width="150"
                    DisplayMemberBinding="{Binding XPath=@Name}"
                    Header="Name" />
                <GridViewColumn
                    Width="150"
                    DisplayMemberBinding="{Binding XPath=@Color}"
                    Header="Color" />
            </GridView>
        </ListView.View>
    </ListView>
</Grid>

 

RadioButton

ある特定の項目をボタンで選択させることができるコントロールが「ラジオボタン」です。

ユーザーが選択することができる一方で、選択解除ができないボタンです。選択を解除するにはプログラム側で、IsCheckプロパティを false にするしかありません。

RadioButtonの基本的な使い方

グループ化された項目の中から単一の値を選択させたいときに使用します。

上図のラジオボタンは次のように XAML へ記述します。

<StackPanel Margin="10">
    <RadioButton Content="Yes" />
    <RadioButton Content="No" />
</StackPanel>

まとめ

この記事ではWPFで使う UI コントロールをまとめて紹介しました。

コントロールの使い方が分からない時は、この記事を参考にしてみてくださいね。

以上、最後まで読んで頂きありがとうございました。

プログラミングを学習したいなら…

プログラミングスキルを身に付けるなら、プログラミングを効率良く学べる
プログラミングスクール」がオススメです。

特にこんな方にオススメ!!
これからエンジニアを目指したい
プログラミングの専門性を高めたい
プログラミングを学んで副業をしたい
エンジニアに転職して年収をアップさせたい

プログラミングを触ったことがない未経験からでも、プログラミングスクールで学習すれば、エンジニアへ就職・転職することも可能です。

あなたの「行動力」と「やる気」で、あなたの人生を大きく変えるチャンスになることでしょう。

プログラミングスクールに興味がある方は是非チェックしてみてください。

> プログラミングを学ぶ <

COMMENT

メールアドレスが公開されることはありません。

CAPTCHA