Question

这是对Overriding button background in WPF on Aero和较小程度Custom Control Styling/Triggers的跟进。

在尝试保持ToggleButton的功能但摆脱按钮样式时，我按照上面第一个链接的过程进行操作。它基本上有效，虽然只需稍加修改即可将RenderMouseOver和RenderPressed更改为false（否则它会感知鼠标在窗口的任何位置，而不是仅仅在{ {1}}。

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

在旁注中，我试图使用IsMouseOver使字母在切换时发光，但无论我使用什么设置，它似乎都没有效果。有人知道专门针对此的指南吗？

BitmapEffect

Answer 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>

Answer 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

2 个答案: