クイックスタート

This quick start will guide you through the steps of adding C1MultiSelect to a project and binding the control to a data source.

Complete the steps given below to see how the MultiSelect control appears after data binding.

Adding MultiSelect control to the Application
Binding MultiSelect to a list

The following image shows how the MultiSelect control appears after data binding.

Step 1: Adding MultiSelect control to the Application

Create a new Blank App in Visual Studio.
Drag and Drop the C1MultiSelect control from the toolbox onto the form. The following references automatically get added to the References.
- C1.UWP.Input.dll
- C1.UWP.4.dll

Open MainPage.xaml and replace the existing XAML with the following code.

C#	コードのコピー
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWP_MultiSelectQS" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:Input="using:C1.Xaml.Input" x:Class="UWP_MultiSelectQS.MainPage" mc:Ignorable="d"> <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <Input:C1MultiSelect x:Name="mselect" HorizontalAlignment="Left" Height="50" VerticalAlignment="Top" Margin="10,100,0,0" /> </Grid> </Page>

コードのコピー

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UWP_MultiSelectQS"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Input="using:C1.Xaml.Input"
    x:Class="UWP_MultiSelectQS.MainPage"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Input:C1MultiSelect x:Name="mselect" HorizontalAlignment="Left" Height="50"
               VerticalAlignment="Top" Margin="10,100,0,0" />
    </Grid>
</Page>

Step 2: Binding MultiSelect to a list

Open MainPage.xaml.cs and add following code to the MainPage class constructor.

C#	コードのコピー
IList<string> addressBook = new List<string>() { "John Doe <john.doe@hotmail.com>", "Nancy Simmons <nsimmons@gmail.com>", "Henry Crews <crewsrulez@ezmail.com>", "Patrick Smith <psmith1988@mail.ru>", "Carl Collins <cc1964@facebook.com>", "Melody Pond <riversong@ezmail.com>", "Rory Williams <rorywilliams1@yandex.ru>", "Tracy Hobs <hobhob@protonmail.com>", "Sam Powell <sam.powell@ezmail.com>", "Charlotte Marsh <c.marsh1998@yandex.ru>", "Amy Berry <amyberry@mail.ru>", "Dante Adams <d.adams@hotmail.com>", "Derrick Skinner <skinner487@protonmail.com>", "Christina Fallon <christina.wonder@hotmail.com>", "Adam Johnson <johnson.adam@yahoo.com>" }; mselect.ItemsSource = addressBook;

コードのコピー

IList<string> addressBook = new List<string>()
{
       "John Doe <john.doe@hotmail.com>",
       "Nancy Simmons <nsimmons@gmail.com>",
       "Henry Crews <crewsrulez@ezmail.com>",
       "Patrick Smith <psmith1988@mail.ru>",
       "Carl Collins <cc1964@facebook.com>",
       "Melody Pond <riversong@ezmail.com>",
       "Rory Williams <rorywilliams1@yandex.ru>",
       "Tracy Hobs <hobhob@protonmail.com>",
       "Sam Powell <sam.powell@ezmail.com>",
       "Charlotte Marsh <c.marsh1998@yandex.ru>",
       "Amy Berry <amyberry@mail.ru>",
       "Dante Adams <d.adams@hotmail.com>",
       "Derrick Skinner <skinner487@protonmail.com>",
       "Christina Fallon <christina.wonder@hotmail.com>",
       "Adam Johnson <johnson.adam@yahoo.com>"
};

mselect.ItemsSource = addressBook;

Build and run the application.