如何强制 WPF 文本框内容显示在类似于 excel 单元格的其他控件上方

Question

我有一个 ItemsControl，其中包含每个绑定项的文本框，如果其内容比文本框宽度宽，类似于 excel 单元格覆盖行为，我希望允许覆盖文本框内容。 有没有办法做到这一点？

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

Answer 1

您可以为此使用工具提示。 您只需要将源与自身绑定即可。

<ListView ItemsSource="{Binding Path=MyStringCollection}">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal" Width="100"/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <ListView.ItemTemplate>
        <DataTemplate>
            <TextBox Text="{Binding}" TextWrapping="WrapWithOverflow" ToolTip="{Binding RelativeSource={RelativeSource Self}, Path=Text}"/>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

了解更多信息：

绘图工具提示事件

设置工具提示大小

Answer 2

要复制类似的行为，您可以使用Popup 。

要实现类似的行为，您首先必须禁用TextBox的内容包装。
然后将当前的TextBox替换为TextBlock ，用于显示文本。
Popup实际上包含可编辑的TextBox ，然后将在确切位置覆盖此TextBlock ，从而隐藏TextBlock以使其看起来拉伸和覆盖相邻项目。
一旦焦点移到ListBoxItem之外， MultiTrigger就会关闭 Popup。

为了提高性能，您应该使用VirtualizingStackPanel作为项目主机。

<ListView ItemsSource="{Binding MyStringCollection}"
          HorizontalAlignment="Left"
          Width="800">
  <ListView.ItemsPanel>
    <ItemsPanelTemplate>
      <VirtualizingStackPanel Orientation="Horizontal" />
    </ItemsPanelTemplate>
  </ListView.ItemsPanel>

  <ListView.ItemTemplate>
    <DataTemplate>
      <Grid>
        <Border BorderThickness="1"
                BorderBrush="Gray">
          <TextBlock Text="{Binding}" />
        </Border>
        <Popup x:Name="EditableTextSiteHost"
               PlacementTarget="{Binding ElementName=TextSite}"
               Placement="Relative"
               Height="{Binding ElementName=TextSite, Path=ActualHeight}"
               AllowsTransparency="True"
               FocusManager.FocusedElement="{Binding ElementName=EditableTextSite}">
          <TextBox x:Name="EditableTextSite"
                   Text="{Binding TextData}" />
        </Popup>
      </Grid>

      <DataTemplate.Triggers>
        <MultiDataTrigger>
          <MultiDataTrigger.Conditions>
            <Condition Binding="{Binding RelativeSource={RelativeSource AncestorType=ListBoxItem}, Path=IsSelected}"
                       Value="True" />
            <Condition Binding="{Binding RelativeSource={RelativeSource AncestorType=ListBoxItem}, Path=IsKeyboardFocusWithin}"
                       Value="True" />
          </MultiDataTrigger.Conditions>
          <Setter TargetName="EditableTextSiteHost"
                  Property="IsOpen"
                  Value="True" />
        </MultiDataTrigger>
      </DataTemplate.Triggers>
    </DataTemplate>
  </ListView.ItemTemplate>

  <ListView.ItemContainerStyle>
    <Style TargetType="ListBoxItem">

      <!-- Make items overlap -->
      <Setter Property="Margin"
              Value="-2,0,0,0" />
      <Setter Property="Padding"
              Value="0" />
      <Setter Property="Width"
              Value="50" />

      <Style.Triggers>

        <!-- Apply zero Margin on the first item -->
        <DataTrigger Binding="{Binding RelativeSource={RelativeSource PreviousData}}"
                     Value="{x:Null}">
          <Setter Property="Margin"
                  Value="0,0,0,0" />
        </DataTrigger>
      </Style.Triggers>
    </Style>
  </ListView.ItemContainerStyle>
</ListView>

去做

这只是一个原始示例，一个概念证明。 您将不得不改善行为。 例如，您可能希望在用户滚动或移动Window时关闭Popup 。 否则，由于Popup本身是一个Window ，因此Popup不会移动以跟随放置目标。 您可以将相关逻辑移至附加行为。
您可能还想改进选择行为。 目前，选择突出显示边框不会（实际上）延伸到围绕弹出窗口。 您必须通过在将复制ListBoxItem突出显示边框的TextBox上应用 Border 来模仿这一点。

Answer 3

我设法通过使用具有动态列数的网格使用此帮助程序依赖属性https://rachel53461.wordpress.com/2011/09/17/wpf-grids-rowcolumn-count-properties/作为ItemsControl 的容器模板，并将每个文本框的列索引绑定到有序项索引，并将 Grid.ZIndex 绑定到要显示在相邻文本框上方的反向索引。

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