wpf - 这是什么控件？

Question

我想做一个这样的按钮:

第一个图像是一个普通按钮，但第二个是触发了 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

我喜欢 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，甚至是自定义控件。使用这样的动画对我来说总是感觉太过分了:)