這是什麼控制？

我想打一個按鈕是這樣的： 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/