Develop Reference

How to imitate OuterGlowBitmapEffect using WPF effects?

I tried using DropShadowEffect but it's "glow" strength weakens when you increase BlurRadius. I want to have strong outer glow like the image below.
If I stack the same effect a dozen times I am able to get this, but the performance tanks after this. Is this possible to do using WPF with a single effect?

Depending on how large you want the radius of the blur to be and how smooth the result needs to be, you could stack different effects like gradient stops instead of repeatedly stacking the same effect.
Like you pointed out, the DropShadowEffect strength gets weaker as the BlurRadius increases.
<TextBox Text="DropShadowEffect">
<TextBox.Effect>
<DropShadowEffect BlurRadius="50"
ShadowDepth="0"
Color="Blue"
Opacity="1"/>
</TextBox.Effect>
</TextBox>
Additionally, applying effects directly to the TextBox impacts the rendering quality of the text. The proposed solution to the linked question (setting TextOptions.TextFormattingMode="Display" on the Window) also has layout implications. Instead, you can draw a Rectangle with a BlurEffect behind your element.
<Rectangle Fill="Blue"
Height={Binding ElementName=MyTextBox, Path=ActualHeight}"
Width={Binding ElementName=MyTextBox, Path=ActualWidth}">
<Rectangle.Effect>
<BlurEffect Radius="50"/>
</Rectangle.Effect>
</Rectangle>
<TextBox x:Name="MyTextBox" Text="Rectangle with BlurEffect"/>
You can then add an additional Rectangle for each gradient stop. Here there are two: one at 50 to define the overall size of the blur, and one at 30 to strengthen the glow around the control.
<Rectangle Fill="Blue"
Height={Binding ElementName=MyTextBox, Path=ActualHeight}"
Width={Binding ElementName=MyTextBox, Path=ActualWidth}">
<Rectangle.Effect>
<BlurEffect Radius="50"/>
</Rectangle.Effect>
</Rectangle>
<Rectangle Fill="Blue"
Height={Binding ElementName=MyTextBox, Path=ActualHeight}"
Width={Binding ElementName=MyTextBox, Path=ActualWidth}">
<Rectangle.Effect>
<BlurEffect Radius="30"/>
</Rectangle.Effect>
</Rectangle>
<TextBox x:Name="MyTextBox" Text="Two Rectangles with BlurEffect"/>
You asked about the perceived sharpness around the corners of the TextBox and I must admit I don't have a good solution. I initially considered rounding the corners of the blurred elements behind your control by using a Border instead of a Rectangle, but I honestly don't see much of a difference.
<!-- Remove the CornerRadius property for square corners. -->
<Border CornerRadius="10" Background="Blue">
<Border.Effect>
<BlurEffect Radius="50"/>
</Border.Effect>
</Border>
<Border CornerRadius="10" Background="Blue">
<Border.Effect>
<BlurEffect Radius="30"/>
</Border.Effect>
</Border>
Of course, you could always make the background objects larger than your control. Here they are in the same cell of a Grid but there is extra space for the Border to grow because the TextBox has a Margin. A smaller top/bottom margin and larger left/right margin means the glow will be more uniform around the control.
<!-- These items should be in the same cell of a Grid -->
<Border CornerRadius="10" Background="Blue">
<Border.Effect>
<BlurEffect Radius="50"/>
</Border.Effect>
</Border>
<Border CornerRadius="10" Background="Blue">
<Border.Effect>
<BlurEffect Radius="30"/>
</Border.Effect>
</Border>
<TextBox Text="TextBox has an 8px, 4px margin" Margin="8 4"/>

How to use the XAML dictionary that Syncfusion Metro Studio produces

For resolution independence we want scaling art. Ok, so a common source for that mentioned on stack is Syncfusion Metro Studio.
Metro Studio 2 produces this for XAML:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Viewbox x:Key="error">
<Grid Width="64" Height="64" Visibility="Visible">
<Grid Visibility="Visible">
<Rectangle Fill="#FFD21818" Visibility="Visible" />
<Ellipse Fill="#FFD21818" Visibility="Collapsed" />
<Path Data="M50.5,4.7500001C25.232973,4.75 4.75,25.232973 4.7500001,50.5 4.75,75.767029 25.232973,96.25 50.5,96.25 75.767029,96.25 96.25,75.767029 96.25,50.5 96.25,25.232973 75.767029,4.75 50.5,4.7500001z M50.5,0C78.390381,0 101,22.609621 101,50.5 101,78.390381 78.390381,101 50.5,101 22.609621,101 0,78.390381 0,50.5 0,22.609621 22.609621,0 50.5,0z" Stretch="Fill" Fill="#FFD21818" Visibility="Collapsed" />
</Grid>
<Path Data="F1M54.0573,47.8776L38.1771,31.9974 54.0547,16.1198C55.7604,14.4141 55.7604,11.6511 54.0573,9.94531 52.3516,8.23962 49.5859,8.23962 47.8802,9.94531L32.0026,25.8229 16.1224,9.94531C14.4167,8.23962 11.6511,8.23962 9.94794,9.94531 8.24219,11.6511 8.24219,14.4141 9.94794,16.1198L25.8255,32 9.94794,47.8776C8.24219,49.5834 8.24219,52.3477 9.94794,54.0534 11.6511,55.7572 14.4167,55.7585 16.1224,54.0534L32.0026,38.1745 47.8802,54.0534C49.5859,55.7585 52.3516,55.7572 54.0573,54.0534 55.7604,52.3477 55.763,49.5834 54.0573,47.8776z" Stretch="Uniform" Fill="#FFFFFFFF" Width="36" Height="36" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<TransformGroup>
<TransformGroup.Children>
<RotateTransform Angle="0" />
<ScaleTransform ScaleX="1" ScaleY="1" />
</TransformGroup.Children>
</TransformGroup>
</Path.RenderTransform>
</Path>
</Grid>
</Viewbox>
</ResourceDictionary>
So far so good, just merge this into the project resources. But how to consume this?
using viewbox in ResourceDictionary file has an answer that lets you change the ViewBox to DataTemplate in the ResourceDictionary and then use a converter to display it as a button's ContentTemplate. That is ok for Button based stuff, but what if I just need the icon itself. How do I go from ViewBox in a resource dictionary to somehow including it in lets say a grid in XAML?

You can use it as Content for any ContentControl Directly,in case if you just want the icon in Grid,try like below,
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Viewbox x:Key="error">
<Grid Width="64" Height="64" Visibility="Visible">
<Grid Visibility="Visible">
<Rectangle Fill="#FFD21818" Visibility="Visible" />
<Ellipse Fill="#FFD21818" Visibility="Collapsed" />
<Path Data="M50.5,4.7500001C25.232973,4.75 4.75,25.232973 4.7500001,50.5 4.75,75.767029 25.232973,96.25 50.5,96.25 75.767029,96.25 96.25,75.767029 96.25,50.5 96.25,25.232973 75.767029,4.75 50.5,4.7500001z M50.5,0C78.390381,0 101,22.609621 101,50.5 101,78.390381 78.390381,101 50.5,101 22.609621,101 0,78.390381 0,50.5 0,22.609621 22.609621,0 50.5,0z" Stretch="Fill" Fill="#FFD21818" Visibility="Collapsed" />
</Grid>
<Path Data="F1M54.0573,47.8776L38.1771,31.9974 54.0547,16.1198C55.7604,14.4141 55.7604,11.6511 54.0573,9.94531 52.3516,8.23962 49.5859,8.23962 47.8802,9.94531L32.0026,25.8229 16.1224,9.94531C14.4167,8.23962 11.6511,8.23962 9.94794,9.94531 8.24219,11.6511 8.24219,14.4141 9.94794,16.1198L25.8255,32 9.94794,47.8776C8.24219,49.5834 8.24219,52.3477 9.94794,54.0534 11.6511,55.7572 14.4167,55.7585 16.1224,54.0534L32.0026,38.1745 47.8802,54.0534C49.5859,55.7585 52.3516,55.7572 54.0573,54.0534 55.7604,52.3477 55.763,49.5834 54.0573,47.8776z" Stretch="Uniform" Fill="#FFFFFFFF" Width="36" Height="36" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<TransformGroup>
<TransformGroup.Children>
<RotateTransform Angle="0" />
<ScaleTransform ScaleX="1" ScaleY="1" />
</TransformGroup.Children>
</TransformGroup>
</Path.RenderTransform>
</Path>
</Grid>
</Viewbox>
</ResourceDictionary>
<Grid>
<ContentControl Content="{StaticResource error}"/>
</Grid>
if you are intend to use the same resource in multiple location,please set x:Shared attribute as false as below,
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Viewbox x:shared="false" x:Key="error">
.......
</Viewbox>
</ResourceDictionary>

I did a similar thing in one of my projects using Syncfusion Metro Studio. I found wrapping the image in a ViewBox caused a number of annoyances. I ended up using the image alone, and then embedded it into a Path where I wanted to use the image.
I found it a lot more flexible than trying to squeeze a ViewBox into xaml.
How I did it:
There is a type Geometry, which allows you to define a Bezier path as a resource:
<Geometry x:Key="Keyboard">M48.537998,24.254L57.365002,24.254 57.365002,30.875 48.537998,30.875z M17.642,24.254L46.332001,24.254 46.332001,30.875 17.642,30.875z M6.6760006,24.254L15.504,24.254 15.504,30.875 6.6760006,30.875z M50.744999,15.426L57.365002,15.426 57.365002,22.047001 50.744999,22.047001z M41.986,15.426L48.606998,15.426 48.606998,22.047001 41.986,22.047001z M33.09,15.426L39.709999,15.426 39.709999,22.047001 33.09,22.047001z M24.261999,15.426L30.882999,15.426 30.882999,22.047001 24.261999,22.047001z M15.435,15.426L22.056,15.426 22.056,22.047001 15.435,22.047001z M6.6070004,15.426L13.229,15.426 13.229,22.047001 6.6070004,22.047001z M50.744999,6.599L57.365002,6.599 57.365002,13.219 50.744999,13.219z M41.986,6.599L48.606998,6.599 48.606998,13.219 41.986,13.219z M33.09,6.599L39.709999,6.599 39.709999,13.219 33.09,13.219z M24.261999,6.599L30.882999,6.599 30.882999,13.219 24.261999,13.219z M15.435,6.599L22.056,6.599 22.056,13.219 15.435,13.219z M6.6070004,6.599L13.229,6.599 13.229,13.219 6.6070004,13.219z M4.47015,4.4635506L4.47015,33.242199 59.6413,33.242199 59.6413,4.4635506z M1.3333101,0L62.666698,0C63.403,0,64,0.59634399,64,1.3333397L64,36.166698C64,36.903702,63.403,37.5,62.666698,37.5L1.3333101,37.5C0.59704602,37.5,0,36.903702,0,36.166698L0,1.3333397C0,0.59634399,0.59704602,0,1.3333101,0z</Geometry>
Once you have a geometry resource you can use it in Path.Data. In this example the border is the bounds of the image 32x32 pixels. Then you can use the Border and use it in a Grid as you would with any other control.
<Border Width="32" Height="32">
<Path Data="{StaticResource Keyboard}" Fill="White" Stretch="Uniform" RenderTransformOrigin="0.5, 0.5">
</Path>
</Border>
This technique also allows you to bind the properties as needed. I.e. Fill to a color, and have it change dynamically.

Simply import the output from Metro Studio into Expression Blend
-> Design View
Select icon and click 'Tools' -> Make Brush Resource -> MakeDrawingBrush
Then Blend will convert the icon for use anywhere in your app

Multiple charts Styling - individual Color

