Пользовательский стиль управления / триггеры

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. Если бы вы удалили 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>

Возможно, вы захотите добавить еще немного в шаблон, например, прозрачную границу, чтобы ловить ввод мыши и, возможно, некоторые триггеры. То, как вы пытаетесь использовать Trigger для ToggleButton в вашем примере, неверно (коллекция Trigger 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>