Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
82 changes: 82 additions & 0 deletions docs/user-interface/graphics/draw.md
Original file line number Diff line number Diff line change
Expand Up @@ -281,6 +281,8 @@ Images can be drawn on an <xref:Microsoft.Maui.Graphics.ICanvas> using the <xref

The following example shows how to load an image and draw it to the canvas:

::: moniker range="=net-maui-7.0"

```csharp
using System.Reflection;
using IImage = Microsoft.Maui.Graphics.IImage;
Expand Down Expand Up @@ -308,6 +310,30 @@ if (image != null)
}
```

::: moniker-end

::: moniker range=">=net-maui-8.0"

```csharp
using System.Reflection;
using IImage = Microsoft.Maui.Graphics.IImage;
using Microsoft.Maui.Graphics.Platform;

IImage image;
Assembly assembly = GetType().GetTypeInfo().Assembly;
using (Stream stream = assembly.GetManifestResourceStream("GraphicsViewDemos.Resources.Images.dotnet_bot.png"))
{
image = PlatformImage.FromStream(stream);
}

if (image != null)
{
canvas.DrawImage(image, 10, 10, image.Width, image.Height);
}
```

::: moniker-end

In this example, an image is retrieved from the assembly and loaded as a stream. It's then drawn at actual size at (10,10):

:::image type="content" source="media/draw/image.png" alt-text="Screenshot of an image.":::
Expand Down Expand Up @@ -524,6 +550,8 @@ Graphical objects that are drawn to an <xref:Microsoft.Maui.Graphics.ICanvas> ca

The following example shows how to use the <xref:Microsoft.Maui.Graphics.ICanvas.ClipPath%2A> method to clip an image:

::: moniker range="=net-maui-7.0"

```csharp
using System.Reflection;
using IImage = Microsoft.Maui.Graphics.IImage;
Expand Down Expand Up @@ -554,6 +582,33 @@ if (image != null)
}
```

::: moniker-end

::: moniker range=">=net-maui-8.0"

```csharp
using System.Reflection;
using IImage = Microsoft.Maui.Graphics.IImage;
using Microsoft.Maui.Graphics.Platform;

IImage image;
Assembly assembly = GetType().GetTypeInfo().Assembly;
using (Stream stream = assembly.GetManifestResourceStream("GraphicsViewDemos.Resources.Images.dotnet_bot.png"))
{
image = PlatformImage.FromStream(stream);
}

if (image != null)
{
PathF path = new PathF();
path.AppendCircle(100, 90, 80);
canvas.ClipPath(path); // Must be called before DrawImage
canvas.DrawImage(image, 10, 10, image.Width, image.Height);
}
```

::: moniker-end

In this example, the image is clipped using a <xref:Microsoft.Maui.Graphics.PathF> object that defines a circle that's centered at (100,90) with a radius of 80. The result is that only the part of the image within the circle is visible:

:::image type="content" source="media/draw/clippath.png" alt-text="Screenshot of an image that's been clipped with the ClipPath method.":::
Expand All @@ -563,6 +618,8 @@ In this example, the image is clipped using a <xref:Microsoft.Maui.Graphics.Path

The following example shows how to use the <xref:Microsoft.Maui.Graphics.ICanvas.SubtractFromClip%2A> method to clip an image:

::: moniker range="=net-maui-7.0"

```csharp
using System.Reflection;
using IImage = Microsoft.Maui.Graphics.IImage;
Expand Down Expand Up @@ -591,6 +648,31 @@ if (image != null)
}
```

::: moniker-end

::: moniker range=">=net-maui-8.0"

```csharp
using System.Reflection;
using IImage = Microsoft.Maui.Graphics.IImage;
using Microsoft.Maui.Graphics.Platform;

IImage image;
Assembly assembly = GetType().GetTypeInfo().Assembly;
using (Stream stream = assembly.GetManifestResourceStream("GraphicsViewDemos.Resources.Images.dotnet_bot.png"))
{
image = PlatformImage.FromStream(stream);
}

if (image != null)
{
canvas.SubtractFromClip(60, 60, 90, 90);
canvas.DrawImage(image, 10, 10, image.Width, image.Height);
}
```

::: moniker-end

In this example, the area defined by the rectangle that's specified by the arguments supplied to the <xref:Microsoft.Maui.Graphics.ICanvas.SubtractFromClip%2A> method is clipped from the image. The result is that only the parts of the image outside the rectangle are visible:

