2012-04-25 6 views
1

Кто-нибудь знает, как сделать эффект внутреннего свечения в WPF без с использованием выражения blend или устаревшего BitmapEffects?WPF Inner Glow Effect

Пример изображения:

enter image description here

Например, вот некоторые XAML для кнопки с изображением и текстом. Я хочу эту кнопку, чтобы иметь внутреннее свечение (не внешнее свечение): (! Примечание Это не готовые решения только идея)

<Button Click="HandleDeleteRows" Style="{StaticResource ButtonCellStyle}"> 
    <DockPanel> 
     <Image Style="{StaticResource DeleteButtonImage}" /> 
     <TextBlock Style="{StaticResource DeleteButtonCaption}" /> 
    </DockPanel> 
</Button> 
+0

Есть, возможно, способ, которым я могу определить свой собственный класс эффектов, чтобы сделать это? – Alain

ответ

2

Хотя мой упрощенный пример, приведенный выше, решается ответом PompolutZ, я не был в состоянии переопределить шаблон управления элемента управления, который я хотел применить к стилю в моем примере с реальным миром, - поэтому я принял определение моего собственного Эффект, следуя инструкциям here.

Шаг 1 - Напишите файл HLSL .FX, который сделает желаемый эффект. Я отказался от сияния как слишком сложный, так как он требовал обнаружения края. Я решил пойти с множеством стандартных цветов, яркости, гаммы и корректировок насыщенности, которые были довольно легко реализованы и позволили мне создать хорошие визуальные сигналы. Их было довольно легко реализовать с использованием здравого смысла и поиска алгоритмов затенения пикселей в Интернете.

ColourAdjust.fx:

sampler2D implicitInput : register(s0); 
float saturation : register(c0); 
float gamma : register(c1); 
float brightness : register(c2); 
float red_adjust : register(c3); 
float green_adjust : register(c4); 
float blue_adjust : register(c5); 

static const float max_gamma = 100; 

float4 main(float2 uv : TEXCOORD) : COLOR 
{ 
    float4 color = tex2D(implicitInput, uv); 
    float4 result; 

    // Apply greyscale desaturation 
    float gray = color.r * 0.3 + color.g * 0.59 + color.b *0.11; 
    result.r = (color.r - gray) * saturation + gray; 
    result.g = (color.g - gray) * saturation + gray; 
    result.b = (color.b - gray) * saturation + gray; 

    // Apply Gamma Adjustment (if it's not approximately 0.5 - which means no adjustment) 
    float gammafactor = gamma == 0 ? max_gamma : log(gamma)/log(0.5); 
    result.r = pow(result.r, gammafactor); 
    result.g = pow(result.g, gammafactor); 
    result.b = pow(result.b, gammafactor); 

    //Apply linear brightness adjustment 
    result.r += brightness + red_adjust; 
    result.g += brightness + green_adjust; 
    result.b += brightness + blue_adjust; 

    //Clamp brightness adjustment result to bounds 0 <= val <= 1 
    result.r = (result.r > 1 ? 1 : (result.r < 0 ? 0 : result.r)); 
    result.g = (result.g > 1 ? 1 : (result.g < 0 ? 0 : result.g)); 
    result.b = (result.b > 1 ? 1 : (result.b < 0 ? 0 : result.b)); 

    result.a = color.a; 
    return result; 
} 

Шаг 2 - я должен был загрузить локальную копию DirectX SDK, чтобы я мог скомпилировать код выше HLSL в PS файл, который является то, что используется WPF - предоставление me .

> > fxc.exe /T ps_2_0 /E PS /ColourAdjust.ps ColourAdjust.fx 

Шаг 3 - Напишите класс ShaderEffect, который выставит параметры эффекта с помощью DependencyProperties. Вот ColourAdjustEffect.cs:

using System; 
using System.Reflection; 
using System.Windows; 
using System.Windows.Media; 
using System.Windows.Media.Effects; 

