Question

我有一个用户控件，具有以下（简化）布局：

<UserControl x:Name="FV">
 <DockPanel LastChildFill="False">
  <StackPanel DockPanel.Dock="Left">
    ... some content, let's say customer name ...
  </StackPanel>
  <MyButton DockPanel.Dock="Left"
    Visibility="{Binding Path=IsMouseOver, ElementName=FV, Converter={StaticResource boolToVisibilityConverter}}">
  </MyButton>
 </DockPanel>
</UserControl>

所以基本上它会显示一个文本，并在此文本右侧悬停一个编辑按钮。

现在我在树中将此控件用作ItemTemplate。

问题来自长名字。在这种情况下，树获得一个水平滚动，UserControl在逻辑上向右延伸，我的按钮不再可见。

text1 (edit)  |
text22 (edit) |
vverylongtext |

我希望在悬停时使用我的按钮重叠非常长的文字：

text1 (edit)  |
text22 (edit) |
vverylo(edit) |

我怎样才能做到这一点？我的UserControl不知道它的使用位置，因此不了解父元素的ActualWidth。

Answer 1

要将按钮放在文本上，您可以使用AdornerLayer，Z-Index，Tooltip或Popup。在我看来，最简单的解决方案。这是一个如何用弹出窗口完成的例子：

<StackPanel Margin="0 20 0 0" Name="StackPanel" Width="100">
    <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
        <ScrollViewer.Resources>
            <wpfApplication1:OrConverter x:Key="OrConverter" />
        </ScrollViewer.Resources>
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="longlonglonglongtextlonglonglonglongtextlonglonglonglongtext" />
            <Popup x:Name="Popup" StaysOpen="True"
                   PlacementTarget="{Binding ElementName=StackPanel}"
                   Placement="Right"
                   HorizontalOffset="-20"> <!--here you can bind to button's width instead of static value-->
                <Popup.IsOpen>
                    <MultiBinding Converter="{StaticResource OrConverter}">
                        <Binding ElementName="StackPanel" Path="IsMouseOver" Mode="OneWay" />
                        <Binding ElementName="Popup" Path="IsMouseOver" Mode="OneWay" />
                    </MultiBinding>
                </Popup.IsOpen>
                <Button Name="Button" Content="X" Height="16" Width="20" VerticalAlignment="Top" />
            </Popup>
        </StackPanel>
    </ScrollViewer>
</StackPanel>

OrConverter可以在this回答中找到。

它looks like this。

Answer 2

我完全按照你的要求做了。我使用UserControl和TextBlock创建了Button。如果TextBlock中的文字非常长，Button仍然不在视线范围内，MouseOver完全按照您的需要进入视线。但是，如果TextBlock中的文字仍然足够小，Button仍然可见。

注意：HorizontalAlignment = Left必须设置Button。

<强> Window3.xaml

<Window x:Class="WpfStackOverflow.Window3"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:uc="clr-namespace:WpfStackOverflow"
        Title="Window3" Height="300" Width="300" SizeToContent="WidthAndHeight">

    <StackPanel>
        <uc:UserControl1 Width="200" Height="35"/>
    </StackPanel>

</Window>

<强> UserControl.1.xaml

<UserControl x:Class="WpfStackOverflow.UserControl1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             xmlns:local="clr-namespace:WpfStackOverflow"
             Background="Bisque"
             Height="25">       

    <StackPanel x:Name="DckPnl" Height="25" Orientation="Horizontal">
        <TextBlock x:Name="Tb" MouseEnter="Tb_MouseEnter_1" MouseLeave="Tb_MouseLeave_1" FontFamily="Arial" Text="some content , let's say customer name some content, let's say customer name" Background="AliceBlue"/>
        <Button x:Name="Btn" Visibility="Hidden" Content="Edit" Width="35" Height="25" Margin="0 0 0 0" HorizontalAlignment="Left"/>
    </StackPanel>

</UserControl>

<强> UserControl1.xaml.cs

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;

namespace WpfStackOverflow
{
    /// <summary>
    /// Interaction logic for UserControl1.xaml
    /// </summary>
    public partial class UserControl1 : UserControl
    {
        public UserControl1()
        {
            InitializeComponent();
        }

        private void Tb_MouseEnter_1(object sender, MouseEventArgs e)
        {
            Thickness newMargin = new Thickness();

            FormattedText f = new FormattedText(Tb.Text,
                                                new System.Globalization.CultureInfo("en-US"),
                                                System.Windows.FlowDirection.LeftToRight,
                                                new Typeface("Arial"),
                                                Tb.FontSize, Brushes.Black);
            if (f.Width > this.ActualWidth)
                newMargin = new Thickness((this.ActualWidth - f.Width) - Btn.ActualWidth, 0, 0, 0);
            else
                newMargin = Btn.Margin;

            Btn.Margin = newMargin;
            Btn.Visibility = System.Windows.Visibility.Visible;
        }

        private void Tb_MouseLeave_1(object sender, MouseEventArgs e)
        {
            Btn.Margin = new Thickness(0, 0, 0, 0);
            Btn.Visibility = System.Windows.Visibility.Hidden;
        }
    }   
}

将WPF控件中的右按钮对齐到可见区域侧（忽略滚动）

2 个答案: