CODEWITHSUNDEEP
c#wpf
Tsukasa
Tsukasa

Reputation: 6562

Rounded Grid corners to match Window rounded corners

I have a WPF window with rounded corners

<Window x:Name="windowPortal" x:Class="ICS2GO.PortalWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Portal" Height="301" Width="489" Icon="/Resources/icon.ico" 
    WindowStyle="None" WindowStartupLocation="CenterScreen" ResizeMode="NoResize" Closing="Window_Closing" Background="Transparent" AllowsTransparency="True">

<Border Name="windowBorder" BorderThickness="2" BorderBrush="DarkBlue" 
    CornerRadius="20" Background="LightBlue" Margin="0,0,0,0">

    <Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
        //main controls, buttons, images ...etc here

        <Grid x:Name="gdWait" >
            <Grid Background="Black" Opacity="0.5"/>
            <Label x:Name="lblStatus" Content="Please Wait" 
                HorizontalAlignment="Center" HorizontalContentAlignment="Center" 
                VerticalContentAlignment="Center"  VerticalAlignment="Center" 
                FontWeight="Bold" Foreground="Red" FontSize="24" Margin="28,51,28,62" 
                Height="72" Width="410"/>

            <ProgressBar x:Name="pbWaiting" HorizontalAlignment="Left" Height="30"
                Margin="110,108,0,0" VerticalAlignment="Top" Width="243"
                IsIndeterminate="True" Orientation="Horizontal"/>
        </Grid>
   </Grid>

Grid x:Name="gbWait" is displayed over all main controls with a black background and opacity set as to allow some visablility of the main controls but alway renders them unclickable by the user

I would like to make Grid gbWait's corners rounded as well so it matches with the Window's rounded corners. Currently they are square and extend passed the window corner where it is normal square.

Upvotes: 1

Views: 860

Answers (4)

Heena
Heena

Reputation: 8654

Try this 

<Window x:Class="WpfApplication2.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"       
    xmlns:hp="clr-namespace:WpfApplication2"
    Title="Portal" Height="301" Width="489" Template="{DynamicResource WindowTemplate}"   WindowStyle="None" WindowStartupLocation="CenterScreen"  ResizeMode="NoResize"  Background="Transparent" AllowsTransparency="True">
<Window.Resources>
    <ControlTemplate x:Key="WindowTemplate">
        <Border BorderBrush="DarkBlue" Background="LightBlue" BorderThickness="2" Margin="5" CornerRadius="20">
            <Border BorderBrush="DarkBlue" Background="#576C73" Margin="5" BorderThickness="2"  CornerRadius="20">
                <Grid VerticalAlignment="Stretch" Background="#576C73" HorizontalAlignment="Stretch" Margin="5">
                    <Grid x:Name="gdWait" Margin="5" Background="#576C73" >
                        <Grid Background="#576C73"/>
                        <Label x:Name="lblStatus" Content="Please Wait"  HorizontalAlignment="Center" HorizontalContentAlignment="Center"  VerticalContentAlignment="Center"  VerticalAlignment="Center" FontWeight="Bold" Foreground="Red" FontSize="24" Margin="28,0,28,62" Height="72" Width="410"/>
                        <ProgressBar x:Name="pbWaiting" HorizontalAlignment="Left" Height="30"  Margin="110,108,0,0" VerticalAlignment="Top" Width="243"  IsIndeterminate="True" Orientation="Horizontal"/>
                    </Grid>
                </Grid>
            </Border>
        </Border>
    </ControlTemplate>
</Window.Resources>

i have changed the window template ..and it is working on different size of window.. sorry if i am wrong to your requirement.

Upvotes: 0

Boopesh
Boopesh

Reputation: 404

Use the Clip property of the Border as follows to achieve your requirement.

  <Border Name="windowBorder" BorderThickness="2" BorderBrush="DarkBlue" 
        CornerRadius="20" Background="LightBlue" Margin="0,0,0,0">
        <Border.Clip>
            <RectangleGeometry RadiusX="20" RadiusY="20" Rect="0,0,489,301" >
            </RectangleGeometry>
        </Border.Clip>      
       <Grid></Grid>    
  </Border>

This solution assumes your windows size is 489 x 301 and it is not resizable. If you need solution for resizable window then use converter to calculate the Rect values of RectangleGeometry.

Upvotes: 3

Grant Winney
Grant Winney

Reputation: 66489

I think this might be a good candidate for a converter.

Place this piece of code in your code-behind, or a separate file if you want:

public class VisibilityToBrushConverter : IValueConverter
{
    public object Convert(object value, Type targetType,
        object parameter, CultureInfo culture)
    {
        var visible = (Visibility)value;

        return visible == Visibility.Visible
            ? new SolidColorBrush(System.Windows.Media.Color.FromRgb(70, 130, 180))
            : new SolidColorBrush(System.Windows.Media.Color.FromRgb(173, 216, 230));
    }

    public object ConvertBack(object value, Type targetType,
        object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Then reference it in your XAML (remove <Grid Background="Black" Opacity="0.5"/>):

<Window.Resources>
    <l:VisibilityToBrushConverter x:Key="converter" />
</Window.Resources>
<Grid>
    <Border Name="windowBorder" BorderThickness="2" BorderBrush="SteelBlue" CornerRadius="20"
            Background="{Binding ElementName=gdWait, Path=Visibility, Converter={StaticResource converter}}" Margin="0,0,0,0">
        <Grid x:Name="gdWait" Visibility="Visible">
            <Label x:Name="lblStatus" Content="Please Wait" HorizontalAlignment="Center" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"  VerticalAlignment="Center" FontWeight="Bold" Foreground="Red" FontSize="24" Margin="28,51,28,62" Height="72" Width="410"/>
            <ProgressBar x:Name="pbWaiting" HorizontalAlignment="Left" Height="30" Margin="110,108,0,0" VerticalAlignment="Top" Width="243" IsIndeterminate="True" Orientation="Horizontal"/>
        </Grid>
    </Border>
</Grid>

Upvotes: 1

seddik
seddik

Reputation: 646

I suggest that you make a rounded border with paddings, and with same background as your Grid

<Border CornerRadius="10" Padding="10" Background=Black>
<Grid x:Name="gdWait" Visibility="Collapsed">
<Grid Background="Black" Opacity="0.5"/>
    <Label x:Name="lblStatus" Content="Please Wait" HorizontalAlignment="Center" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"  VerticalAlignment="Center" FontWeight="Bold" Foreground="Red" FontSize="24" Margin="28,51,28,62" Height="72" Width="410"/>
    <ProgressBar x:Name="pbWaiting" HorizontalAlignment="Left" Height="30" Margin="110,108,0,0" VerticalAlignment="Top" Width="243" IsIndeterminate="True" Orientation="Horizontal"/>
</Grid>
</Border>

Upvotes: 0

Related Questions