실버라이트에는 기본 효과가 그림자(DropShadow) 효과와 번짐(Blur) 효과가 있습니다. (제 기억엔.. 아니면... ㅋㅋ)
이번에 프로젝트를 하면서 실버라이트로 동영상 플레이어를 만드는데 재생중인 동영상을 어둡고 밝게하는 Brightness 효과를 주려고 했는데 지원을 안하다보니... 구글에서 엄청 찾았습니다.
그래서 찾은게 WPF에서 어느분이 만들어 놓은 Custom Effect 내용을 찾아 실버라이트에 적용을 해보았습니다.
일반 먼저 제가 작성한 샘플 프로젝트를 첨부합니다.
 MyEffect.zip |
1. Visual Studio를 실행하고 실버라이트 프로젝트를 생성합니다. 저는 MyEffect 라는 솔루션에 MyEffect.SL 실버라이트 프로젝트를 만들고 MyEffect.Web 이라는 웹사이트를 생성했습니다.
2. 밝기와 명암비 효과를 내는 쉐더파일(bricon.ps)을 실버라이트 프로젝트에 추가를 합니다. (샘플 프로젝트에 포함되어 있습니다.)
3. 2단계에서 추가한 쉐더파일을 사용할 클래스를 생성을 합니다. 전 BrightContrastEffect 클래스 파일을 생성했습니다. 내용은 아래와 같습니다.
Custom Effect를 작성할때는 ShaderEffect 클래스를 상속받아서 작성을 해야합니다.
아래는 ShaderEffect 클래스를 상속받은 BrightContrastEffect 입니다.
생성자에서는 2단계에서 추가한 쉐더파일을 읽어 PixelShader에 설정하고, 프로퍼티로는 밝기 값을 설정하거나 가져오는 Brightness와 명암비 값을 설정하거나 가져오는 Contrast를 추가했습니다.
using System;
using System.Windows;
using System.Windows.Media;
using System.Windows.Media.Effects;
namespace MyEffect.SL
{
// Custom Effect는 ShaderEffect 클래스를 상속받아서 작성을 합니다.
public class BrightContrastEffect : ShaderEffect
{
public static readonly DependencyProperty InputProperty = ShaderEffect.RegisterPixelShaderSamplerProperty("Input", typeof(BrightContrastEffect), 0);
public static readonly DependencyProperty BrightnessProperty = DependencyProperty.Register("Brightness", typeof(double), typeof(BrightContrastEffect), new System.Windows.PropertyMetadata(0.0, PixelShaderConstantCallback(0)));
public static readonly DependencyProperty ContrastProperty = DependencyProperty.Register("Contrast", typeof(double), typeof(BrightContrastEffect), new System.Windows.PropertyMetadata(0.0, PixelShaderConstantCallback(1)));
public BrightContrastEffect()
{
Uri u = new Uri(@"/MyEffect.SL;component/bricon.ps", UriKind.Relative);
PixelShader = new PixelShader() { UriSource = u };
this.UpdateShaderValue(InputProperty);
this.UpdateShaderValue(BrightnessProperty);
this.UpdateShaderValue(ContrastProperty);
}
public Brush Input
{
get { return (Brush)GetValue(InputProperty); }
set { SetValue(InputProperty, value); }
}
/// <summary>
/// 밝기
/// </summary>
public double Brightness
{
get { return (double)GetValue(BrightnessProperty); }
set { SetValue(BrightnessProperty, value); }
}
/// <summary>
/// 명암비
/// </summary>
public double Contrast
{
get { return (double)GetValue(ContrastProperty); }
set { SetValue(ContrastProperty, value); }
}
}
}
using System.Windows;
using System.Windows.Media;
using System.Windows.Media.Effects;
namespace MyEffect.SL
{
// Custom Effect는 ShaderEffect 클래스를 상속받아서 작성을 합니다.
public class BrightContrastEffect : ShaderEffect
{
public static readonly DependencyProperty InputProperty = ShaderEffect.RegisterPixelShaderSamplerProperty("Input", typeof(BrightContrastEffect), 0);
public static readonly DependencyProperty BrightnessProperty = DependencyProperty.Register("Brightness", typeof(double), typeof(BrightContrastEffect), new System.Windows.PropertyMetadata(0.0, PixelShaderConstantCallback(0)));
public static readonly DependencyProperty ContrastProperty = DependencyProperty.Register("Contrast", typeof(double), typeof(BrightContrastEffect), new System.Windows.PropertyMetadata(0.0, PixelShaderConstantCallback(1)));
public BrightContrastEffect()
{
Uri u = new Uri(@"/MyEffect.SL;component/bricon.ps", UriKind.Relative);
PixelShader = new PixelShader() { UriSource = u };
this.UpdateShaderValue(InputProperty);
this.UpdateShaderValue(BrightnessProperty);
this.UpdateShaderValue(ContrastProperty);
}
public Brush Input
{
get { return (Brush)GetValue(InputProperty); }
set { SetValue(InputProperty, value); }
}
/// <summary>
/// 밝기
/// </summary>
public double Brightness
{
get { return (double)GetValue(BrightnessProperty); }
set { SetValue(BrightnessProperty, value); }
}
/// <summary>
/// 명암비
/// </summary>
public double Contrast
{
get { return (double)GetValue(ContrastProperty); }
set { SetValue(ContrastProperty, value); }
}
}
}
4. XAML 파일에서 위에서 만든 BrightContrastEffect를 사용해 보도록 하겠습니다.
상단에 생성한 컨트롤을 사용할 수 있도록 네임스페이스를 지정해 줍니다.
컨트롤은 Image 컨트롤을 추가하고 이 Image 컨트롤에 BrightContrastEffect 효과를 주도록 하겠습니다.
그리고 2개의 Slider를 추가하여 밝기(Brightness)와 명암비(Contrast)를 조절하도록 합니다.
<UserControl x:Class="MyEffect.SL.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:my="clr-namespace:MyEffect.SL"
mc:Ignorable="d" d:DesignWidth="400" d:DesignHeight="600">
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Image Source="komusin.jpg" Grid.Row="0" Width="400" Height="573">
<Image.Effect>
<my:BrightContrastEffect x:Name="myBCEffect" />
</Image.Effect>
</Image>
<Canvas Grid.Row="1">
<TextBlock Text="밝기" Canvas.Top="5" />
<Slider Width="150" Minimum="-1" Maximum="1" Value="{Binding Brightness, ElementName=myBCEffect, Mode=TwoWay}" Canvas.Left="25" Canvas.Top="5" />
<TextBlock Text="명암비" Canvas.Top="5" Canvas.Left="190" />
<Slider Width="150" Minimum="-1" Maximum="1" Value="{Binding Contrast, ElementName=myBCEffect, Mode=TwoWay}" Canvas.Left="225" Canvas.Top="5" />
</Canvas>
</Grid>
</UserControl>
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:my="clr-namespace:MyEffect.SL"
mc:Ignorable="d" d:DesignWidth="400" d:DesignHeight="600">
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Image Source="komusin.jpg" Grid.Row="0" Width="400" Height="573">
<Image.Effect>
<my:BrightContrastEffect x:Name="myBCEffect" />
</Image.Effect>
</Image>
<Canvas Grid.Row="1">
<TextBlock Text="밝기" Canvas.Top="5" />
<Slider Width="150" Minimum="-1" Maximum="1" Value="{Binding Brightness, ElementName=myBCEffect, Mode=TwoWay}" Canvas.Left="25" Canvas.Top="5" />
<TextBlock Text="명암비" Canvas.Top="5" Canvas.Left="190" />
<Slider Width="150" Minimum="-1" Maximum="1" Value="{Binding Contrast, ElementName=myBCEffect, Mode=TwoWay}" Canvas.Left="225" Canvas.Top="5" />
</Canvas>
</Grid>
</UserControl>
밝기와 명암비의 값은 -1에서 1까지입니다. 그런데 저는 밝기는 -0.7 ~ 0.7, 명암비는 -0.9 ~ 0.9까지로 설정해서 프로젝트에 적용을 하였습니다. 그 이유는 지금까지 작성한 실버라이트를 실행해보고 밝기 및 명암비를 조절해보면 아실겁니다^^
그리고 위에 소스는 XAML에서 직접 컨트롤끼리 바인딩을 했지만 Slider 컨트롤에 ValueChanged 이벤트를 이용하여 값을 설정해도 됩니다.
자... 이젠 테스트 웹페이지를 열어보도록 하겠습니다.......... 아래 예제 이미지처럼 잘 나오나요??
안되시는 분은.. 다시 차근 차근 한번 읽어보고 실수한 부분이 있는지 확인을 해보시기 바랍니다.
 |
이것으로 밝기, 명암비를 조절하는 Custom Effect를 만들어 보았습니다.
어렵진 않죠?? 전 이거 찾는라 고생을 했답니다.. ㅎㅎ^^;
이미지출처 : 고무신 사진동화 [komusin.pe.kr]
참고사이트
→ [Silverlight MSDN Library] ShaderEffect 클래스
→ Brightness and contrast manipulation in WPF 3.5 SP1 (다른주소)
댓글을 달아 주세요