Skip to content

Home

Jump to bottom
Jörg Flechsig edited this page Sep 9, 2018 · 38 revisions

Welcome to the BlurryControls wiki!

The BlurryControls library is meant to give your application a blurry look as it it known from the Info Center or native Audio Controls. BlurryControls runs on Windows 10 only!

Something like the appearance of the native calculator app is Microsoft's Acrylic Design and not possible in WPF. There's an example project showing how to achieve that effect in an UWP application.

BlurryControls.dll

Get it on NuGet! PM> Install-Package BlurryControls

It provides the following functionality:

  1. BlurryWindow: you can inherit from BlurryWindow to create a blurry window
  2. BlurryTray: you can inherit from BlurryTray to create a control which appears (by default) in the bottom right corner of your workspace, it is a convinient way to implement a control invoked by a tray icon (comes with an animation)
  3. BlurryDialogWindow: this one can only be in invoked by BlurryMessageBox which provides functionality similar to the conventional MessageBox provided by Microsoft
  4. BlurBehindDialogWindow: this one can only be in invoked by BlurBehindMessageBox, it blurs it's owners content when loaded and restores previous appearance when closed
  5. BlurryImage: a conventional WPF Image with additional functionality to blur it dynamically
  6. BlurryUserControl: creates a UserControl which blurs the content beneath
  7. BlurryColorPicker: a simple color picker control

Have a look at the sample application

A screenshot of the example project

The solution provides an impression of what you can do with this library.

How to use the controls

BlurryWindow

inherits from System.Windows.Window

Code example for common usage:

var blurryWindow = new BlurryWindow();
blurryWindow.Show();

Note: For dialog like bahaviour have a look at the BlurryDialogWindow below or invoke blurryWindow.ShowDialog(). The usual way to invoke is StartupUri="BlurryExampleWindow.xaml" in your App.xaml

<controls:BlurryWindow x:Class="SuperCoolExampleNamespace.BlurryExampleWindow"
                       xmlns:controls="clr-namespace:BlurryControls.Controls;assembly=BlurryControls"
                       xmlns:control="clr-namespace:SuperCoolExampleNamespace"
                       Strength="0.75">
    <Grid x:Name="SuperCoolExampleContent">
        <!-- content goes here -->
    
    </Grid>
</controls.BlurryWindow>

Note: When applying a custom brush to the Background property, the Strength will be applied to it. The default value of Strength is 0.75

Code example for additional MenuBar items:

<controls:BlurryWindow.AdditionalMenuBarButtons>
    <internals:ButtonCollection>
        <Button x:Name="ExampleButton1"
                Click="ExampleButton_OnClick">
            <Button.Content>
                <Image Source="../Resources/ExampleImage.jpeg"/>
            </Button.Content>
        </Button>
        <Button x:Name="ExampleButton2"
                Click="ExampleButton_OnClick"
                Foreground="White"
                Content="ClickMe"/>
    </internals:ButtonCollection>
</controls:BlurryWindow.AdditionalMenuBarButtons>

Note: a style fitting the existing buttons will be applied automagically

private void Test_OnClick(object sender, RoutedEventArgs e)
{
    BlurryMessageBox.Show("Hello there!");
}

Additional parameters:

  • IsResizable
  • IsMenuBarVisible
  • Strength
  • CloseOnIconDoubleClick
  • AdditionalMenuBarButtons
  • HorizontalTitleAlignment

BlurryTray

Code example for common usage:

var tray = new InvokedTrayWindow();
tray.Show();

Note: You can also use tray.ShowDialog to block interaction with the calling instance as long as the BlurryControl is activated

<controls:BlurryTray x:Class="SuperCoolExampleNamespace.BlurryExampleTray"
                    xmlns:controls="clr-namespace:BlurryControls.Controls;assembly=BlurryControls"
                    xmlns:control="clr-namespace:SuperCoolExampleNamespace"
                    Strength="0.75"
                    Duration="5"
                    DeactivationDuration="500">
    <Grid x:Name="SuperCoolExampleContent">
        <!-- content goes here -->
    
    </Grid>
</controls.BlurryTray>

AdditionalParameters:

  • Strength
  • DeactivatesOnLostFocus
  • Duration
  • ActivationDuration
  • DeactivationDuration

BlurryDialogWindow

(is private and can only be invoked by the static class BlurryMessageBox)

Code example for common usage:

var mainWindow = Application.Current.MainWindow;
var messageHeaderText = "ExampleDialog";
var messageContentText = $"This is a dialog owned by {mainWindow.Title}";
var result = BlurryMessageBox.Show(mainWindow, messageContentText, 
                 messageHeaderText, BlurryDialogButton.OkCancel, BlurryDialogIcon.Information);

