开发者

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>


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>


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>

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