asked on

Rounded corner form in WPF

Hallo Experts,

I am using the following code for a WPF form. I need to round the corner at a radius 10. I am trying this code to achieve that

<Window x:Class="Signature_Error_Monitor.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Signature Q Error Description" Visibility="Hidden" ShowInTaskbar="False" Loaded="Window_Loaded" Topmost="True" WindowStyle="None" ResizeMode="NoResize" SizeToContent="WidthAndHeight">
<Window.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#B900C9FF" Offset="0" />
<GradientStop Color="White" Offset="0.64" />
</LinearGradientBrush>
</Window.Background>
<Grid Height="140">
<Border CornerRadius="10" BorderBrush="White" BorderThickness="2" />
<TextBox Height="25" HorizontalAlignment="Left" Margin="0,0,0,0" Name="tbDocNo" VerticalAlignment="Top" Width="190" Background="{x:Null}" BorderThickness="0" IsEnabled="True" IsReadOnly="True" Foreground="Blue" />
<TextBlock Height="75" HorizontalAlignment="Left" Margin="0,25,0,0" Name="tbErrorDesc" Text="" VerticalAlignment="Top" Width="190" TextWrapping="Wrap" Foreground="Red" />
<Button Content="Close" Height="22" Name="btClose" Width="55" Click="btClose_Click" Margin="130,100,0,0">
<Button.Effect>
<DropShadowEffect Color="LightBlue" BlurRadius="10" ShadowDepth="10" />
</Button.Effect>
</Button>
<Button Content="Refresh" Height="22" Name="btRefresh" Width="55" Margin="0,100,0,0" Click="btRefresh_Click">
<Button.Effect>
<DropShadowEffect Color="LightBlue" BlurRadius="10" ShadowDepth="10" />
</Button.Effect>
</Button>
<Button Content="Quit" Height="22" Name="btQuit" Width="55" Click="btQuit_Click" Margin="0,100,130,0">
<Button.Effect>
<DropShadowEffect Color="LightBlue" BlurRadius="10" ShadowDepth="10" />
</Button.Effect>
</Button>
</Grid>
</Window>

Border is comming with a rounded corner. But window rectangular corner is visible along with the rounder border. how to hide the corner?

please help

Soumen

<Window x:Class="Signature_Error_Monitor.MainWindow"  
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
        Title="Signature Q Error Description" Visibility="Hidden" ShowInTaskbar="False" Loaded="Window_Loaded" Topmost="True" WindowStyle="None" ResizeMode="CanResizeWithGrip" SizeToContent="WidthAndHeight">
    <Window.Background>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#B900C9FF" Offset="0" />
            <GradientStop Color="White" Offset="0.64" />
        </LinearGradientBrush>
    </Window.Background>
    <Grid Height="140">
        <TextBox Height="25" HorizontalAlignment="Left" Margin="0,0,0,0" Name="tbDocNo" VerticalAlignment="Top" Width="190" Background="{x:Null}" BorderThickness="0" IsEnabled="True" IsReadOnly="True" Foreground="Blue" />
        <TextBlock Height="75" HorizontalAlignment="Left" Margin="0,25,0,0" Name="tbErrorDesc" Text="" VerticalAlignment="Top" Width="190" TextWrapping="Wrap" Foreground="Red" />
        <Button Content="Close" Height="22" Name="btClose" Width="55" Click="btClose_Click" Margin="130,100,0,0">
            <Button.Effect>
                <DropShadowEffect Color="LightBlue" BlurRadius="10" ShadowDepth="10" />
            </Button.Effect>
        </Button>
        <Button Content="Refresh" Height="22" Name="btRefresh" Width="55" Margin="0,100,0,0" Click="btRefresh_Click">
            <Button.Effect>
                <DropShadowEffect Color="LightBlue" BlurRadius="10" ShadowDepth="10" />
            </Button.Effect>
        </Button>
        <Button Content="Quit" Height="22" Name="btQuit" Width="55" Click="btQuit_Click" Margin="0,100,130,0">
            <Button.Effect>
                <DropShadowEffect Color="LightBlue" BlurRadius="10" ShadowDepth="10" />
            </Button.Effect>
        </Button>
    </Grid>
</Window>

Open in new window

SOLUTION

nishant joshi

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER CERTIFIED SOLUTION

Snarf0001

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Soumen-Roy

ASKER

nishantcomp2512:

as per your suggestion i am now using the following xaml, still background corner is visible

Soumen

<Window x:Class="Signature_Error_Monitor.MainWindow"  
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
        Title="Signature Q Error Description" Visibility="Hidden" ShowInTaskbar="False" Loaded="Window_Loaded" Topmost="True" WindowStyle="None" ResizeMode="NoResize"  SizeToContent="WidthAndHeight">
    <Window.Background>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#B900C9FF" Offset="0" />
            <GradientStop Color="White" Offset="0.64" />
        </LinearGradientBrush>
    </Window.Background>
    <Border Name="mask" CornerRadius="10" BorderBrush="White" BorderThickness="2">
        <Grid Height="140">
            <Grid.OpacityMask>
            <VisualBrush Visual="{Binding ElementName=mask}" />
        </Grid.OpacityMask>
            <Grid.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#B900C9FF" Offset="0" />
                    <GradientStop Color="White" Offset="0.64" />
                </LinearGradientBrush>
            </Grid.Background>
            <TextBox Height="25" HorizontalAlignment="Left" Margin="0,0,0,0" Name="tbDocNo" VerticalAlignment="Top" Width="190" Background="{x:Null}" BorderThickness="0" IsEnabled="True" IsReadOnly="True" Foreground="Blue" />
            <TextBlock Height="75" HorizontalAlignment="Left" Margin="0,25,0,0" Name="tbErrorDesc" Text="" VerticalAlignment="Top" Width="190" TextWrapping="Wrap" Foreground="Red" />
            <Button Content="Close" Height="22" Name="btClose" Width="55" Click="btClose_Click" Margin="130,100,0,0">
                <Button.Effect>
                    <DropShadowEffect Color="LightBlue" BlurRadius="10" ShadowDepth="10" />
                </Button.Effect>
            </Button>
            <Button Content="Refresh" Height="22" Name="btRefresh" Width="55" Margin="0,100,0,0" Click="btRefresh_Click">
                <Button.Effect>
                    <DropShadowEffect Color="LightBlue" BlurRadius="10" ShadowDepth="10" />
                </Button.Effect>
            </Button>
            <Button Content="Quit" Height="22" Name="btQuit" Width="55" Click="btQuit_Click" Margin="0,100,130,0">
                <Button.Effect>
                    <DropShadowEffect Color="LightBlue" BlurRadius="10" ShadowDepth="10" />
                </Button.Effect>
            </Button>
        </Grid>
    </Border>
</Window>

Open in new window

Soumen-Roy

ASKER

Snarf0001:

Its working fine as you suggested. I am using the following code and its running. But the white border is visible as white patch, can't i make it like as the same as background gradiant fill? another thing is the grid corner is not rounded in the rounded corner borber, which looks odd. can it be fixed?

Thanx,
Soumen

