2012-03-12 30 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