圆角网格角以匹配窗口圆角

Question

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.

Answer 1

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.

Answer 2

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>

Answer 3

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>

Answer 4

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.