switch (result)
{
    case BlurryDialogResult.Ok:
        Debug.WriteLine($"The result is {BlurryDialogResult.Ok}");
        break;
    case BlurryDialogResult.Cancel:
        Debug.WriteLine($"The result is {BlurryDialogResult.Cancel}");
        break;
    case BlurryDialogResult.None:
        Debug.WriteLine($"The result is {BlurryDialogResult.None}");
        break;
    default:
        throw new ArgumentOutOfRangeException();
}

Additional overloads:

// conventional dialogs
Show(string messageBoxText, double strength = 0.5);
Show(string messageBoxText, string caption, double strength = 0.5);
Show(Window owner, string messageBoxText, double strength = 0.5);
Show(string messageBoxText, string caption, BlurryDialogButton button, double strength = 0.5);
Show(Window owner, string messageBoxText, string caption, double strength = 0.5);
Show(string messageBoxText, string caption, BlurryDialogButton button, BlurryDialogIcon icon, double strength = 0.5);
Show(Window owner, string messageBoxText, string caption, BlurryDialogButton button, double strength = 0.5);
Show(Window owner, string messageBoxText, string caption, BlurryDialogButton button, BlurryDialogIcon icon, double strength = 0.5);

// custom dialogs
Show(string caption, FrameworkElement content, double strength = 0.5)
Show(string caption, FrameworkElement content, BlurryDialogButton button, double strength = 0.5)
Show(string caption, FrameworkElement content, ButtonCollection customDialogButtons, double strength = 0.5)
Show(string messageBoxText, string caption, ButtonCollection customDialogButtons, double strength = 0.5)
Show(Window owner, string caption, FrameworkElement content, double strength = 0.5)
Show(Window owner, string caption, FrameworkElement content, BlurryDialogButton button, double strength = 0.5)
Show(Window owner, string messageBoxText, string caption, ButtonCollection customDialogButtons, double strength = 0.5)
Show(Window owner, string caption, FrameworkElement content, ButtonCollection customDialogButtons, double strength = 0.5)

BlurBehindDialogWindow

(is private and can only be invoked by the static class BlurBehindMessageBox)

This is a modified version of the BlurryDialogWindow. It implements the same overloads and functionality, but blurs it's owners content when loaded and restores previous appearance when closed. Can be used when your dialog is really important.

BlurryImage

inherits System.Windows.Controls.Image

Code example for common usage:

<windows:BlurryImage x:Name="BlurryExampleImage" 
                     Source="../Resources/ExampleImage.jpeg"
                     BlurRadius="50"/>

Note: The BlurRadius property is bindable and can be adjusted dynamically.

Additional parameters:

  • BlurRadius

BlurryUserControl

inherits System.Windows.Controls.UserControl

Code example for common usage:

<Grid x:Name="BlurContainer">
    <!-- this is your underlying content -->
    <!-- here you can define a picture or any complex controls -->
</Grid>

<!--the BlurryUserControl must not be child of the defined BlurContainer!-->
<controls:BlurryUserControl VerticalAlignment="Top" 
                            HorizontalAlignment="Stretch"
                            Height="50"
                            Background="#54FFFFFF"
                            BlurContainer="{Binding ElementName=BlurContainer}"
                            BlurRadius="25"
                            Magnification="0">
    <!-- this is your overlying content -->
</controls:BlurryUserControl>

Note: The BlurRadius property is bindable and can be adjusted dynamically. Have a look at the sample application for an example of the intended usage.

Additional parameters:

  • BlurContainer
  • BlurRadius
  • RenderingBias
  • Magnification

Note: A BlurRadius above 10 can cause a visible effect near borders, hence setting a magnification is recommended.

BlurryImage

inherits System.Windows.Controls.Image

Code example for common usage:

<controls:BlurryColorPicker ColorChanged="BlurryColorPicker_OnColorChanged"/>

Note: The Color property is bindable

Additional parameters:

  • Delay

Global styling

BlurryResources.xaml

Note: For global style overrides you can add the following line to your local resources. It provides a small preset of style suggestions, as it can be seen in the sample application.

XAML:

<Application.Resources>
    <ResourceDictionary Source="pack://application:,,,/BlurryControls;component/Themes/Generic.xaml" />
</Application.Resources>

Converter

Example of binding a strongly highlighted TextBlock content:

<TextBlock Text="Exampletext"
           Foreground="{Binding Path=.Background, RelativeSource={RelativeSource Mode=FindAncestor, 
                                                  AncestorType={x:Type windows:BlurryWindow}}, 
                                Converter={StaticResource InvertColorConverter}, ConverterParameter=1d}" />

Note: You may probably just make use of the static presets provided by the ColorHelper class which provides all crucial transformations, e.g. SystemWindowGlassColorBrush or InvertedTransparentSystemWindowGlassColorBrush.

Clone this wiki locally