Question

我想制作一个这样的按钮： enter image description here

第一张图片是普通按钮，但秒是触发了mouseEnter事件的按钮。第二个图像中按钮的底部不可点击，它就像一个工具提示。我怎样才能制作这种按钮？我需要使用工具提示吗？请给我一些代码示例。

修改

这是我修改的F 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>

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

Answer 1

我建议您在按钮上添加一个装饰器并使其在Mouse Enter事件中可见，然后只删除鼠标离开事件上的装饰器。如果您是Adorner's的新手，您可以在此处查看简要概述，并在此处查看一些自定义示例 -

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/

Answer 2

我喜欢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或甚至自定义控件。使用这样的动画总是让我觉得过度杀戮：）

Answer 3

这可以是适当的Expander样式。 Here是一个通常看起来像的图像，但是使用模板和样式可以大大改变控件的外观。这种行为看起来像一个扩展器，只是在悬停而不是点击时扩展。

Answer 4

我有一个小例子，我自己建立一次。在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>

这是什么控制？

4 个答案: