【C#】UWPにおけるComboboxのSelected系プロパティまとめ

# まとめ
この記事はここだけ見れば十分です。
後に書いた調査は、やったことを残しておきたかった自己満メモです。

**結論**

![まとめ1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2257421/62c4fba8-b83b-ec46-ad30-dc3a00a20283.png)
![まとめ2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2257421/b8bc9df7-3f2c-b4ca-62e1-f5051b0e31cd.png)


# 調査
**やること：果物たちをコンボボックスに表示する。**

とりあえず中身なしのコンボボックスと、デバッグ用にボタンを用意。（Clickイベント内で変数の中身とかみる予定）
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2257421/68e779c2-70a6-3e58-da55-733732f7da7e.png)

```MainPage.xaml
<Page
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Width="400" Height="300">

    <Grid>
        <ComboBox x:Name="TestComboBox" Margin="60,80,0,0" Width="120"
                  />
        <Button Content="Button" Margin="210,80,0,0" VerticalAlignment="Top"/>
    </Grid>
</Page>
```

果物たちはこんな感じで用意。
```MainPage.xaml.cs
public sealed partial class MainPage : Page
    {
        public List<Item> fruits;

        public MainPage()
        {
            this.InitializeComponent();

            fruits = new List<Item>();
            fruits.Add(new Item(1, "りんご", 100));
            fruits.Add(new Item(2, "みかん", 200));
            fruits.Add(new Item(3, "ぶどう", 300));
        }
    }
    public class Item
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public int Price { get; set; }

        public Item(int Id, string Name, int Price)
        {
            this.Id = Id;
            this.Name = Name;
            this.Price = Price;
        }
    }
```

| #  | Id | Name  | Price |
|:---|:---|:------|:------|
| 0  | 1  | りんご | 100   |
| 1  | 2  | みかん | 200   |
| 2  | 3  | ぶどう | 300   |

## ItemsSource
コンボボックスに紐づけるオブジェクトを設定する。

## DisplayMemberPath
ItemsSourceで紐づけたオブジェクトのうち、表示名に使用するプロパティを設定する。

### 使用例
```MainPage.xaml
<ComboBox x:Name="TestComboBox" Margin="60,80,0,0" Width="120"
          ItemsSource="{x:Bind fruits, Mode=OneWay}"
          DisplayMemberPath="Name"
          />
```

コンボボックスにfruits.Nameが表示される。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2257421/bb08cbdd-b603-2845-2c18-b0d13b7d08f1.png)

ItemsSourceのModeの設定値は以下の通り。

| 設定値  | 説明 |
|:---|:---|
| OneTime  | オブジェクトの情報を1度だけ読みこむ  |
| OneWay  | オブジェクトの変更がコントロールに反映される  |
| TwoWay  | オブジェクトの変更がコントロールに反映され、コントロールの変更もオブジェクトに反映される  |

## SelectedIndex
選択されている項目のインデックスを取得・設定する。

### 使用例
**取得処理**
みかんを選択してButton押下。
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2257421/5cad91b2-85a1-f76b-74a2-d803fc967e83.png)

みかんのインデックスが取得できる。
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2257421/25eccd78-321f-74d9-7609-b952a2441a37.png)

**設定処理**
ページロード時、ぶどうのインデックスを設定。
```MainPage.xaml.cs
private void Page_Loaded(object sender, RoutedEventArgs e)
{
    TestComboBox.SelectedIndex = 2;
}
```

ぶどうが初期表示される。
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2257421/5a6ce62a-25e1-e05c-e486-b00b323fd733.png)

## SelectedItem
選択されている項目を取得・設定する。

### 使用例
**取得処理**
りんごを選択してButton押下。
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2257421/6513a1bc-f94a-e771-7557-9341c0522252.png)

りんごのオブジェクトが取得できる。
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2257421/92118090-9cd3-bb30-882d-422ee02cf087.png)

**設定処理**
ページロード時、みかんのオブジェクトを設定。
```MainPage.xaml.cs
private void Page_Loaded(object sender, RoutedEventArgs e)
{
    TestComboBox.SelectedItem = fruits[1];
}
```

みかんが初期表示される。
![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2257421/82206267-79f5-fee2-88d6-1851beb0e7cb.png)

◎インデックスがほしいならSelectedIndex、オブジェクトそのものがほしいならSelectedItemという使い分け。

## SelectedValue
選択されている項目の任意の値を取得・設定する。

## SelectedValuePath
ItemsSourceで設定したオブジェクトのうち、SelectedValueで扱う値を設定する。

### 使用例
```MainPage.xaml
<ComboBox x:Name="TestComboBox" Margin="60,80,0,0" Width="120"
          ItemsSource="{x:Bind fruits, Mode=OneWay}"
          DisplayMemberPath="Name"
          SelectedValuePath="Price"
          />
```

**取得処理**
ぶどうを選択してButton押下。
![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2257421/e6b92e75-23fa-ab99-7dd5-014a3eec4c30.png)

ぶどうの値（Price）が取得できる。
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2257421/09fbf744-1bf0-dcf6-421a-c4f56e4d0e2b.png)

**設定処理**
ページロード時、みかんの値（Price）を設定。
```MainPage.xaml.cs
private void Page_Loaded(object sender, RoutedEventArgs e)
{
    TestComboBox.SelectedValue = 200;
}
```

みかんが初期表示される。
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2257421/dbe99804-616c-32d3-c99c-ac6ebe23e300.png)

◎SelectedValueとSelectedValuePathはセットで考える。SelectedValuePathはSelectedValueで扱う値を決める補助的な役割。

、、という認識でよいとは思うが、
**SelectedValuePathなしでも**、SelectedValueは問題なく使えて、その場合SelectedItemと同じ動きをするみたい。以下の通り。

SelectedValuePathの設定削除。
りんごを選択してButton押下。
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2257421/46dbd0b3-1fc9-2b2f-1bb6-46ba4fcd39cb.png)

りんごのオブジェクトが取得できる。（＝SelectedItemと同じ動き）
![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2257421/155cfb5c-d992-0bda-3a57-1ec1e1a232bb.png)


# 動作環境
Windows10 22H2 OSビルド 19045.2728
Visual Studio Community 2019
C# 7.3
.NET Framework 4.7.2