How to create such an effect on wpf

Hold on.

To begin with, the contour with the glow effect is repeated here, so we will single out a separate control for it. We have two input parameters: color (you can use Foreground ) and a radius of rounding, for which we will set a special Dependency Property.

It turns out this UserControl :

 public partial class GlowFrame : UserControl { public GlowFrame() { InitializeComponent(); } public CornerRadius CornerRadius { get { return (CornerRadius)GetValue(CornerRadiusProperty); } set { SetValue(CornerRadiusProperty, value); } } public static readonly DependencyProperty CornerRadiusProperty = DependencyProperty.Register("CornerRadius", typeof(CornerRadius), typeof(GlowFrame)); } 

Now XAML. We see two boundaries in the figure: external, more blurred, and internal. In addition, we need to select areas at an angle of 30 degrees so that a more powerful glow is.

To select areas use OpacityMask . To use LinearGradientBrush as BorderBrush would not work, BorderBrush our color is set outside, but the geometry of the glow is the same. Then, to attach the direction of the gradient OpacityMask to the corners is wrong, because the angle will change depending on the proportions of the control. Therefore, we set the direction of the gradient vertically, and turn it by an angle.

For borders use two Border 's with different blur-blur.

Total:

 <UserControl x:Class="Test.GlowFrame" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:Test"> <UserControl.Resources> <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5" x:Key="OpacityMask"> <LinearGradientBrush.Transform> <RotateTransform CenterX="0.5" CenterY="0.5" Angle="30" /> </LinearGradientBrush.Transform> <GradientStop Color="#7F000000" Offset="0"/> <GradientStop Color="#7F000000" Offset="0.4"/> <GradientStop Color="#FF000000" Offset="0.5"/> <GradientStop Color="#7F000000" Offset="0.6"/> <GradientStop Color="#7F000000" Offset="1"/> </LinearGradientBrush> </UserControl.Resources> <Grid DataContext="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=UserControl}}"> <Border CornerRadius="{Binding CornerRadius}" BorderBrush="{Binding Foreground}" BorderThickness="10" OpacityMask="{StaticResource OpacityMask}"> <Border.Effect> <BlurEffect Radius="15" /> </Border.Effect> </Border> <Border CornerRadius="{Binding CornerRadius}" BorderBrush="{Binding Foreground}" BorderThickness="3" Margin="3.5" OpacityMask="{StaticResource OpacityMask}"> <Border.Effect> <BlurEffect Radius="2.5" /> </Border.Effect> </Border> </Grid> </UserControl> 

With this, it is easy to make a "table" markup.

 <Window x:Class="Test.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:Test" Title="Тест" Height="400" Width="600"> <Grid Background="Black"> <Grid Margin="30" TextBlock.FontSize="20"> <Grid.RowDefinitions> <RowDefinition Height="20"/> <RowDefinition Height="*"/> <RowDefinition Height="20"/> <RowDefinition Height="*"/> <RowDefinition Height="20"/> <RowDefinition Height="1.5*"/> <RowDefinition Height="20"/> </Grid.RowDefinitions> <local:GlowFrame Foreground="Cyan" CornerRadius="15" Grid.RowSpan="7"/> <Grid Grid.Row="1" Margin="20,0"> <local:GlowFrame Foreground="Violet" CornerRadius="8"/> <TextBlock Text="Username" Foreground="Violet" Margin="20,0" VerticalAlignment="Center"/> </Grid> <Grid Grid.Row="3" Margin="20,0"> <local:GlowFrame Foreground="Violet" CornerRadius="8"/> <TextBlock Text="Password" Foreground="Violet" Margin="20,0" VerticalAlignment="Center"/> </Grid> <Grid Grid.Row="5" Margin="20,0"> <local:GlowFrame Foreground="Red" CornerRadius="8"/> <TextBlock Text="LOGIN" Foreground="Red" Margin="20,0" VerticalAlignment="Center" HorizontalAlignment="Center"/> </Grid> </Grid> </Grid> </Window> 

Result:

Pick the exact dimensions and proportions (and also on you styling TextBox 's and buttons).