I've got this BubbleChart where I wanted to add an individual Style to show a ToolTip. As I did this, the ToolTip was there and everything was fine until I added a second Series - now the former color setup (each series a different color) was gone and each Series had the same color. Does someone knowshow to bind on the default color of the series?
I tried a Template Binding but it won't work.
<Style x:Key="BubbleToolTipTemplate" TargetType="{x:Type c:BubbleDataPoint}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="c:BubbleDataPoint">
<Grid RenderTransformOrigin=".5,.5">
<Grid.RenderTransform>
<ScaleTransform ScaleX=".75" ScaleY=".75" />
</Grid.RenderTransform>
<!-- This Ellipse should bind on the default color -->
<Ellipse Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" />
<ContentPresenter Content="{TemplateBinding Size}" HorizontalAlignment="Center" VerticalAlignment="Center" />
<ToolTipService.ToolTip>
<StackPanel>
<ContentControl Content ="{ TemplateBinding DependentValue, Converter={StaticResource DoubleToStringConverter}}" />
<ContentControl Content ="{ TemplateBinding IndependentValue}"/>
<ContentControl Content ="{ TemplateBinding Size }" />
</StackPanel>
</ToolTipService.ToolTip>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Maybe someone handled this before! Any help is appreciated!

Ok I've found a solution!
In the Background there is the generic.xaml where you can find the default Style of the Bubbledatapoint (You can find this here ).
As i read through this if found the Palette resource. Later i tried to bind on those colours until i found the trick!
Just set the fill property of the ellipse to {DynamicResource Background}" !

Outer Glow Effect and rotation On A Label in WPF

I need to create an outer glow effect on a label and make it rotate a little (by about 20 degrees). I'm using the following code, but it's not working the way I want it to:
<Label Height="106" Margin="80,57,36,0" Name="lblHeading" FontSize="35">
Brian's 15th Birthday Party
<Label.Effect>
<DropShadowEffect BlurRadius="100" ShadowDepth="0" Opacity="1"
Color="White"/>
</Label.Effect>
</Label>
Is it possible to add some text somewhere in the Window and add an outer glow effect and rotation to it? It would be great if anyone can help me out with adding the same effect on a label or any other way to do so without using a label control.
I tried the following, too, but it's not helping. Maybe I don't know how to use it because it's just causing an error:
<OuterGlowBitmapEffect GlowColor="Blue" GlowSize="30" Noise="1" Opacity="0.4" />

You'll probably want to use a smaller BlurRadius, setting it to 100 will make the effect close to invisible. I suggest 10.
Set the RenderTransformOrigin to the point you want the text to rotate around (0.5, 0.5 means rotate around the center).
Add a RotateTransform inside Label.RenderTransform.
The complete code should look close to this:
<Label Height="106" Margin="80,57,36,0" Name="lblHeading" FontSize="35"
RenderTransformOrigin="0.5, 0.5">
Brian's 15th Birthday Party
<Label.Effect>
<DropShadowEffect BlurRadius="10" ShadowDepth="0" Opacity="1"
Color="White"/>
</Label.Effect>
<Label.RenderTransform>
<RotateTransform Angle="20"/>
</Label.RenderTransform>
</Label>

This is how you can rotate your label:
<Label>
<Label.LayoutTransform>
<RotateTransform Angle="20"/>
</Label.LayoutTransform>
  <Label.Content>text</Label.Content>
</Label>

This can be done through modification in ControlTemplate.
The key point is using two ContentPresenter to display your text, and attach BlurEffect to one ContentPresenter.
The code:
<Label Content="TestContent" Foreground="White" FontSize="20">
<Label.Template>
<ControlTemplate TargetType="Label">
<Border>
<Grid>
<ContentPresenter TextBlock.Foreground="{TemplateBinding Foreground}"/>
<ContentPresenter TextBlock.Foreground="{TemplateBinding Foreground}">
<ContentPresenter.Effect>
<BlurEffect Radius="5"/>
</ContentPresenter.Effect>
</ContentPresenter>
</Grid>
</Border>
</ControlTemplate>
</Label.Template>
</Label>
How it looks

One-sided rounded buttons in Silverlight

