2012-03-12 9 views
1

これはOverriding button background in WPF on Aeroへとマイナー度Custom Control Styling/Triggersのフォローアップです。カスタムコントロールスタイリング/トリガパートII - オーバーライドエアロ

トグルボタンの機能を維持するが、ボタンのスタイルを取り除くためにしようと、私は上記の最初のリンクのプロセスに従いました。これは基本的に、ToggleButton

上だから今私の問題があるときだけではなく、それはどこかのウィンドウに超えることにマウスを感知したそうでなければfalseRenderMouseOverRenderPressedを(変更のマイナーな修正とはいえ、作品IsMouseOverトリガーは背景をまったく変更しません。

補足として、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はマウスを検出しません。透過的です。

編集(追加):

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を置き換え:ちょうど

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

はちょうどそれを試してみました:動作しませんでした。私はそこに何も書かれていないのに、それを試してみました。 :) –

+1

スタイルやコントロールテンプレートの作成に本当に関心があるなら、このサイトを例にしてみてください。http://msdn.microsoft.com/en-us/library/ms752043.aspx私はテーマを使用することを常に避けていますAreoと他の5,6のように用意されているので、何も教えてくれないからです。 – Silvermind

+0

私はこれで2つの問題に遭遇しました。まず、OverridesDefaultStyleはバックグラウンドホバーの問題を修正しませんでした。次に、ぼかし効果に関して、VSはスタイルセッター内でTargetNameを設定することはできません。これが重要かどうかわかりませんが、これはカスタムコントロールのgeneric.xamlファイルの中にあります。ああ、私は本当に助けに感謝します。 –

1

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

と、この単純なトリガーを追加弱誰かが同じことを探している場合に備えて、このための最終的なマークアップを投稿することにしました。

<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を取り除きます。 –

関連する問題