將鼠標懸停在wpf中的按鈕上時，如何顯示自定義文本框

Question

我想做這樣的事情：

基本上，我制作了電子郵件按鈕，我想制作一個帶有文本的自定義文本框，當鼠標進入“電子郵件”按鈕時，該文本框會慢慢淡入。 現在，我制作了這樣的自定義框：

<Style x:Key="AppearingTextbox" TargetType="{x:Type TextBox}">
  <Setter Property="Cursor" Value="Arrow"/>
  <Setter Property="Foreground" Value="#3E82C4"/>
  <Setter Property="Background" Value="#0F1C2B"/>
  <Setter Property="Opacity" Value="0.4"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type TextBox}">
        <Path Data="M0 0 30 0 50 -15 70 0 100 0 100 30 0 30z" Fill="#0F1C2B"/>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

而我在窗口中使用它是這樣的：

<TextBox Style="{DynamicResource AppearingTextbox}" Height="30" Width="100" FontSize="14">
  aaaaaaaaaa
</TextBox>

然而，我得到的只是裝滿這種灰色/黑色的盒子，當我嘗試寫入時，沒有任何反應。 我對這一切都有點新意，所以不確定我做錯了什么。
另外，如果將鼠標懸停在另一個按鈕上，它將如何顯示或消失？
我想的可能是在電子郵件按鈕上進行鼠標懸停效果，並以某種方式將其鏈接到TextBox不透明度......不知道該怎么辦呢...
任何幫助或見解將不勝感激。

<Style.Triggers>
  <DataTrigger Binding="{Binding ElementName=Ikona, Path=IsMouseOver}" Value="True">
    <DataTrigger.EnterActions>
      <BeginStoryboard >
        <Storyboard TargetProperty="Opacity" Duration="00:00:00.3" AutoReverse="False">
          <DoubleAnimation From="0" To="1" Duration="00:00:00.3"/>
        </Storyboard>
      </BeginStoryboard>
    </DataTrigger.EnterActions>
    <DataTrigger.ExitActions>
      <BeginStoryboard >
        <Storyboard TargetProperty="Opacity" Duration="00:00:00.3" AutoReverse="False">
          <DoubleAnimation From="1" To="0" Duration="00:00:00.3"/>
        </Storyboard>
      </BeginStoryboard>
    </DataTrigger.ExitActions>
  </DataTrigger>
</Style.Triggers>

通過在上面的代碼中最后一次關閉<Setter>標簽下面添加這個，我設法在懸停在按鈕上時獲得淡入和淡出動畫。

我的定制框中仍然沒有寫任何東西的問題。 我是否需要啟用或更改某些屬性才能使其正常工作？ 我有一種感覺，“填充”是這里的問題..但不知道該怎么做。

Answer 1

此代碼將執行您想要的操作：

<Grid>
    <Button Width="100" Height="50" VerticalAlignment="Top" x:Name="SomeButton"></Button>
    <TextBox Width="200" Height="200" Background="Red" Opacity="0" Text="Some TextBox">
        <TextBox.Style>
            <Style TargetType="{x:Type TextBox}">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding ElementName=SomeButton, Path=IsMouseOver}" Value="True">
                        <DataTrigger.EnterActions>
                            <BeginStoryboard >
                                <Storyboard TargetProperty="Opacity" Duration="00:00:01" AutoReverse="True">
                                    <DoubleAnimation From="0" To="1" Duration="00:00:01"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </DataTrigger.EnterActions>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </TextBox.Style>
    </TextBox>
</Grid>

TextBox的Style簡單地說是要觀察Button的IsMouseOver屬性，當它被設置為true以便在1s內淡入時。 當條件為false時，TextBox以1s淡出（AutoReverse =“True”）

Answer 2

只是用工具提示來描述我的意思的另一種選擇，你可以做這樣的事情。 只是在記事本中快速拼湊在一起，所以如果你決定走這條路，你可能想要調整它。

<Button Content="Blah" HorizontalAlignment="Center" VerticalAlignment="Center" ToolTip="Blah Blah Blah" ToolTipService.Placement="Center">
   <Button.Resources>
      <Style TargetType="{x:Type ToolTip}">
         <Setter Property="Template">
            <Setter.Value>
               <ControlTemplate TargetType="{x:Type ToolTip}">
                  <Grid Margin="0,60,0,0">
                     <Path Data="M0 0 30 0 50 -15 70 0 100 0 100 30 0 30z" Fill="#3E82C4" Stretch="Fill"/>
                     <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,8"/>
                  </Grid>
               </ControlTemplate>
            </Setter.Value>
         </Setter>
      </Style>
   </Button.Resources>
</Button>