<Window x:Class="Signature_Error_Monitor.MainWindow"  
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
        Title="Signature Q Error Description" Visibility="Hidden" ShowInTaskbar="False" Loaded="Window_Loaded" Topmost="True" WindowStyle="None" ResizeMode="NoResize"  SizeToContent="WidthAndHeight" AllowsTransparency="True" Background="Transparent">
    <Border CornerRadius="10" BorderBrush="White" BorderThickness="3">
        <Border.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#B900C9FF" Offset="0" />
                <GradientStop Color="White" Offset="0.64" />
            </LinearGradientBrush>
        </Border.Background>
        <Grid Height="140">
            <Grid.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#B900C9FF" Offset="0" />
                    <GradientStop Color="White" Offset="0.64" />
                </LinearGradientBrush>
            </Grid.Background>
            <TextBox Height="25" HorizontalAlignment="Left" Margin="0,0,0,0" Name="tbDocNo" VerticalAlignment="Top" Width="190" Background="{x:Null}" BorderThickness="0" IsEnabled="True" IsReadOnly="True" Foreground="Blue" />
            <TextBlock Height="75" HorizontalAlignment="Left" Margin="0,25,0,0" Name="tbErrorDesc" Text="" VerticalAlignment="Top" Width="190" TextWrapping="Wrap" Foreground="Red" />
            <Button Content="Close" Height="22" Name="btClose" Width="55" Click="btClose_Click" Margin="130,100,0,0">
                <Button.Effect>
                    <DropShadowEffect Color="LightBlue" BlurRadius="10" ShadowDepth="10" />
                </Button.Effect>
            </Button>
            <Button Content="Refresh" Height="22" Name="btRefresh" Width="55" Margin="0,100,0,0" Click="btRefresh_Click">
                <Button.Effect>
                    <DropShadowEffect Color="LightBlue" BlurRadius="10" ShadowDepth="10" />
                </Button.Effect>
            </Button>
            <Button Content="Quit" Height="22" Name="btQuit" Width="55" Click="btQuit_Click" Margin="0,100,130,0">
                <Button.Effect>
                    <DropShadowEffect Color="LightBlue" BlurRadius="10" ShadowDepth="10" />
                </Button.Effect>
            </Button>
        </Grid>
    </Border>
</Window>

Open in new window

Soumen-Roy

ASKER

Snarf0001:

Thanx, i changed the above code with the following and its working fine

<Window x:Class="Signature_Error_Monitor.MainWindow"  
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
        Title="Signature Q Error Description" Visibility="Hidden" ShowInTaskbar="False" Loaded="Window_Loaded" Topmost="True" WindowStyle="None" ResizeMode="NoResize"  SizeToContent="WidthAndHeight" AllowsTransparency="True" Background="Transparent">
    <Border CornerRadius="10" BorderBrush="White" BorderThickness="3">
        <Border.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#B900C9FF" Offset="0" />
                <GradientStop Color="White" Offset="0.64" />
            </LinearGradientBrush>
        </Border.Background>
        <Grid Height="140">            
            <TextBox Height="25" HorizontalAlignment="Left" Margin="0,0,0,0" Name="tbDocNo" VerticalAlignment="Top" Width="190" Background="{x:Null}" BorderThickness="0" IsEnabled="True" IsReadOnly="True" Foreground="Blue" />
            <TextBlock Height="75" HorizontalAlignment="Left" Margin="0,25,0,0" Name="tbErrorDesc" Text="" VerticalAlignment="Top" Width="190" TextWrapping="Wrap" Foreground="Red" />
            <Button Content="Close" Height="22" Name="btClose" Width="55" Click="btClose_Click" Margin="130,100,0,0">
                <Button.Effect>
                    <DropShadowEffect Color="LightBlue" BlurRadius="10" ShadowDepth="10" />
                </Button.Effect>
            </Button>
            <Button Content="Refresh" Height="22" Name="btRefresh" Width="55" Margin="0,100,0,0" Click="btRefresh_Click">
                <Button.Effect>
                    <DropShadowEffect Color="LightBlue" BlurRadius="10" ShadowDepth="10" />
                </Button.Effect>
            </Button>
            <Button Content="Quit" Height="22" Name="btQuit" Width="55" Click="btQuit_Click" Margin="0,100,130,0">
                <Button.Effect>
                    <DropShadowEffect Color="LightBlue" BlurRadius="10" ShadowDepth="10" />
                </Button.Effect>
            </Button>
        </Grid>
    </Border>
</Window>

Open in new window

Soumen-Roy

ASKER

Thanx Experts,

As usual you gave me terrific solution :-)