自定义控件样式/触发器第二部分 - 覆盖 Aero答案

【问题标题】：Custom Control Styling/Triggers Part II - Overriding Aero自定义控件样式/触发器第二部分 - 覆盖 Aero
【发布时间】：2012-03-12 15:47:27
【问题描述】：

这是对Overriding button background in WPF on Aero 和次要学位Custom Control Styling/Triggers 的跟进。

在尝试保留 ToggleButton 的功能但摆脱按钮样式时，我遵循了上面第一个链接的过程。它基本上可以工作，尽管将RenderMouseOver 和RenderPressed 更改为false 进行了微小的修改（否则它会感应到鼠标在窗口中的任何位置，而不仅仅是在ToggleButton 上时。

所以现在我的问题是，使用下面的标记，IsMouseOver 触发器根本不会改变背景。查看 XAML 有什么想法吗？

在旁注中，我试图使用BitmapEffect 使字母在切换时发光，但无论我使用什么设置，它似乎都没有效果。有人知道专门处理这个问题的指南吗？

<Style TargetType="{x:Type local:TimePicker}">
    <Setter Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Height}" />
    <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Width}" />
    <Setter Property="HorizontalAlignment" Value="Center" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>
                <Border Background="{TemplateBinding Background}"
                        BorderBrush="Black"
                        BorderThickness="1">
                    <StackPanel Orientation="Horizontal"
                                HorizontalAlignment="Center"
                                VerticalAlignment="{TemplateBinding VerticalAlignment}">
                        <ToggleButton VerticalAlignment="{TemplateBinding VerticalAlignment}"
                                      Margin="0"
                                      Background="{TemplateBinding Background}"
                                      BorderBrush="Transparent"
                                      Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Hour}">
                            <ToggleButton.Template>
                                <ControlTemplate TargetType="{x:Type ToggleButton}">
                                    <Aero:ButtonChrome SnapsToDevicePixels="True"
                                                       Background="{TemplateBinding Background}"
                                                       BorderBrush="{TemplateBinding BorderBrush}"
                                                       RenderMouseOver="False"
                                                       RenderPressed="False">
                                        <ContentPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                                          />
                                    </Aero:ButtonChrome>
                                </ControlTemplate>
                            </ToggleButton.Template>
                            <ToggleButton.Style>
                                <Style TargetType="ToggleButton">
                                    <Style.Triggers>
                                        <Trigger Property="IsMouseOver" Value="True">
                                            <Setter Property="OverridesDefaultStyle" Value="True" />
                                            <Setter Property="Background" Value="LightGray" />
                                        </Trigger>
                                        <Trigger Property="IsChecked" Value="True">
                                            <Setter Property="Foreground" Value="Red" />
                                            <Setter Property="FontWeight" Value="Bold" />                                                
                                            <Setter Property="BitmapEffect">
                                                <Setter.Value>
                                                    <OuterGlowBitmapEffect GlowColor="Red" GlowSize="30" />
                                                </Setter.Value>
                                            </Setter>
                                        </Trigger>
                                    </Style.Triggers>
                                </Style>
                            </ToggleButton.Style>
                        </ToggleButton>
                        <Label HorizontalContentAlignment="{TemplateBinding HorizontalAlignment}"
                               VerticalContentAlignment="{TemplateBinding VerticalAlignment}"
                               Content=":"/>
                        <ToggleButton VerticalAlignment="{TemplateBinding VerticalAlignment}"
                                      Margin="0"
                                      Background="{TemplateBinding Background}"
                                      BorderBrush="Transparent"
                                      Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Minute}" />

                    </StackPanel>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

【问题讨论】：

标签： wpf templates triggers styles mouseover

【解决方案1】：

可能是你控件的背景默认设置为{x:Null}，尝试设置<Setter Property="Background" Value="Transparent"/> {x:Null 不会检测到鼠标，透明会。

编辑（添加）：

OverridesDefaultStyle = True 应该在 style.setters 中而不是在触发器中。

例子：

<ToggleButton Content="ToggleButton" Height="30" Width="110" >
  <ToggleButton.Style>
    <Style TargetType="ToggleButton">
      <Setter Property="SnapsToDevicePixels" Value="True"/>
      <Setter Property="UseLayoutRounding" Value="True"/>
      <Setter Property="OverridesDefaultStyle" Value="True"/>
      <Setter Property="BorderThickness" Value="1"/>
      <Setter Property="Background">
        <Setter.Value>
          <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
            <GradientStop Offset="0" Color="#FFFFFF"/>
            <GradientStop Offset="0.48" Color="#DDDDDD"/>
            <GradientStop Offset="0.5" Color="#CCCCCC"/>
            <GradientStop Offset="0.52" Color="#BBBBBB"/>
            <GradientStop Offset="1" Color="#CCCCCC"/>
          </LinearGradientBrush>
        </Setter.Value>
      </Setter>
      <Setter Property="BorderBrush">
        <Setter.Value>
          <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
            <GradientStop Offset="0" Color="#DDDDDD"/>
            <GradientStop Offset="0.48" Color="#BBBBBB"/>
            <GradientStop Offset="0.5" Color="#AAAAAA"/>
            <GradientStop Offset="0.52" Color="#999999"/>
            <GradientStop Offset="1" Color="#AAAAAA"/>
          </LinearGradientBrush>
        </Setter.Value>
      </Setter>
      <Setter Property="HorizontalContentAlignment" Value="Center"/>
      <Setter Property="VerticalContentAlignment" Value="Center"/>
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="ToggleButton">
            <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"
                    CornerRadius="2" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" UseLayoutRounding="{TemplateBinding UseLayoutRounding}">
              <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
            </Border>
            <ControlTemplate.Triggers>
              <MultiTrigger>
                <MultiTrigger.Conditions>
                  <Condition Property="IsMouseOver" Value="True"/>
                  <Condition Property="IsChecked" Value="False"/>
                </MultiTrigger.Conditions>
                <Setter Property="Background">
                  <Setter.Value>
                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                      <GradientStop Offset="0" Color="#FFFFFF"/>
                      <GradientStop Offset="0.48" Color="#EEEEEE"/>
                      <GradientStop Offset="0.5" Color="#DDDDDD"/>
                      <GradientStop Offset="0.52" Color="#CCCCCC"/>
                      <GradientStop Offset="1" Color="#DDDDDD"/>
                    </LinearGradientBrush>
                  </Setter.Value>
                </Setter>
              </MultiTrigger>
              <MultiTrigger>
                <MultiTrigger.Conditions>
                  <Condition Property="IsMouseOver" Value="True"/>
                  <Condition Property="IsChecked" Value="True"/>
                </MultiTrigger.Conditions>
                <Setter Property="BorderBrush" Value="#666666"/>
                <Setter Property="BorderThickness" Value="2,2,1,1"/>
                <Setter Property="Background">
                  <Setter.Value>
                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                      <GradientStop Offset="0" Color="#AAAAAA"/>
                      <GradientStop Offset="0.48" Color="#999999"/>
                      <GradientStop Offset="0.5" Color="#AAAAAA"/>
                      <GradientStop Offset="0.52" Color="#BBBBBB"/>
                      <GradientStop Offset="1" Color="#DDDDDD"/>
                    </LinearGradientBrush>
                  </Setter.Value>
                </Setter>
              </MultiTrigger>
              <MultiTrigger>
                <MultiTrigger.Conditions>
                  <Condition Property="IsChecked" Value="True"/>
                  <Condition Property="IsMouseOver" Value="False"/>
                </MultiTrigger.Conditions>
                <Setter Property="BorderBrush" Value="#333333"/>
                <Setter Property="BorderThickness" Value="2,2,1,1"/>
                <Setter Property="Background">
                  <Setter.Value>
                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                      <GradientStop Offset="0" Color="#999999"/>
                      <GradientStop Offset="0.48" Color="#888888"/>
                      <GradientStop Offset="0.5" Color="#999999"/>
                      <GradientStop Offset="0.52" Color="#AAAAAA"/>
                      <GradientStop Offset="1" Color="#CCCCCC"/>
                    </LinearGradientBrush>
                  </Setter.Value>
                </Setter>
              </MultiTrigger>
            </ControlTemplate.Triggers>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </ToggleButton.Style>
</ToggleButton>

至于发光：

将 ContentPresenter 完全替换为：

          <Grid>
            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
            <ContentPresenter x:Name="ContentPart" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                              TextBlock.Foreground="#5588FF" Visibility="Collapsed">
              <ContentPresenter.Effect>
                <BlurEffect />
              </ContentPresenter.Effect>
            </ContentPresenter>
          </Grid>

并添加这个简单的触发器：

<Trigger Property="IsChecked" Value="True">
                    <Setter TargetName="ContentPart" Property="Visibility" Value="Visible"/>
                  </Trigger>

【讨论】：

刚试了一下：没用。我在里面的每一个背景声明上都试过了，什么也没有。 :)
如果您真的对创建样式和控件模板感兴趣，请查看这个充满示例的网站：msdn.microsoft.com/en-us/library/ms752043.aspx 我一直避免使用提供的主题，例如 Areo 和其他 5 或 6 个，因为他们不会教你任何东西:)
我遇到了 2 个问题。首先，OverridesDefaultStyle 没有修复背景悬停问题。其次，关于模糊效果，VS 不会让我在样式设置器中设置 TargetName。我不知道这是否重要，但这在自定义控件的 generic.xaml 文件中。哦，我真的非常感谢您的帮助。
触发器几乎不存在于样式中，只有关于方向的设置器和此类属性直接位于样式标签下，以便能够在一种样式中创建更多模板。大多数（效果相关的）触发器都是controltemplate的一部分，所以blureffect触发器也应该添加到controltemplate中，而不是styletag中。如果您复制我向您展示的样式，您会注意到它在悬停时会更改其背景颜色，即使处于选中状态也是如此。
好吧，我又玩了一些，终于让它工作了。我确实将触发器切换回 ControlTemplate，但我也返回并阅读了上面发布的第一个链接，似乎我错过了在 ToggleButton 声明中无法设置背景的部分，只是在样式中。再次感谢您对此的帮助，发光效果非常完美！