namespace WPF.Utilities.UI 
{ 
    public class ColourAdjustEffect : ShaderEffect 
    { 
     private static PixelShader _pixelShader = new PixelShader() { UriSource = new Uri("pack://application:,,,/" + Assembly.GetExecutingAssembly() + ";component/Effects/ColourAdjust.ps") }; 
     public static readonly DependencyProperty InputProperty = ShaderEffect.RegisterPixelShaderSamplerProperty("Input", typeof(ColourAdjustEffect), 0); 
     public static readonly DependencyProperty SaturationProperty = DependencyProperty.Register("Saturation", typeof(double), typeof(ColourAdjustEffect), new UIPropertyMetadata(1.0, PixelShaderConstantCallback(0), CoerceFactor)); 
     public static readonly DependencyProperty GammaProperty = DependencyProperty.Register("Gamma", typeof(double), typeof(ColourAdjustEffect), new UIPropertyMetadata(0.5, PixelShaderConstantCallback(1), CoerceFactor)); 
     public static readonly DependencyProperty BrightnessAdjustmentProperty = DependencyProperty.Register("BrightnessAdjustment", typeof(double), typeof(ColourAdjustEffect), new UIPropertyMetadata(0.0, PixelShaderConstantCallback(2), CoerceBrightnessAdjustment)); 
     public static readonly DependencyProperty RedAdjustmentProperty = DependencyProperty.Register("RedAdjustment", typeof(double), typeof(ColourAdjustEffect), new UIPropertyMetadata(0.0, PixelShaderConstantCallback(3), CoerceBrightnessAdjustment)); 
     public static readonly DependencyProperty GreenAdjustmentProperty = DependencyProperty.Register("GreenAdjustment", typeof(double), typeof(ColourAdjustEffect), new UIPropertyMetadata(0.0, PixelShaderConstantCallback(4), CoerceBrightnessAdjustment)); 
     public static readonly DependencyProperty BlueAdjustmentProperty = DependencyProperty.Register("BlueAdjustment", typeof(double), typeof(ColourAdjustEffect), new UIPropertyMetadata(0.0, PixelShaderConstantCallback(5), CoerceBrightnessAdjustment)); 

     public ColourAdjustEffect() 
     { 
      PixelShader = _pixelShader; 

      UpdateShaderValue(InputProperty); 
      UpdateShaderValue(SaturationProperty); 
      UpdateShaderValue(GammaProperty); 
      UpdateShaderValue(BrightnessAdjustmentProperty); 
      UpdateShaderValue(RedAdjustmentProperty); 
      UpdateShaderValue(GreenAdjustmentProperty); 
      UpdateShaderValue(BlueAdjustmentProperty); 
     } 

     public Brush Input 
     { 
      get { return (Brush)GetValue(InputProperty); } 
      set { SetValue(InputProperty, value); } 
     } 

     /// <summary>A value between 0 and 1 to alter the amount of colour left in the image. 0 is entirely greyscale, and 1 is unaffected. Default is 1.</summary> 
     public double Saturation 
     { 
      get { return (double)GetValue(SaturationProperty); } 
      set { SetValue(SaturationProperty, value); } 
     } 

     /// <summary>A value between 0 and 1 to alter the lightness of the greyscale without altering true black or true white. 
     /// 0 shifts shades closer to true black, and 1 shifts shades closer to true white. Default is 0.5.</summary> 
     public double Gamma 
     { 
      get { return (double)GetValue(GammaProperty); } 
      set { SetValue(GammaProperty, value); } 
     } 

     /// <summary>A value between -1 and 1 to linearly move the end result closer to true black or true white respectively. 
     /// -1 will result in an entirely black image, +1 will result in an entirely white image. Default is 0.</summary> 
     public double BrightnessAdjustment 
     { 
      get { return (double)GetValue(BrightnessAdjustmentProperty); } 
      set { SetValue(BrightnessAdjustmentProperty, value); } 
     } 

     /// <summary>A value between -1 and 1 to linearly increase the Red component of the result. 
     /// -1 will remove all Red from the image, +1 will maximize all Red in the image. Default is 0.</summary> 
     public double RedAdjustment 
     { 
      get { return (double)GetValue(RedAdjustmentProperty); } 
      set { SetValue(RedAdjustmentProperty, value); } 
     } 
     /// <summary>A value between -1 and 1 to linearly increase the Green component of the result. 
     /// -1 will remove all Green from the image, +1 will maximize all Green in the image. Default is 0.</summary> 
     public double GreenAdjustment 
     { 
      get { return (double)GetValue(GreenAdjustmentProperty); } 
      set { SetValue(GreenAdjustmentProperty, value); } 
     } 
     /// <summary>A value between -1 and 1 to linearly increase the Blue component of the result. 
     /// -1 will remove all Blue from the image, +1 will maximize all Blue in the image. Default is 0.</summary> 
     public double BlueAdjustment 
     { 
      get { return (double)GetValue(BlueAdjustmentProperty); } 
      set { SetValue(BlueAdjustmentProperty, value); } 
     } 