I want to make a collection of buttons in silverlight.
They are in a collection that goes from left to right and the buttons are lined up so that they are touching on the left and right sides.
Here is the rub:
The collection has rounded corners but the buttons in between the end buttons in the collection do not have rounded ends. So basically, for the buttons on the far left and right side of the collection, they have to be somewhat special because they have to have one flat vertical side and one rounded side. Is this possible to do in silverlight without resorting to making a special bitmap for the end buttons?
One idea I have is somehow declare a canvas with a bitmap background and then have overlapping ellipse and rectangle
<Canvas Height="100" HorizontalAlignment="Left" Margin="189,381,0,0" VerticalAlignment="Top" Width="200" Background="Black">
<Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Stroke="Black" Width="58" Height="61" Canvas.Left="7" Canvas.Top="16" />
<Ellipse Fill="#FFF4F4F5" HorizontalAlignment="Left" Stroke="White" Width="65" StrokeThickness="0" Height="59" Canvas.Left="31" Canvas.Top="17" />
</Canvas>

Here is a simple example of the effect you are trying to achieve that utilizes custom ControlTemplate to skin the buttons in three ways:
<Grid HorizontalAlignment="Center">
<Grid.Resources>
<Style x:Key="ButtonLeftStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="DarkGray" CornerRadius="10,0,0,10">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ButtonCenterStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="DarkGray" CornerRadius="0,0,0,0">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ButtonRightStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="DarkGray" CornerRadius="0,10,10,0">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<StackPanel Orientation="Horizontal">
<Button Width="75" Height="25" Style="{StaticResource ButtonLeftStyle}" Content="Left"/>
<Rectangle Width="2"/>
<Button Width="75" Height="25" Style="{StaticResource ButtonCenterStyle}" Content="Center"/>
<Rectangle Width="2"/>
<Button Width="75" Height="25" Style="{StaticResource ButtonRightStyle}" Content="Right"/>
</StackPanel>
</Grid>
And this looks like:
There's a lot more you can do here but this shows an approach you can use. Here's a great blog article with more information and examples of this technique:
Silverlight Tutorial Part 7: Using Control Templates to Customize a Control's Look and Feel

I solved the problem by using a visual trick. First of all, my trick required I placed the buttons on an image that would represent the background. The buttons were somewhat transparent so the color of this background came through
The buttons in the middle be simple rectangle canvas classes. While the end buttons had rounded ends.
The middle buttons were in front of the buttons on the end and they overlapped them.
The buttons were transparent and so normally it would not work because you would be able to see the end buttons edges behind the middle buttons. I solved this by putting a rectangle filled with the color of the background image "between" (think in 3D layered depth terms) the end buttons and the rectangle shapped buttons in front of it. The colored rectangles only were positioned in front of the end buttons that were behind the rectangle buttons in front of them.
This was kind of a hack but it worked. When I have time, I will try the solutions suggested here.

Yeah, even simpler, based on Rick'S, as you just want to use the styles to address the rounded corners of your button template border:
<Grid HorizontalAlignment="Center">
<Grid.Resources>
<!-- Default Template -->
<ControlTemplate TargetType="Button">
<Border x:Name="Border" Background="DarkGray" CornerRadius="0">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
<!-- Custom Styles for edges -->
<Style x:Key="ButtonLeftStyle" TargetType="Button">
<Setter Property="CornerRadius" Value="10,0,0,10" TargetName="Border"/>
</Style>
<Style x:Key="ButtonRightStyle" TargetType="Button">
<Setter Property="CornerRadius" Value="0,10,10,0" TargetName="Border"/>
</Style>
</Grid.Resources>
<StackPanel Orientation="Horizontal">
<Button Width="75" Height="25" Style="{StaticResource ButtonLeftStyle}" Content="Left"/>
<Rectangle Width="2"/>
<Button Width="75" Height="25" Content="Center"/>
<Rectangle Width="2"/>
<Button Width="75" Height="25" Style="{StaticResource ButtonRightStyle}" Content="Right"/>
</StackPanel>