How to add a border rectangle around image control in wpf?-CodePudding

I tried to add the wrapped the <Image with <border

I added

<Border BorderThickness="1">

And

</Border>

Then tried to wrapped the <Image like this :

<Border BorderThickness="1">
            <Image x:Name="Img" HorizontalAlignment="Left" Height="233" Margin="467,54,0,0" VerticalAlignment="Top" Width="272" RenderTransformOrigin="0.5,0.5">
                <Image.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform AngleY="0.704"/>
                        <RotateTransform/>
                        <TranslateTransform Y="0.614"/>
                    </TransformGroup>
                </Image.RenderTransform>
            </Image>
        </Border>

But it does nothing when running the application.

In the designer on the main window I have a StackPanel and then on it the other controls also Image control.

I want to show the user that there is a Image control like pictureBox the problem is when running the program and the Image is still empty there is nothing that indicate that there is a Image control. That's why I want to draw a rectangle on the Image borders.

CodePudding user response：

You need to pick a brush for your Border.

   <Border BorderThickness="1" BorderBrush="Black">
        <Image x:Name="Img" HorizontalAlignment="Left" Height="233" Margin="467,54,0,0" VerticalAlignment="Top" Width="272" RenderTransformOrigin="0.5,0.5">
            <Image.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform AngleY="0.704"/>
                    <RotateTransform/>
                    <TranslateTransform Y="0.614"/>
                </TransformGroup>
            </Image.RenderTransform>
        </Image>
    </Border>

CodePudding user response：

Actually, the method you applied is very close, since the picture will be in a border, it would be more logical to resize the border instead of resizing the picture. If you make an application like below, it will work for you.

    <Border BorderThickness="2"
            BorderBrush="Black"
            VerticalAlignment="Center"
            HorizontalAlignment="Center"
            Height="128" 
            Width="128">

        <Image HorizontalAlignment="Stretch" 
               VerticalAlignment="Stretch" 
               Stretch="Fill"
               Source="/Images/antenna.png"/>
    </Border>

It will be enough to have something like this in your application.

        <Border BorderThickness="3" BorderBrush="Red" Height="233" Width="272">
        <Image x:Name="Img" HorizontalAlignment="Left" Margin="467,54,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5">
            <Image.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform AngleY="0.704"/>
                    <RotateTransform/>
                    <TranslateTransform Y="0.614"/>
                </TransformGroup>
            </Image.RenderTransform>
        </Image>
    </Border>