Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I make a rounded corner grid?

I tried and it sets a new border above the grid border:

<Window x:Class="Class.Window"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Width="379" Loaded="Window_Loaded"
        AllowsTransparency="True"
        ResizeMode="NoResize" ShowInTaskbar="False" Topmost="True" WindowStyle="None" Height="110">    
    <Border BorderBrush="Black" BorderThickness="1,1,1,1" CornerRadius="30,30,30,30">
        <Grid>
            <TextBlock Height="23" HorizontalAlignment="Left" Margin="62,12,0,0" Name="textBlock_From" Text="" VerticalAlignment="Top" Width="283" />
            <TextBlock Height="23" HorizontalAlignment="Left" Margin="62,38,0,0" Name="textBlock_Subject" Text="" VerticalAlignment="Top" Width="283" 
                       MouseLeftButtonDown="textBlock_Subject_MouseLeftButtonDown" MouseEnter="textBlock_Subject_MouseEnter" MouseLeave="textBlock_Subject_MouseLeave" />
        </Grid>
    </Border>
</Window>
like image 943
Alex Kapustian Avatar asked Apr 18 '11 07:04

Alex Kapustian


People also ask

How can you created rounded corners?

To create a rounded corner, we use the CSS border-radius property. This property is used to set the border-radius of element.


2 Answers

As it is not entirely clear what you are trying to do, I guess you want a window with rounded corners and transparent background. Your solution is correct, you just have to set the Window background transparency and a background for the Border.

<Window x:Class="Class.Window"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Width="379" Loaded="Window_Loaded"
    AllowsTransparency="True"
    ResizeMode="NoResize" ShowInTaskbar="False" Topmost="True" WindowStyle="None" Height="110" Background="Transparent">    
    <Border Background="White" BorderBrush="Black" BorderThickness="1,1,1,1" CornerRadius="30,30,30,30">
        <Grid>
            <TextBlock Height="23" HorizontalAlignment="Left" Margin="62,12,0,0" Name="textBlock_From" Text="" VerticalAlignment="Top" Width="283" />
            <TextBlock Height="23" HorizontalAlignment="Left" Margin="62,38,0,0" Name="textBlock_Subject" Text="" VerticalAlignment="Top" Width="283" 
                   MouseLeftButtonDown="textBlock_Subject_MouseLeftButtonDown" MouseEnter="textBlock_Subject_MouseEnter" MouseLeave="textBlock_Subject_MouseLeave" />
        </Grid>
    </Border>
</Window>
like image 122
Gimno Avatar answered Sep 18 '22 23:09

Gimno


A better solution is how the border and grid orders are defined in the XAML. For instance, this scheme works to mask the square grid corners underneath the rounded border and while the main grid is transparent:

<Window x:Class="Class.Window"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Width="379" Loaded="Window_Loaded"
    AllowsTransparency="True"
    ResizeMode="NoResize" ShowInTaskbar="False" Topmost="True" WindowStyle="None" 
    Height="110" Background="Transparent">    

    <Grid Background="Transparent">
        <Grid Background="White" Margin="4">
            <!-- ...place functional control elements here... -->
        </Grid>

        <Border CornerRadius="12,12,12,12" BorderThickness="6" Padding="4">
            <!-- ...set your desired border brush color here... -->
        </Border>
    </Grid>
</Window>
like image 43
MrEman Avatar answered Sep 17 '22 23:09

MrEman