:::image type="content" source="media/draw/subtractfromclip.png" alt-text="Screenshot of an image that's been clipped with the SubtractFromClip method.":::
111 changes: 111 additions & 0 deletions docs/user-interface/graphics/images.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,8 @@ Image loading functionality is provided by the <xref:Microsoft.Maui.Graphics.Pla

The following example shows how to load an image:

::: moniker range="=net-maui-7.0"

```csharp
#if IOS || ANDROID || MACCATALYST
using Microsoft.Maui.Graphics.Platform;
Expand Down Expand Up @@ -53,6 +55,30 @@ if (image != null)
}
```

::: moniker-end

::: moniker range=">=net-maui-8.0"

```csharp
using Microsoft.Maui.Graphics.Platform;
using System.Reflection;
using IImage = Microsoft.Maui.Graphics.IImage;

IImage image;
Assembly assembly = GetType().GetTypeInfo().Assembly;
using (Stream stream = assembly.GetManifestResourceStream("GraphicsViewDemos.Resources.Images.dotnet_bot.png"))
{
image = PlatformImage.FromStream(stream);
}

if (image != null)
{
canvas.DrawImage(image, 10, 10, image.Width, image.Height);
}
```

::: moniker-end

In this example, the image is retrieved from the assembly, loaded as a stream, and displayed.

> [!IMPORTANT]
Expand All @@ -73,6 +99,8 @@ The <xref:Microsoft.Maui.Graphics.ResizeMode> enumeration defines the following

The following example shows how to resize an image:

::: moniker range="=net-maui-7.0"

```csharp
#if IOS || ANDROID || MACCATALYST
using Microsoft.Maui.Graphics.Platform;
Expand Down Expand Up @@ -101,6 +129,31 @@ if (image != null)
}
```

::: moniker-end

::: moniker range=">=net-maui-8.0"

```csharp
using Microsoft.Maui.Graphics.Platform;
using System.Reflection;
using IImage = Microsoft.Maui.Graphics.IImage;

IImage image;
Assembly assembly = GetType().GetTypeInfo().Assembly;
using (Stream stream = assembly.GetManifestResourceStream("GraphicsViewDemos.Resources.Images.dotnet_bot.png"))
{
image = PlatformImage.FromStream(stream);
}

if (image != null)
{
IImage newImage = image.Resize(100, 60, ResizeMode.Stretch, true);
canvas.DrawImage(newImage, 10, 10, newImage.Width, newImage.Height);
}
```

::: moniker-end

In this example, the image is retrieved from the assembly and loaded as a stream. The image is resized using the <xref:Microsoft.Maui.Graphics.IImage.Resize%2A> method, with its arguments specifying the new size, and that it should be stretched to fill the available space. In addition, the source image is disposed. The resized image is then drawn at actual size at (10,10).

## Downsize an image
Expand All @@ -111,6 +164,8 @@ The <xref:Microsoft.Maui.Graphics.IImage.Downsize%2A> overloads also accept an o

The following example shows how to downsize an image:

::: moniker range="=net-maui-7.0"

```csharp
#if IOS || ANDROID || MACCATALYST
using Microsoft.Maui.Graphics.Platform;
Expand Down Expand Up @@ -139,6 +194,31 @@ if (image != null)
}
```

::: moniker-end

::: moniker range=">=net-maui-8.0"

```csharp
using Microsoft.Maui.Graphics.Platform;
using System.Reflection;
using IImage = Microsoft.Maui.Graphics.IImage;

IImage image;
Assembly assembly = GetType().GetTypeInfo().Assembly;
using (Stream stream = assembly.GetManifestResourceStream("GraphicsViewDemos.Resources.Images.dotnet_bot.png"))
{
image = PlatformImage.FromStream(stream);
}

if (image != null)
{
IImage newImage = image.Downsize(100, true);
canvas.DrawImage(newImage, 10, 10, newImage.Width, newImage.Height);
}
```

::: moniker-end

In this example, the image is retrieved from the assembly and loaded as a stream. The image is downsized using the <xref:Microsoft.Maui.Graphics.IImage.Downsize%2A> method, with the argument specifying that its largest dimension should be set to 100 pixels. In addition, the source image is disposed. The downsized image is then drawn at actual size at (10,10).

