Сетка и изображение перекрываются Граница?

Question

Привет. Я пытаюсь закруглить углы изображения или, альтернативно, перекрыть границы моего изображения, но все, что я пытаюсь сделать, похоже, не работает.

<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>

Можно ли перекрывать границу на сетке?

Вы можете видеть, что я имею в виду из этого дампа экрана:

Answer 1

ОБНОВЛЕНО 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 с закругленными углами. Вы можете настроить атрибуты в соответствии с изображением вашей кнопки.

Вот скриншот моего теста с одним изображением, оставленным как есть, а другим обрезанным по геометрии:

Надеюсь, это поможет.

Answer 2

Нет, это не сработает, так как ваше изображение является jpg, а фон имеет фиксированный цвет, попробуйте GIMP, если вы не можете получить или использовать PS, чтобы удалить углы и сохранить как PNG.Фон будет прозрачным.