2012-03-21 120 views
1

嗨我想要圆角的图像或者重叠我的边界ontop图像,但任何即时尝试似乎并没有工作。网格和图像重叠边框?

<Window x:Class="WpfApplication1.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     WindowStyle="None" 
     ResizeMode="NoResize" 
     AllowsTransparency="True" 
     WindowStartupLocation="CenterScreen" 
     BorderThickness="0,0,0,0" 
     Background="Transparent" 
     Title="MainWindow" Loaded="Window_Loaded" mc:Ignorable="d" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" d:DesignHeight="581" d:DesignWidth="733" SizeToContent="WidthAndHeight"> 
    <Border BorderThickness="6" BorderBrush="Black" CornerRadius="12" Padding="0.5" 
     HorizontalAlignment="Center" VerticalAlignment="Center"> 
     <Grid> 

      <Image Height="543" HorizontalAlignment="Left" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="711" Source="/WpfApplication1;component/Images/Login.jpg" ImageFailed="image1_ImageFailed" /> 

      <TextBox Height="38" HorizontalAlignment="Left" Margin="205,177,0,0" Name="textBox1" VerticalAlignment="Top" Width="299" Background="#00000000" BorderBrush="#00000000" BorderThickness="0" Text="Please enter your email address." FontSize="18" Foreground="White" TextChanged="textBox1_TextChanged" /> 
      <TextBox Background="#00000000" BorderBrush="#00000000" BorderThickness="0" FontSize="18" Foreground="White" Height="38" HorizontalAlignment="Left" Margin="205,256,0,0" Name="textBox2" Text="Please enter your password" VerticalAlignment="Top" Width="299" /> 
     </Grid> 


    </Border> 
</Window> 

是否可以在网格上重叠边框?

你可以看到我从这个屏幕转储的意思是:

Corner

回答

3

为清楚起见,已更新XAML和一些评论:

Grid被带圆角正确接壤。这里真正的问题是:

是否有可能在网格中包含的元素上重叠网格边界?

AFAIK,这是不可能的。如果要将Grid中包含的所有内容剪切到Border的圆角半径,则需要将Clip应用于Grid,以便任何包含的元素不会与边框重叠。

<Image 
     HorizontalAlignment="Center" 
     Margin="10" 
     Name="image2" 
     Stretch="None" 
     VerticalAlignment="Bottom" 
     Source="/test;component/login_btn.jpg"> <!-- Make sure it's not 
                a self closing tag 
                ending in "/>" --> 
     <Image.Clip> <!-- Image.Clip needs to be enclosed between 
          the Image opening tag (above) and 
          the Image closing tag (2 lines below). --> 
      <RectangleGeometry RadiusX="18" RadiusY="18" Rect="0,0,103,30" /> 
     </Image.Clip> 
    </Image> <!-- Close the Image tag here. --> 

图像的裁剪区域定义为带圆角的RectangleGeometry。您可以调整属性以匹配您的按钮图像。

这里是我的测试截图与一个图像保持原样,而其他剪辑到几何:

enter image description here

希望这有助于。

+0

我得到的错误在类型“图像”中找不到可附加属性“Clip” – 2012-03-22 12:38:37

+0

@Garrith检查我的编辑。确保您已将Clip标签放置在正确的位置。 – 2012-03-22 14:57:30

+0

@down voter:很高兴知道我的答案为什么被低估。即使是简短的评论也会有所帮助。 – 2012-03-22 15:22:40

1

没有它不会工作作为你的形象是一个JPG,背景是一个固定的颜色,尽量GIMP如果你不能获得或使用PS删除角落并保存为PNG。背景将是透明的。

+0

好的,谢谢lillypop – 2012-03-21 23:43:02

+0

@Garrith它可以做到。检查我发布的答案。 – 2012-03-22 01:16:07