CODEWITHSUNDEEP
c#asp.nethtmlwpfxaml
G Gr
G Gr

Reputation: 6080

Grid and image overlapping Border?

Hi I am trying to round the corners of an image or alternatively overlap my border ontop of the image but anything im trying doesnt seem to work.

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

Is it possible to overlap a border on a grid?

You can see what I mean from this screen dump:

Corner

Upvotes: 1

Views: 1614

Answers (2)

torrential coding
torrential coding

Reputation: 1765

UPDATED XAML for clarity and some more comments:

The Grid is being bordered correctly with rounded corners. What should really be the question here is:

Is it possible to overlap a Grid Border on the elements contained in the Grid?

AFAIK, it's not possible. If you want everything contained in the Grid to be clipped to the corner radius of the Border, you'll need to apply a Clip to the Grid so that any contained elements don't overlap the border.

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

The clipping area for the image is defined as a RectangleGeometry with rounded corners. You can adjust the attributes to match your button image.

Here's a screenshot of my test with one image left as is, and the other clipped to the geometry:

enter image description here

Hope this helps.

Upvotes: 3

LenPopLilly
LenPopLilly

Reputation: 1227

No it wont work as your image is a jpg and the background is a fixed colour, try GIMP if you cant get or use PS to remove corners and save as a PNG. The background will then be transparent.

Upvotes: 1

Related Questions