## Save an image
Expand All @@ -150,6 +230,8 @@ You can save images using the <xref:Microsoft.Maui.Graphics.IImage.Save%2A> and

The following example shows how to save an image:

::: moniker range="=net-maui-7.0"

```csharp
#if IOS || ANDROID || MACCATALYST
using Microsoft.Maui.Graphics.Platform;
Expand Down Expand Up @@ -182,4 +264,33 @@ if (image != null)
}
```

::: moniker-end

::: moniker range=">=net-maui-8.0"

```csharp
using Microsoft.Maui.Graphics.Platform;
using System.Reflection;
using IImage = Microsoft.Maui.Graphics.IImage;

IImage image;
Assembly assembly = GetType().GetTypeInfo().Assembly;
using (Stream stream = assembly.GetManifestResourceStream("GraphicsViewDemos.Resources.Images.dotnet_bot.png"))
{
image = PlatformImage.FromStream(stream);
}

// Save image to a memory stream
if (image != null)
{
IImage newImage = image.Downsize(150, true);
using (MemoryStream memStream = new MemoryStream())
{
newImage.Save(memStream);
}
}
```

::: moniker-end

In this example, the image is retrieved from the assembly and loaded as a stream. The image is downsized using the <xref:Microsoft.Maui.Graphics.IImage.Downsize%2A> method, with the argument specifying that its largest dimension should be set to 150 pixels. In addition, the source image is disposed. The downsized image is then saved to a stream.
31 changes: 31 additions & 0 deletions docs/user-interface/graphics/paint.md
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,8 @@ To paint an object with an image, load the image and assign it to the <xref:Micr

The following example shows how to load an image and fill a rectangle with it:

::: moniker range="=net-maui-7.0"

```csharp
using System.Reflection;
using IImage = Microsoft.Maui.Graphics.IImage;
Expand Down Expand Up @@ -105,6 +107,35 @@ if (image != null)
}
```

::: moniker-end

::: moniker range=">=net-maui-8.0"

```csharp
using System.Reflection;
using IImage = Microsoft.Maui.Graphics.IImage;
using Microsoft.Maui.Graphics.Platform;

IImage image;
Assembly assembly = GetType().GetTypeInfo().Assembly;
using (Stream stream = assembly.GetManifestResourceStream("GraphicsViewDemos.Resources.Images.dotnet_bot.png"))
{
image = PlatformImage.FromStream(stream);
}

if (image != null)
{
ImagePaint imagePaint = new ImagePaint
{
Image = image.Downsize(100)
};
canvas.SetFillPaint(imagePaint, RectF.Zero);
canvas.FillRectangle(0, 0, 240, 300);
}
```

::: moniker-end

In this example, the image is retrieved from the assembly and loaded as a stream. The image is resized using the <xref:Microsoft.Maui.Graphics.IImage.Downsize%2a> method, with the argument specifying that its largest dimension should be set to 100 pixels. For more information about downsizing an image, see [Downsize an image](~/user-interface/graphics/images.md#downsize-an-image).

The <xref:Microsoft.Maui.Graphics.ImagePaint.Image> property of the <xref:Microsoft.Maui.Graphics.ImagePaint> object is set to the downsized version of the image, and the <xref:Microsoft.Maui.Graphics.ImagePaint> object is set as the paint to fill an object with. A rectangle is then drawn that's filled with the paint:
Expand Down
1 change: 1 addition & 0 deletions docs/whats-new/dotnet-8.md
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ The following behavior has changed from the previous release:
- How the color of a tab is set in a Shell app has changed on some platforms. For more information, see [Tab appearance](~/fundamentals/shell/tabs.md#tab-appearance).
- It's not required to specify a value for the `$(ApplicationIdGuid)` build property in your app's project file. This is because .NET MAUI Windows apps no longer require a GUID as an app ID, and instead use the value of the `$(ApplicationId)` build property as the app ID. Therefore, the same reverse domain format app ID is now used across all platforms, such as com.mycompany.myapp.
- .NET MAUI Mac Catalyst apps are no longer limited to 50 menu items on the menu bar.
- The `PlatformImage.FromStream` method, in the `Microsoft.Maui.Graphics` namespace, can now be used to load images on Windows instead of having to use the `W2DImageLoadingService` class.

<!-- ## Performance

Expand Down