这是什么控制？

我想打一个按钮是这样的： enter image description here 这是什么控制？

的第一个图像是一个普通按钮，但第二个是MouseEnter事件的按钮发射。第二个图像中按钮的底部不可点击，它像一个工具提示。我该如何制作这种按钮？我需要使用工具提示吗？请给我一些代码示例。

编辑：

这里的歼Ruffel的代码，我修改：

<HeaderedContentControl BorderBrush="Black"> 
       <HeaderedContentControl.Header> 
        <TextBlock Text="Header Placeholder" Margin="5" /> 
       </HeaderedContentControl.Header> 
       <StackPanel> 
        <TextBlock Text="Content Placeholder Line 1" Margin="5" HorizontalAlignment="Center"/> 
        <TextBlock Text="Content Placeholder Line 2" Margin="5" HorizontalAlignment="Center"/> 
        <TextBlock Text="Content Placeholder Line 3" Margin="5" HorizontalAlignment="Center"/> 
       </StackPanel> 

       <HeaderedContentControl.Style> 
        <Style TargetType="{x:Type HeaderedContentControl}"> 
         <Setter Property="Template"> 
          <Setter.Value> 
           <ControlTemplate TargetType="{x:Type HeaderedContentControl}"> 
            <Grid> 
             <Grid.ColumnDefinitions> 
              <ColumnDefinition Width="Auto"/> 
              <ColumnDefinition /> 
             </Grid.ColumnDefinitions> 
             <Grid.RowDefinitions> 
              <RowDefinition /> 
              <RowDefinition /> 
             </Grid.RowDefinitions> 
             <Border x:Name="headerBorder" Grid.Row="0" Grid.Column="0" BorderThickness="1" BorderBrush="{TemplateBinding BorderBrush}"> 
              <Grid Name="Header"> 
               <Rectangle Fill="White"/> 
               <ContentPresenter x:Name="contentPresenter" Content="{TemplateBinding Header}"/> 
              </Grid> 
             </Border> 
             <Border x:Name="contentBorder" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" BorderThickness="1" BorderBrush="{TemplateBinding BorderBrush}" Visibility="Collapsed"> 
              <ContentPresenter /> 
             </Border> 
             <Border x:Name="cutOutBorder" Grid.Row="0" Grid.Column="1" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,0,0,1" Visibility="Collapsed" /> 
            </Grid> 
            <ControlTemplate.Triggers> 
             <Trigger SourceName="Header" Property="IsMouseOver" Value="True"> 
              <Setter TargetName="headerBorder" Property="BorderThickness" Value="1,1,1,0" /> 
              <Setter TargetName="contentBorder" Property="BorderThickness" Value="1,0,1,1" /> 
              <Setter TargetName="contentBorder" Property="Visibility" Value="Visible" /> 
              <Setter TargetName="cutOutBorder" Property="Visibility" Value="Visible" /> 
             </Trigger>          
            </ControlTemplate.Triggers> 
           </ControlTemplate> 
          </Setter.Value> 
         </Setter> 
        </Style> 
       </HeaderedContentControl.Style> 

      </HeaderedContentControl> 
    </StackPanel>

现在最后一个问题是：延展部分推所有的控制下来，这是我不想要什么。请修改此代码以使其下方的扩展部分覆盖控件，就像在图像中一样。

来源

2011-10-09 Cobold

你想让你的按钮就像你的鼠标进入时那样吗？所有的表面应该是可点击的？ – MaRuf

没有按钮的底部应该像一个工具提示，这意味着当鼠标离开按钮的上半部分底部消失。 – Cobold

我不明白，tooltip它不够？你最终可以使用一个简单的面板，当你的鼠标进入按钮时如何显示 – MaRuf

我喜欢WPF的是，有一百零一的方式做同样的事。除了上述建议，你可以很容易的风格HeaderedContentControl得到所需的外观和行为：

