2012-03-21 113 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