AllowsTransparency="True" Background="Transparent" WindowStyle="None"
To the Window Tag.
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525" AllowsTransparency="True" Background="Transparent" WindowStyle="None">
<Grid>
</Grid>
</Window>
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525" AllowsTransparency="True" Background="Transparent" WindowStyle="None">
<Grid>
<Border CornerRadius="20">
<Border.Background>
<LinearGradientBrush>
</LinearGradientBrush>
</Border.Background>
</Border>
</Grid>
</Window>
<GradientStop Offset="0" Color="Gray"/>
As you can think offset is the distance from the start point. You can put any value in it. 0 means at the start point, 1 at the end point. And Color is just any color you like
<LinearGradientBrush>
Tag to
<LinearGradientBrush StartPoint="1,1" EndPoint="0,0">
Play a bit around with the values for StartPoint and EndPoint, until you think it looks good.
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525" AllowsTransparency="True" Background="Transparent" WindowStyle="None">
<Grid>
<Border CornerRadius="20">
<Border.Background>
<LinearGradientBrush StartPoint="0.5,1" EndPoint="1,0.5">
<GradientStop Offset="0" Color="White"/>
<GradientStop Offset="0.1" Color="Black"/>
<GradientStop Offset="0.2" Color="White"/>
<GradientStop Offset="0.3" Color="Black"/>
<GradientStop Offset="0.4" Color="White"/>
<GradientStop Offset="0.5" Color="Black"/>
<GradientStop Offset="0.6" Color="White"/>
<GradientStop Offset="0.7" Color="Black"/>
<GradientStop Offset="0.8" Color="White"/>
<GradientStop Offset="0.9" Color="Black"/>
<GradientStop Offset="1" Color="White"/>
</LinearGradientBrush>
</Border.Background>
</Border>
</Grid>
</Window>
<Border.BitmapEffect>
<DropShadowBitmapEffect Color="Black" Opacity="1" Direction="50" Softness="0.5" ShadowDepth="10" />
</Border.BitmapEffect>
<Border CornerRadius="20" Margin="20">
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525" AllowsTransparency="True" Background="Transparent" WindowStyle="None">
<Grid>
<Border CornerRadius="20" Margin="20">
<Border.Background>
<LinearGradientBrush StartPoint="0.5,1" EndPoint="1,0.5">
<GradientStop Offset="0" Color="White"/>
<GradientStop Offset="0.1" Color="Black"/>
<GradientStop Offset="0.2" Color="White"/>
<GradientStop Offset="0.3" Color="Black"/>
<GradientStop Offset="0.4" Color="White"/>
<GradientStop Offset="0.5" Color="Black"/>
<GradientStop Offset="0.6" Color="White"/>
<GradientStop Offset="0.7" Color="Black"/>
<GradientStop Offset="0.8" Color="White"/>
<GradientStop Offset="0.9" Color="Black"/>
<GradientStop Offset="1" Color="White"/>
</LinearGradientBrush>
</Border.Background>
<Border.BitmapEffect>
<DropShadowBitmapEffect Color="Black" Opacity="1" Direction="50" Softness="0.5" ShadowDepth="10" />
</Border.BitmapEffect>
</Border>
</Grid>
</Window>
<Grid>
<Grid.RowDefinitions>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
</Grid.ColumnDefinitions>
</Grid>
Now add as many <RowDefinition Height="*" /> and <ColumnDefinition Width="*" /> Tags inside the <Grid.RowDefinitions> or <Grid.ColumnDefinitions> With and hight are set in pixels. You can use * or 2*, 3*, 1.5* ...for it too, to automatically control the width/height.
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525" AllowsTransparency="True" Background="Transparent" WindowStyle="None">
<Grid>
<Border CornerRadius="20" Margin="20">
<Border.Background>
<LinearGradientBrush StartPoint="0.5,1" EndPoint="1,0.5">
<GradientStop Offset="0" Color="White"/>
<GradientStop Offset="0.1" Color="Black"/>
<GradientStop Offset="0.2" Color="White"/>
<GradientStop Offset="0.3" Color="Black"/>
<GradientStop Offset="0.4" Color="White"/>
<GradientStop Offset="0.5" Color="Black"/>
<GradientStop Offset="0.6" Color="White"/>
<GradientStop Offset="0.7" Color="Black"/>
<GradientStop Offset="0.8" Color="White"/>
<GradientStop Offset="0.9" Color="Black"/>
<GradientStop Offset="1" Color="White"/>
</LinearGradientBrush>
</Border.Background>
<Border.BitmapEffect>
<DropShadowBitmapEffect Color="Black" Opacity="1" Direction="50" Softness="0.5" ShadowDepth="10" />
</Border.BitmapEffect>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="*" />
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="75" />
</Grid.ColumnDefinitions>
</Grid>
</Border>
</Grid>
</Window>
<Image Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="0" Grid.RowSpan="1" Source="anypicture.png />
<Label Grid.Column="1" Grid.ColumnSpan="1" Grid.Row="0" Grid.RowSpan="1" FontFamily="Arial" FontSize="12" Foreground="Black" >My Text</Label>
<Button Grid.Column="2" Grid.ColumnSpan="1" Grid.Row="0" Grid.RowSpan="1" Background="Black" Content="_" Foreground="White" />
<Button Grid.Column="3" Grid.ColumnSpan="1" Grid.Row="0" Grid.RowSpan="1" Background="Black" Content="¦" Foreground="White" />
<Button Grid.Column="4" Grid.ColumnSpan="1" Grid.Row="0" Grid.RowSpan="1" Background="Black" Content="X" Foreground="White" />
Explanation:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525" AllowsTransparency="True" Background="Transparent" WindowStyle="None">
<Grid>
<Border CornerRadius="20" Margin="20">
<Border.Background>
<LinearGradientBrush StartPoint="0.5,1" EndPoint="1,0.5">
<GradientStop Offset="0" Color="White"/>
<GradientStop Offset="0.1" Color="Black"/>
<GradientStop Offset="0.2" Color="White"/>
<GradientStop Offset="0.3" Color="Black"/>
<GradientStop Offset="0.4" Color="White"/>
<GradientStop Offset="0.5" Color="Black"/>
<GradientStop Offset="0.6" Color="White"/>
<GradientStop Offset="0.7" Color="Black"/>
<GradientStop Offset="0.8" Color="White"/>
<GradientStop Offset="0.9" Color="Black"/>
<GradientStop Offset="1" Color="White"/>
</LinearGradientBrush>
</Border.Background>
<Border.BitmapEffect>
<DropShadowBitmapEffect Color="Black" Opacity="1" Direction="50" Softness="0.5" ShadowDepth="10" />
</Border.BitmapEffect>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="*" />
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="75" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="0" Grid.RowSpan="1" />
<Label Grid.Column="1" Grid.ColumnSpan="1" Grid.Row="0" Grid.RowSpan="1" FontFamily="Arial" FontSize="12" Foreground="Black" >My Text</Label>
<Button Grid.Column="2" Grid.ColumnSpan="1" Grid.Row="0" Grid.RowSpan="1" Background="Black" Content="_" Foreground="White" />
<Button Grid.Column="3" Grid.ColumnSpan="1" Grid.Row="0" Grid.RowSpan="1" Background="Black" Content="¦" Foreground="White" />
<Button Grid.Column="4" Grid.ColumnSpan="1" Grid.Row="0" Grid.RowSpan="1" Background="Black" Content="X" Foreground="White" />
</Grid>
</Border>
</Grid>
</Window>
Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.
Comments (0)