<Window x:Class="WpfApplication1.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="MainWindow" Height="350" Width="525"> 
    <StackPanel> 
     <HeaderedContentControl BorderBrush="Black"> 
      <HeaderedContentControl.Header> 
       <TextBlock Text="Header Placeholder" Margin="5" /> 
      </HeaderedContentControl.Header> 
      <StackPanel> 
       <TextBlock Text="Content Placeholder Line 1" Margin="5" HorizontalAlignment="Center"/> 
       <TextBlock Text="Content Placeholder Line 2" Margin="5" HorizontalAlignment="Center"/> 
       <TextBlock Text="Content Placeholder Line 3" Margin="5" HorizontalAlignment="Center"/> 
      </StackPanel> 
      <HeaderedContentControl.Style> 
       <Style TargetType="{x:Type HeaderedContentControl}"> 
        <Setter Property="Template"> 
         <Setter.Value> 
          <ControlTemplate TargetType="{x:Type HeaderedContentControl}"> 
           <Grid x:Name="outerGrid" Background="Transparent"> 
            <Grid> 
             <Grid.ColumnDefinitions> 
              <ColumnDefinition Width="Auto"/> 
              <ColumnDefinition /> 
             </Grid.ColumnDefinitions> 
             <Grid.RowDefinitions> 
              <RowDefinition /> 
              <RowDefinition /> 
             </Grid.RowDefinitions> 
             <Border x:Name="headerBorder" Grid.Row="0" Grid.Column="0" BorderThickness="1" BorderBrush="{TemplateBinding BorderBrush}"> 
              <ContentPresenter x:Name="contentPresenter" Content="{TemplateBinding Header}"/> 
             </Border> 
             <Border x:Name="contentBorder" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" BorderThickness="1" BorderBrush="{TemplateBinding BorderBrush}" Visibility="Collapsed"> 
              <ContentPresenter /> 
             </Border> 
             <Border x:Name="cutOutBorder" Grid.Row="0" Grid.Column="1" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,0,0,1" Visibility="Collapsed" Background="Transparent" /> 
            </Grid> 
           </Grid> 
           <ControlTemplate.Triggers> 
            <EventTrigger RoutedEvent="UIElement.MouseLeftButtonUp" SourceName="contentPresenter"> 
             <BeginStoryboard x:Name="makeVisibleBeginStoryboard"> 
              <Storyboard> 
               <ObjectAnimationUsingKeyFrames Storyboard.TargetName="headerBorder" Storyboard.TargetProperty="BorderThickness"> 
                <DiscreteObjectKeyFrame KeyTime="0"> 
                 <DiscreteObjectKeyFrame.Value> 
                  <Thickness Left="1" Top="1" Right="1" Bottom="0" /> 
                 </DiscreteObjectKeyFrame.Value> 
                </DiscreteObjectKeyFrame> 
               </ObjectAnimationUsingKeyFrames> 
               <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentBorder" Storyboard.TargetProperty="BorderThickness"> 
                <DiscreteObjectKeyFrame KeyTime="0"> 
                 <DiscreteObjectKeyFrame.Value> 
                  <Thickness Left="1" Top="0" Right="1" Bottom="1" /> 
                 </DiscreteObjectKeyFrame.Value> 
                </DiscreteObjectKeyFrame> 
               </ObjectAnimationUsingKeyFrames> 
               <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentBorder" Storyboard.TargetProperty="Visibility"> 
                <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" /> 
               </ObjectAnimationUsingKeyFrames> 
               <ObjectAnimationUsingKeyFrames Storyboard.TargetName="cutOutBorder" Storyboard.TargetProperty="Visibility"> 
                <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" /> 
               </ObjectAnimationUsingKeyFrames> 
              </Storyboard> 
             </BeginStoryboard> 
            </EventTrigger> 
            <EventTrigger RoutedEvent="UIElement.MouseLeave" SourceName="outerGrid"> 
             <StopStoryboard BeginStoryboardName="makeVisibleBeginStoryboard" /> 
            </EventTrigger> 
            <EventTrigger RoutedEvent="UIElement.MouseEnter" SourceName="cutOutBorder"> 
             <StopStoryboard BeginStoryboardName="makeVisibleBeginStoryboard" /> 
            </EventTrigger> 
           </ControlTemplate.Triggers> 
          </ControlTemplate> 
         </Setter.Value> 
        </Setter> 
       </Style> 
      </HeaderedContentControl.Style> 
     </HeaderedContentControl> 
    </StackPanel> 
