XAML クイックリファレンス

開発を開始するには、ルート要素タグに ComponentOne 名前空間宣言を追加します。

XAML	コードのコピー
xmlns:FlexGrid="using:C1.Xaml.FlexGrid"

コントロールを Visual Studio ツールボックスに配置し、それをダブルクリックするかタップすることで、コントロールと名前空間の両方を追加することもできます。

FlexGrid for UWPは、次の図のようになります。

この図は、「クイックスタート」トピックからの抜粋です。

C1FlexGrid コントロールでは、２つの方法で列を作成することができます。つまり、コントロールに自動的に列を生成させるか、列を独自に作成します。１つのプロパティ（AutoGenerateColumns）を使用して、このオプションを制御します。

AutoGenerateColumns="True"

XAML に列を独自に生成する必要がない場合、または XAML に列を独自に生成しない場合は、AutoGenerateColumns プロパティを True に設定します。これで、C1FlexGrid コントロールによってグリッドに列が作成されます。次の例は、「クイックスタート」で行う設定と同様です。

XAML	コードのコピー
<Page xmlns:FlexGrid="using:C1.Xaml.FlexGrid" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:FlexGridQSTest" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:Xaml="using:C1.Xaml" x:Class="FlexGridQSTest.MainPage" mc:Ignorable="d"> <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition/> </Grid.RowDefinitions> <FlexGrid:C1FlexGrid x:Name="flexgrid1" AutoGenerateColumns="True" AllowResizing="Both" AllowDragging="Columns" AllowDrop="True" ColumnHeaderForeground="White" /> </Grid> </Page>

XAML

コードのコピー

<Page xmlns:FlexGrid="using:C1.Xaml.FlexGrid"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FlexGridQSTest"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Xaml="using:C1.Xaml"
    x:Class="FlexGridQSTest.MainPage"
    mc:Ignorable="d">
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition/>
    </Grid.RowDefinitions>
   <FlexGrid:C1FlexGrid x:Name="flexgrid1" AutoGenerateColumns="True" AllowResizing="Both" AllowDragging="Columns" AllowDrop="True" ColumnHeaderForeground="White"  />
    </Grid>
</Page>

AutoGenerateColumns="False"

独自の列を定義する場合は、AutoGenerateColumns プロパティを False に設定します。マークアップは次の例のようになります。この例では、Columnsを連結しています。

XAML	コードのコピー
<Page xmlns:FlexGrid="using:C1.Xaml.FlexGrid" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:FlexGridGroupTest" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:Xaml="using:C1.Xaml" x:Class="FlexGridGroupTest.MainPage" mc:Ignorable="d"> <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition/> </Grid.RowDefinitions> <FlexGrid:C1FlexGrid x:Name="c1FlexGrid1" AutoGenerateColumns="False" ShowOutlineBar="True" BorderThickness="1" > <FlexGrid:C1FlexGrid.Columns> <FlexGrid:Column Binding="{Binding ID}" Format="g0"/> <FlexGrid:Column Binding="{Binding Name}" /> <FlexGrid:Column Binding="{Binding Country}" /> <FlexGrid:Column Binding="{Binding First}" /> <FlexGrid:Column Binding="{Binding Last}" /> <FlexGrid:Column Binding="{Binding Active}"/> <FlexGrid:Column Binding="{Binding Weight}" Format="n2"/> <FlexGrid:Column Binding="{Binding Hired}" Format="d"/> <FlexGrid:Column Binding="{Binding Father}" /> <FlexGrid:Column Binding="{Binding Brother}" /> </FlexGrid:C1FlexGrid.Columns> </FlexGrid:C1FlexGrid> </Grid> </Page>

XAML

コードのコピー

<Page xmlns:FlexGrid="using:C1.Xaml.FlexGrid"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FlexGridGroupTest"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Xaml="using:C1.Xaml"
    x:Class="FlexGridGroupTest.MainPage"
    mc:Ignorable="d">
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        
        <FlexGrid:C1FlexGrid x:Name="c1FlexGrid1" AutoGenerateColumns="False" ShowOutlineBar="True" BorderThickness="1" >
            <FlexGrid:C1FlexGrid.Columns>
                <FlexGrid:Column Binding="{Binding ID}" Format="g0"/>
                <FlexGrid:Column Binding="{Binding Name}" />
                <FlexGrid:Column Binding="{Binding Country}" />
                <FlexGrid:Column Binding="{Binding First}" />
                <FlexGrid:Column Binding="{Binding Last}" />
                <FlexGrid:Column Binding="{Binding Active}"/>
                <FlexGrid:Column Binding="{Binding Weight}" Format="n2"/>
                <FlexGrid:Column Binding="{Binding Hired}" Format="d"/>
                <FlexGrid:Column Binding="{Binding Father}" />
                <FlexGrid:Column Binding="{Binding Brother}" />
            </FlexGrid:C1FlexGrid.Columns>
        </FlexGrid:C1FlexGrid>
    </Grid>
</Page>