Search code examples
c#wpfxamldata-bindingtextbox

How to force WPF textboxes contents to be displayed above other controls similar to excel cells


I have an ItemsControl that contains a textbox for each binding item and I want to allow overlaying text box content if its content is wider than the textbox width similar to excel cells overlaying behavior. Is there a way to do this?

1

<ItemsControl ItemsSource="{Binding Path=MyCollection}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal" Width="100"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <TextBox Text="{Binding}" TextWrapping="WrapWithOverflow"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Solution

  • I managed to produce the excel cells overlay behavior by using a Grid with dynamic column count using this helper dependency properties https://rachel53461.wordpress.com/2011/09/17/wpf-grids-rowcolumn-count-properties/ as a container template of ItemsControl and binding the column index of each textbox to the ordered item index and binding Grid.ZIndex to the reversed index to be displayed above the adjacent text boxes.

    <ItemsControl ItemsSource="{Binding MyCollection}">
      <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Grid HorizontalAlignment="Left" helpers:GridHelpers.ColumnCount="{Binding MyCollection.Count}"/>
        </ItemsPanelTemplate>
      </ItemsControl.ItemsPanel>
      <ItemsControl.ItemContainerStyle>
        <Style>
            <Setter Property="Grid.Column" Value="{Binding ItemIndex}"/>
            <Setter Property="Grid.ZIndex" Value="{Binding ReversedIndex}" />
            <Setter Property="Grid.ColumnSpan" Value="{Binding MaxMergedCells}" />
        </Style>
      </ItemsControl.ItemContainerStyle>
      <ItemsControl.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                <TextBox MinWidth="30" Text="{Binding }"/>
            </StackPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>