</Window>

该解决方案模拟切去部分（这仅仅是一个细胞在Grid）。它使用EventTrigger，以便在点击Header时可以看到内容，并且当鼠标离开承载内容的Grid或者它进入切出部分时，内容变得不可见。

虽然我认为这达到了你所追求的目标，但我会建议您研究其他方法，例如ToolTip,Adorner或甚至自定义控件。使用这样的动画总是感觉像是对我太过杀戮:)

来源

2011-10-09 17:36:39

我喜欢你的答案，但是看起来mouseOver事件只有当鼠标移过文本“Header Placeholder”时才会触发，如果你能解决这个问题，我会接受你的回答。 – Cobold

我不是确定你在找什么，如果你想让扩展部分在点击标题部分后保持打开状态，那么我建议将ContentPresenter改为ToggleButton，然后让Trigger检查IsChecked属性。 –

我的意思是MouseOver事件仅在鼠标位于标题文本上时才触发，但我希望它在触发按钮的非扩展部分的任何部分时触发。 – Cobold

-2

我有一个小例子，我建立了自己一次。在CSS集#loginBox到display:none。然后被点击时a.loginButton，让的JavaScript（例如jQuery的）变化显示器display:block

<div id="head-login"> 
      <a href="#" id="loginButton"><span>Klanten login</span></a> 
       <div class="clear"></div> 
       <div id="loginBox">     
        <form id="loginForm" action="http://www.dennishunink.nl/dqr/app/login-check.php" method="post"> 
         <fieldset id="body"> 
          <fieldset> 
           <label for="email">Email Adres</label> 
           <input type="text" name="email" id="email" /> 
          </fieldset> 
          <fieldset> 
           <label for="password">Wachtwoord</label> 
           <input type="password" name="password" id="password" /> 
          </fieldset> 
          <input type="submit" id="login" value="Log in" /> 
          <label for="checkbox"><input type="checkbox" id="checkbox" />Onthoudt mij</label> 
         </fieldset> 
         <span><a href="#">Wachtwoord vergeten?</a></span> 
        </form> 
       </div> 
     </div> 



    </div>

来源

2011-10-09 15:59:50

如何将这与WPF应用程序一起使用？ – Cobold

不错的。猜猜我完全忽略了wpf部分;这是非常简单的PHP/CSS。但就我对wpf的了解而言，你不能一对一地使用它。但它可能会给你一个关于你应该寻找答案的方法。只需添加另一部分，使其无敌，直到按钮被点击。抱歉不能帮你：（ –

这可能是适当的风格Expander。 Here是一张图像，它通常看起来像样，但是通过模板和样式，您可以彻底改变控件的外观。不过，这种行为看起来像一个扩展器，只是在悬停而不是点击时展开。

来源

2011-10-09 16:27:33 Joey

我已经更新了这个问题，当按钮mouseEnter事件触发时，我需要按钮看起来像第二个图像 – Cobold

当鼠标进入时，只需展开扩展器即可*微调你知道吗 – Joey

我建议你添加一个装饰物到你的按钮，并使其在鼠标输入事件中可见，并在鼠标离开事件中删除装饰者。如果你是新来的Adorner的，你可以看一下简要概述这里和一些自定义的样品这里 -

http://msdn.microsoft.com/en-us/library/ms743737.aspx

http://denisvuyka.wordpress.com/2007/10/15/wpf-simple-adorner-usage-with-drag-and-resize-operations/