     private static object CoerceFactor(DependencyObject d, object value) 
     { 
      double newFactor = (double)value; 

      if(newFactor < 0.0) return 0.0; 
      if(newFactor > 1.0) return 1.0; 
      return newFactor; 
     } 

     private static object CoerceBrightnessAdjustment(DependencyObject d, object value) 
     { 
      double newFactor = (double)value; 

      if(newFactor < -1.0) return -1.0; 
      if(newFactor > 1.0) return 1.0; 
      return newFactor; 
     } 
    } 
} 

Шаг 4: Используйте свой эффект в XAML:

<Setter Property="Effect"> 
    <Setter.Value> 
     <ui:ColourAdjustEffect Saturation="0" Gamma="0.6" 
           BrightnessAdjustment="-0.2" RedAdjustment="0.04" /> 
    </Setter.Value> 
</Setter> 

Так что пока я не получил свой эффект свечения, у меня было достаточно параметров, чтобы играть с этим I может получить «подсветку» визуальной подсказки, которая была моей настоящей целью. Вот некоторые из вещей, которые я был в состоянии сделать с ним:

enter image description here

1

Может быть, вы можете попробовать что-то вроде этого:

<Style x:Key="{x:Type Button}" TargetType="{x:Type Button}"> 
    <Style.Setters> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type Button}"> 
        <Grid> 
         <Border CornerRadius="10" BorderThickness="20"> 
          <Border.BorderBrush> 
           <LinearGradientBrush StartPoint="0, 0.5" EndPoint="1, 0.5"> 
            <GradientStop Color="LightGreen" Offset="0.0" /> 
            <GradientStop Color="Transparent" Offset="0.15" /> 
           </LinearGradientBrush> 
          </Border.BorderBrush> 
         </Border> 
         <Border CornerRadius="10" BorderThickness="20"> 
          <Border.BorderBrush> 
           <LinearGradientBrush StartPoint="0, 0.5" EndPoint="1, 0.5"> 
            <GradientStop Color="LightGreen" Offset="1.0" /> 
            <GradientStop Color="Transparent" Offset="0.85" /> 
           </LinearGradientBrush> 
          </Border.BorderBrush> 
         </Border> 
         <Border CornerRadius="10" BorderThickness="20"> 
          <Border.BorderBrush> 
           <LinearGradientBrush StartPoint="0.5, 0" EndPoint="0.5, 1"> 
            <GradientStop Color="LightGreen" Offset="0.0" /> 
            <GradientStop Color="Transparent" Offset="0.15" /> 
           </LinearGradientBrush> 
          </Border.BorderBrush> 
         </Border> 
         <Border CornerRadius="10" BorderThickness="20"> 
          <Border.BorderBrush> 
           <LinearGradientBrush StartPoint="0.5 0" EndPoint="0.5, 1"> 
            <GradientStop Color="LightGreen" Offset="1.0" /> 
            <GradientStop Color="Transparent" Offset="0.85" /> 
           </LinearGradientBrush> 
          </Border.BorderBrush> 
         </Border> 
         <Border BorderBrush="White" BorderThickness="2" CornerRadius="5" Margin="18"></Border> 
         <ContentPresenter HorizontalAlignment="Center" 
              VerticalAlignment="Center"/> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style.Setters> 
</Style> 

Мы можем сделать эффект «свечения», играя с границами вокруг некоторого контента в сетке. Я считаю, что это будет не так гибко, как InnerGlow BitmapEffect, но в любом случае он устарел.

+0

Очки за усилия человека, это хорошая идея. Какой-то больно придумать новый шаблон управления, подобный этому для каждого элемента управления, но, тем не менее, хорошая обходная идея. – Alain

+0

Обратите внимание, что с таким градиентом вы получите некоторые уродливые промежуточные серые цвета. Лучше было бы использовать '# 0000ff00' вместо' Transparent' – ghord