自定义控件样式/触发器

Question

我试图制作一个由几个按钮和几个标签组成的自定义控件，但这些按钮应该是不可见的，只显示其中的内容。我可以通过将它们设置为"透明"来去除边框、背景等。但每当我鼠标悬停在它们上面时，默认的窗口悬停效果就会再次显示整个按钮。我已经尝试了许多关于自定义控件的指南，但最终无法找到如何覆盖它。基本上，我的问题可以归结为，其中有多少可以放在generic.xaml文件中，我必须在该文件中使用什么组织，还有其他地方应该使用这些样式吗？我确实意识到这是一个非常基本的问题，但无法找出具体的答案让我抓狂。谢谢

当前xaml:

<Style TargetType="{x:Type local:TimePicker}">
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="BorderBrush" Value="Transparent" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:TimePicker}">
                <Border Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        Height="{TemplateBinding Height}"
                        Width="{TemplateBinding Width}">
                    <StackPanel Orientation="Horizontal">
                        <StackPanel x:Name="PART_Root"
                                    Orientation="Horizontal"
                                    HorizontalAlignment="Center">
                            <ToggleButton x:Name="PART_HourButton"
                                          HorizontalAlignment="Center"
                                          VerticalAlignment="Center"
                                          Margin="0"
                                          Background="Transparent"
                                          BorderBrush="Transparent"
                                          BorderThickness="0"
                                          Height="{Binding ElementName=PART_IncDecPanel, Path=ActualHeight}"
                                          Width="{Binding ElementName=PART_HourButton, Path=ActualHeight}"
                                          Content="{Binding RelativeSource={RelativeSource TemplatedParent},Path=Hour}">
                                                                    <ToggleButton.Triggers>
                                    <Trigger Property="IsMouseOver" Value="True">
                                        <Setter Property="Background" Value="Transparent" />
                                    </Trigger>
                                </ToggleButton.Triggers>
                            </ToggleButton>
                            <Label x:Name="PART_HourMinSeparator"
                                   HorizontalAlignment="Center"
                                   VerticalAlignment="Center"
                                   Margin="0"
                                   Content=":" />
                            <ToggleButton x:Name="PART_MinButton"
                                          HorizontalAlignment="Center"
                                          VerticalAlignment="Center"
                                          Margin="0"
                                          Background="Transparent"
                                          BorderBrush="Transparent"
                                          BorderThickness="0"
                                          Height="{Binding ElementName=PART_HourButton, Path=ActualHeight}"
                                          Width="{Binding ElementName=PART_HourButton, Path=ActualWidth}"
                                          Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Minute}" />
                            <StackPanel x:Name="PART_IncDecPanel" HorizontalAlignment="Center" VerticalAlignment="Center">
                                <Button x:Name="PART_IncreaseTime"
                                        Background="Transparent"
                                        BorderBrush="Transparent"
                                        BorderThickness="0"
                                        HorizontalAlignment="Center"
                                        HorizontalContentAlignment="Center"
                                        VerticalAlignment="Center"
                                        VerticalContentAlignment="Center"
                                        Margin="0"
                                        Padding="0"
                                        Width="22"
                                        Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IncreaseImage.ActualHeight}">
                                    <Image Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IncreaseImage}" />
                                </Button>
                                <Button x:Name="PART_DecreaseTime"
                                        Background="Transparent"
                                        BorderBrush="Transparent"
                                        BorderThickness="0"
                                        HorizontalContentAlignment="Center"
                                        HorizontalAlignment="Center"
                                        VerticalAlignment="Center"
                                        VerticalContentAlignment="Center"
                                        Margin="0"
                                        Padding="0"
                                        Height="{Binding ElementName=PART_IncreaseTime, Path=ActualHeight}"
                                        Width="{Binding ElementName=PART_IncreaseTime, Path=ActualWidth}">
                                    <Image Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=DecreaseImage}" />
                                </Button>
                            </StackPanel>
                        </StackPanel>
                    </StackPanel>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 1

WPF使用"无外观控件"，这基本上意味着您可以更改控件的整个视觉部分（在设计或运行时），而无需更改其代码或该代码的行为。您已经在使用此概念为TimePicker控件创建默认样式。如果要从该Style中删除ControlTemplate，则在运行时将看不到任何内容，因为控件本身只是C#或VB代码中定义的行为。

由于听起来您希望保留按钮的行为，但完全改变外观，因此这是重新模板化的理想场景。这里有一个非常简单的例子，它将只显示内容（在ContentPresenter中）：

<Button Content="Hello Template">
    <Button.Template>
        <ControlTemplate TargetType="{x:Type Button}">
            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        </ControlTemplate>
    </Button.Template>
</Button>

您可能会想在模板中添加更多内容，比如一个透明边框来捕捉鼠标输入，也许还有一些触发器。您在示例中尝试在ToggleButton上使用触发器的方式是不正确的（FrameworkElement触发器集合仅适用于EventTriggers），但在ControlTemplate或Style中，该模式将起作用。

如果您想将相同的样式应用于TimePicker ControlTemplate中的每个按钮，您可以将默认的按钮样式添加到ControlTemplate的资源集合：

<ControlTemplate TargetType="{x:Type MyControl}">
    <ControlTemplate.Resources>
        <Style TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ControlTemplate.Resources>
    ...
</ControlTemplate>