Turning the background to gray scale in wpf

Question

Consider a window with loads of multi colored controls on it. I want to put a panel on top of this when some trigger happens in the form such that all the controls looses its color (everything appears in gray scale) except the panel which has just popped up. Can somebody help me with this ??

Answer 1

In your top-level container (Grid, etc.), just create a Rectangle in a lower ZIndex (or create one more level of nesting).

When you pop your panel up, swap the ZIndex for the Rectangle to fit between your controls and your panel.

As far as the grayscale, there's probably some nifty ways to do it with a VisualBrush, but I think you could get pretty far with a semi-opaque SolidColorBrush on the Rectangle.

Answer 2

I would use the Effect property of whatever the client area you wish to gray scale. You will however need to create your own pixel shader to do the gray scale conversion.

http://windowsclient.net/wpf/wpf35/wpf-35sp1-more-effects.aspx

You could quickly test your concept by using the BlurEffect class instead of a custom shader.

<Window x:Class="WpfGrayscaleSample.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="327" Width="526">
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="239*" />
        <RowDefinition Height="50*" />
    </Grid.RowDefinitions>

    <Canvas Name="clientArea" Background="Transparent" Grid.Row="0">
        <!-- Just some controls -->
        <Button Height="31" Name="button1" Width="80" Canvas.Left="30" Canvas.Top="125">Button</Button>
        <Button Height="28" Name="button2" VerticalAlignment="Bottom" Click="button2_Click" HorizontalAlignment="Right" Width="75" Margin="0,0,16,34" Canvas.Left="66" Canvas.Top="54">Button</Button>
        <Rectangle Margin="86,43,0,0" Name="rectangle1" Stroke="Black" Fill="Crimson" Height="59" HorizontalAlignment="Left" VerticalAlignment="Top" Width="109" Canvas.Left="145" Canvas.Top="44" />
    </Canvas>

    <!-- Button to activate the shader effect -->
    <Button Height="23" Margin="15,0,0,21" Name="button3" VerticalAlignment="Bottom" HorizontalAlignment="Left" Width="75" Grid.Row="1" Click="button3_Click">Button</Button>
</Grid>

And the event handler for button3 would simply be

 private void button3_Click(object sender, RoutedEventArgs e)
 {
     clientArea.Effect = new BlurEffect() { Radius = 10.0 };
 }

Of course it is a bit more work to hook up the custom shader for the gray scaling, but the added bonus of the pixel shader is going to be performance.