FlexSheet for WPF | ComponentOne
Customizing Appearance / Customizing Cells / Cell Formatting / Setting Cell Alignment and Indentation
In This Topic
    Setting Cell Alignment and Indentation
    In This Topic

    FlexSheet for WPF allows you to align and indent cells to enhance the appearance of the presented data. Cell alignment can be easily applied using SetCellFormat method and indentation can be applied using SetCellIndent method in C1FlexSheet.

    You can change the alignment of data both horizontally and vertically, and apply indentation to the cell contents. Follow the given steps to apply alignment and indentation in cells:

    1. Add a C1FlexSheet control to the MainWindow.xaml.
    2. Add the following code in XAML to insert the buttons which will perform cell alignment and indentation:

      XAML
      Copy Code
      <Button Content="Left Align" Name="_btnLeft" Click="_btnLeft_Click" HorizontalAlignment="Left" VerticalAlignment="Top" Width="60"/>
      <Button Content="Center Align" Name="_btnCenter" Click="_btnCenter_Click" HorizontalAlignment="Left" VerticalAlignment="Top" Width="85" Margin="78,0,0,0"/>
      <Button Content="Right Align" Name="_btnRight" Click="_btnRight_Click" HorizontalAlignment="Left" VerticalAlignment="Top" Width="70" Margin="185,0,0,0"/>
      <Button Content="Top Align" Name="_btnTop" Click="_btnTop_Click" HorizontalAlignment="Left" VerticalAlignment="Top" Width="65" Margin="22,25,0,0"/>
      <Button Content="Middle Align" Name="_btnMiddle" Click="_btnMiddle_Click" HorizontalAlignment="Left" VerticalAlignment="Top" Width="80" Margin="107,25,0,0"/>
      <Button Content="Bottom Align" Name="_btnBottom" Click="_btnBottom_Click" HorizontalAlignment="Left" VerticalAlignment="Top" Width="80" Margin="212,25,0,0"/>
      <Button Content="Decrease Indent" Name="_btnDecreaseIndent" Click="_btnDecreaseIndent_Click" HorizontalAlignment="Right" VerticalAlignment="Top" Width="100" Margin="0,25,10,0"/>
      <Button Content="Increase Indent" Name="_btnIncreaseIndent" Click="_btnIncreaseIndent_Click" HorizontalAlignment="Right" VerticalAlignment="Top" Width="100" Margin="0,0,10,0"/>
      

    3. Right-click Design view and select View Code from the context menu.
    4. Insert the following code directly below the InitializeComponent() method to add a sheet in FlexSheet control and data in the sheet:
      flex.AddSheet("Sheet 1", 12, 6)
      Dim sheet = flex.Sheets("Sheet 1")
      sheet.Grid.Columns(1).DataType = GetType(Decimal)
      
      sheet.Grid(0, 0) = "Blue"
      sheet.Grid(1, 0) = "Black"
      sheet.Grid(2, 0) = "Silver"
      sheet.Grid(3, 0) = "apple"
      sheet.Grid(4, 0) = "Green"
      sheet.Grid(5, 0) = "Purple"
      sheet.Grid(6, 0) = "Black"
      sheet.Grid(7, 0) = "Silver"
      sheet.Grid(8, 0) = "Black"
      sheet.Grid(9, 0) = "Silver"
      
      sheet.Grid(0, 1) = 15
      sheet.Grid(1, 1) = 2
      sheet.Grid(2, 1) = 9.1
      sheet.Grid(3, 1) = 2
      sheet.Grid(4, 1) = 29.89
      sheet.Grid(5, 1) = 93.6
      sheet.Grid(6, 1) = 0.1
      sheet.Grid(7, 1) = 2
      
      flex.AddSheet("Sheet 1", 12, 6);
      var sheet = flex.Sheets["Sheet 1"];
      sheet.Grid.Columns[1].DataType = typeof(decimal);
      
      sheet.Grid[0, 0] = "Blue";
      sheet.Grid[1, 0] = "Black";
      sheet.Grid[2, 0] = "Silver";
      sheet.Grid[3, 0] = "apple";
      sheet.Grid[4, 0] = "Green";
      sheet.Grid[5, 0] = "Purple";
      sheet.Grid[6, 0] = "Black";
      sheet.Grid[7, 0] = "Silver";
      sheet.Grid[8, 0] = "Black";
      sheet.Grid[9, 0] = "Silver";
      
      sheet.Grid[0, 1] = 15;
      sheet.Grid[1, 1] = 2;
      sheet.Grid[2, 1] = 9.1;
      sheet.Grid[3, 1] = 2;
      sheet.Grid[4, 1] = 29.89;
      sheet.Grid[5, 1] = 93.6;
      sheet.Grid[6, 1] = 0.1;
      sheet.Grid[7, 1] = 2;
      sheet.Grid[8, 1] = 10;
      

    After adding data to a sheet in C1FlexSheet control, you can choose how to display the data in cells using different types of indentation and alignment.

    Horizontal Alignment

    You can change the horizontal alignment of the data in cell by applying left, centre or right alignment to it. Just select the cell(s) to align the data and you are good to go.

    To align the data on the left, use the following code:

    flex.SetCellFormat(flex.Selection.Cells, CellFormat.HorizontalAlignment,
                       HorizontalAlignment.Left)
    
    flex.SetCellFormat(flex.Selection.Cells, CellFormat.HorizontalAlignment,
                       HorizontalAlignment.Left);
    

    Similarly, you can align the cell data on the right or at the center by changing the value of enum HorizontalAlignment from Left to Right or Center.

    Vertical Alignment

    You can change the vertical alignment of the data in cell by applying top, middle or right alignment to it. Just select the cell(s) to align the data vertically.

    To align the data at the top, use the following code:

    flex.SetCellFormat(flex.Selection.Cells, CellFormat.VerticalAlignment,
                       VerticalAlignment.Top)
    
    flex.SetCellFormat(flex.Selection.Cells, CellFormat.VerticalAlignment, 
                       VerticalAlignment.Top);
    

    Similarly, you can align the data in the middle or at the bottom of the cell by changing the value of enum VerticalAlignment from Top to Middle or Bottom.

    Indentation

    You can change the indentation of a cell by increasing or decreasing the indent of the selected cell(s). To increase the cell indention, use the following code:

    _currentIndent += 12
    flex.SetCellIndent(flex.Selection.Cells, _currentIndent)
    
    _currentIndent += 12;
    flex.SetCellIndent(flex.Selection.Cells, _currentIndent);
    

    To decrease the cell indention, use the following code:

    _currentIndent -= 12
    If _currentIndent >= 0 Then
        flex.SetCellIndent(flex.Selection.Cells, _currentIndent)
    Else
        _currentIndent = 0
    End If
    
    _currentIndent -= 12;
    if (_currentIndent >= 0)
        flex.SetCellIndent(flex.Selection.Cells, _currentIndent);
    else
        _currentIndent = 0;