CODEWITHSUNDEEP
c#wpf
General Grey
General Grey

Reputation: 3688

How do you load an image to use in a wpf page Edit-> and Clip a part of it

I have been struggling with this for a few hours now. I have had success a couple of times, but when I try to duplicate it I get varying results. All I am trying to do is load an image as a static resource for use later on the same page.

I have tried everything contained in Load Images in WPF application and I have had no luck making it work. I think maybe I am putting my images in the wrong place, though I don't know where else to put them. I created a folder called Images.

<UserControl.Resources>

    <BitmapImage x:Key="image1" UriSource="MyApp;component/Images/Image1.png" />
    <BitmapImage x:Key="image2" UriSource="MyApp;component/Images/Image2.png" />

</UserControl.Resources>

Then Later on I use this

<Image Width=" 100" Height="100">
    <Image.Source>
        <CroppedBitmap Source="{StaticResource ResourceKey=image1}">
            <CroppedBitmap.SourceRect>
                <Int32Rect X="0" Y="0" Width="100" Height="100" />
            </CroppedBitmap.SourceRect>
        </CroppedBitmap>
    </Image.Source>

Ultimately what I am trying to do is to display only part of an image, but I can't even consistently get an image on the screen let alone cut it into parts.

Edit

It seems that if I remove the CroppedBitmap mumbo jumbo the image does load by itself

<Image Width=" 100" Height="100" Source ="{StaticResource image1}">

So my entire problem is with the clipping.

Upvotes: 0

Views: 763

Answers (1)

Nico
Nico

Reputation: 12683

Assuming your images are stored in the directory <solution>/Images/ and the full namespace of your application is MyApp then you can write your UriSource such as

/MyApp;component/Images/Image1.png

Now your images must have the Build Action set to Resource in the file properties. As per the image below.

enter image description here

The syntax for your URI string is

/<full namespace>;component/<full path>/<file name with extension>

I have tested your code with a cropped image and have this result with the code.

XAML:

<Window x:Class="MyApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <BitmapImage x:Key="image1" UriSource="/MyApp;component/Images/Image1.png" />
        <BitmapImage x:Key="image2" UriSource="/MyApp;component/Images/se.png" />
    </Window.Resources>
    <Grid>
        <Image Width=" 100" Height="100">
            <Image.Source>
                <CroppedBitmap Source="{StaticResource ResourceKey=image1}">
                    <CroppedBitmap.SourceRect>
                        <Int32Rect X="0" Y="0" Width="100" Height="100" />
                    </CroppedBitmap.SourceRect>
                </CroppedBitmap>
            </Image.Source>
        </Image>
    </Grid>
</Window>

Project Layout

Project Layout

Sample Output:

enter image description here

Upvotes: 2

Related Questions