【解决方案2】：

只是想为此发布最终标记，以防有人搜索相同的内容。

<Style TargetType="{x:Type local:TimePicker}">
    <Setter Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Height}" />
    <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Width}" />
    <Setter Property="HorizontalAlignment" Value="Center" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="FontSize" Value="14" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>
                <Border Background="{TemplateBinding Background}"
                        BorderBrush="Transparent"
                        BorderThickness="1">
                    <StackPanel Orientation="Horizontal"
                                HorizontalAlignment="Center"
                                VerticalAlignment="{TemplateBinding VerticalAlignment}">
                        <ToggleButton VerticalAlignment="{TemplateBinding VerticalAlignment}"
                                      Margin="0"                                          
                                      BorderBrush="Transparent"
                                      BorderThickness="0"
                                      Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Hour}">
                            <ToggleButton.Template>
                                <ControlTemplate TargetType="{x:Type ToggleButton}">
                                    <Aero:ButtonChrome SnapsToDevicePixels="True"                                                           
                                                       Background="{TemplateBinding Background}"
                                                       BorderBrush="{TemplateBinding BorderBrush}"                                                           
                                                       RenderDefaulted="False">
                                        <Grid>
                                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                            <ContentPresenter x:Name="ContentPart"
                                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                              TextBlock.Foreground="#FF605c" Visibility="Collapsed">
                                                <ContentPresenter.Effect>
                                                    <BlurEffect />
                                                </ContentPresenter.Effect>
                                            </ContentPresenter>
                                        </Grid>
                                    </Aero:ButtonChrome>
                                    <ControlTemplate.Triggers>
                                        <Trigger Property="IsMouseOver" Value="True">
                                            <Setter TargetName="ContentPart" Property="Visibility" Value="Visible" />
                                        </Trigger>
                                        <Trigger Property="IsChecked" Value="True">
                                            <Setter Property="FontWeight" Value="Bold" />
                                            <Setter TargetName="ContentPart" Property="Visibility" Value="Visible" />                                                
                                        </Trigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </ToggleButton.Template>
                            <ToggleButton.Style>
                                <Style TargetType="{x:Type ToggleButton}">
                                    <Setter Property="Background" Value="Transparent" />
                                </Style>
                            </ToggleButton.Style>
                        </ToggleButton>
                        <Label HorizontalContentAlignment="{TemplateBinding HorizontalAlignment}"
                               VerticalContentAlignment="{TemplateBinding VerticalAlignment}"
                               Content=":"/>
                        <ToggleButton VerticalAlignment="{TemplateBinding VerticalAlignment}"
                                      Margin="0"
                                      Background="{TemplateBinding Background}"
                                      BorderBrush="Transparent"
                                      Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Minute}" />

                    </StackPanel>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

【讨论】：

刚刚发现另一件事：如果您删除上面的 <Aero:... 部分，其他一切仍然有效，并且它摆脱了 Aero 对我们施加的白色 InnerBorder。