2012-03-12 48 views
1

这是对Overriding button background in WPF on Aero的一个后续操作,对次要程度Custom Control Styling/Triggers自定义控件造型/触发器第二部分 - 凌驾Aero

在试图保持ToggleButton的功能,但摆脱按钮样式,我遵循上面的第一个链接的过程。它基本上作品,尽管改变RenderMouseOverRenderPressedfalse(否则它感应鼠标过度窗口中的任意一个小的修改,而不是只当过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> 

回答

1

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

编辑(添加):

OverridesDefaultStyle =真应在不处于触发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> 
+0

刚刚尝试过:没有工作。我在那里的每个背景声明上都试过了,没有任何内容。 :) – 2012-03-12 16:38:03

+1

如果您真的对创建样式和控件模板感兴趣,请查看以下完整示例:http://msdn.microsoft.com/en-us/library/ms752043.aspx我总是避免使用主题提供像Areo和其他5或6,因为他们不教你任何东西:) – Silvermind 2012-03-12 20:12:27

+0

我遇到了2个问题。首先,OverridesDefaultStyle没有修复背景悬停问题。其次,关于模糊效果,VS不会让我在一个样式设置器中设置一个TargetName。我不知道这是否重要,但这是在自定义控件的generic.xaml文件中。哦,我真的非常感谢帮助。 – 2012-03-13 07:17:46

1

刚苍白如果有人在寻找相同的东西,那么他就会发布最后的标记。

<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> 
+0

刚刚发现了另外一件事:如果删除上面的部分,其他所有部分仍然有效,并且它将摆脱Aero对我们强加的白色InnerBorder。 – 2012-03-16 21:38:24