XAML Quick Reference | ComponentOne FlexGrid for UWP

XAML Quick Reference

In This Topic

To get started developing, add a ComponentOne namespace declaration in the root element tag:

XAML	Copy Code
xmlns:FlexGrid="using:C1.Xaml.FlexGrid"

You can also add both the control and the namespace by locating the control in your Visual Studio ToolBox and double-clicking or tapping.

FlexGrid for UWP will resemble the following image:

The preceding image is taken from the Quick Start topic.

There are two ways to create Columns in a C1FlexGrid control: allowing the control to automatically generate the columns, or creating the columns yourself. One property controls this option: AutoGenerateColumns.

AutoGenerateColumns="True"

If you don't need or want to generate the columns yourself in XAML, you can set the AutoGenerateColumns property to True to allow the C1FlexGrid control to create the columns for your grid. The sample below is similar to what you will do in the Quick Start:

XAML	Copy Code
<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

Copy Code

<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"

If you want to define your own columns, you can set the AutoGenerateColumns property to False. Your markup will resemble the following sample. In this sample, the Columns are bound:

XAML	Copy Code
<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

Copy Code

<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>