Adds a fluentcx picture

Directory.Packages.props

@@ -5,12 +5,16 @@
   <!-- Independent from TargetFrameWorks-->
   <ItemGroup>
     <!-- For Sample Apps -->
+    <PackageVersion Include="AWSSDK.S3" Version="4.0.7.6" />
+    <PackageVersion Include="Azure.Storage.Blobs" Version="12.25.1" />
+    <PackageVersion Include="Google.Cloud.Storage.V1" Version="4.13.0" />
     <PackageVersion Include="Markdig.Signed" Version="0.42.0" />
     <PackageVersion Include="Microsoft.AspNetCore.Components" Version="9.0.8" />
     <PackageVersion Include="Microsoft.AspNetCore.Components.WebAssembly" Version="9.0.8" />
     <PackageVersion Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="9.0.8" />
     <PackageVersion Include="Microsoft.CodeAnalysis.Analyzers" Version="4.14.0" />
     <PackageVersion Include="Microsoft.CodeAnalysis.CSharp" Version="4.14.0" />
+    <PackageVersion Include="Microsoft.Extensions.Caching.Abstractions" Version="9.0.5" />
     <PackageVersion Include="Microsoft.FluentUI.AspNetCore.Components.Emoji" Version="4.12.1" />
     <PackageVersion Include="PublishSPAforGitHubPages.Build" Version="3.0.1" />
     <!-- Test dependencies -->

examples/demo/FluentUI.Demo.Shared/FluentUI.Demo.Shared.csproj

@@ -35,6 +35,10 @@
     <ProjectReference Include="..\FluentUI.Demo.Generators\FluentUI.Demo.Generators.csproj" OutputItemType="Analyzer" ReferenceOutputAssembly="false" />
   </ItemGroup>
 
+  <ItemGroup>
+    <Folder Include="wwwroot\pictures\" />
+  </ItemGroup>
+
   <Target Name="CopySources" BeforeTargets="BeforeBuild">
     <ItemGroup>
       <Sources Include="$(ProjectDir)Pages/**/Examples/*" />

examples/demo/FluentUI.Demo.Shared/Layout/DemoNavProvider.cs

@@ -128,6 +128,24 @@ public DemoNavProvider()
                         icon: new Icons.Regular.Size20.Navigation(),
                         title: "Path bar"
                     ),
+                     new NavGroup(
+                        icon: new Icons.Regular.Size20.PictureIn(),
+                        title: "Pictures",
+                        gap: "10px",
+                        expanded: false,
+                        children: [
+                            new NavLink(
+                                href: "pictures",
+                                icon: new Icons.Regular.Size20.PictureIn(),
+                                title: "Picture"
+                            ),
+                            new NavLink(
+                                href: "/picture-image-processor",
+                                icon: new Icons.Regular.Size20.ImageEdit(),
+                                title: "Image processor",
+                                match: NavLinkMatch.All
+                            )
+                    ]),
                     new NavLink(
                         href: "signature",
                         icon: new Icons.Regular.Size20.Signature(),

examples/demo/FluentUI.Demo.Shared/Pages/Pictures/Examples/PictureCaption.razor

@@ -0,0 +1,9 @@
+<div class="height: 500px">
+    <FluentCxPicture Caption="This is a caption for the FluentCxPicture" Source="./_content/FluentUI.Demo.Shared/pictures/red.png">
+        <ResponsiveContent>
+            <ResponsiveImage Source="./_content/FluentUI.Demo.Shared/pictures/butterfly.png" ContentType="image/png" Media="(max-width: 600px)" />
+            <ResponsiveImage Source="./_content/FluentUI.Demo.Shared/pictures/morpho.png" ContentType="image/png" Media="(max-width: 800px)" />
+            <ResponsiveImage Source="./_content/FluentUI.Demo.Shared/pictures/monarch.png" ContentType="image/png" Media="(min-width: 801px) and (max-width: 1100px)" />
+        </ResponsiveContent>
+    </FluentCxPicture>
+</div>

examples/demo/FluentUI.Demo.Shared/Pages/Pictures/Examples/PictureDefault.razor

@@ -0,0 +1,10 @@
+<div class="height: 500px">
+    <FluentCxPicture Source="./_content/FluentUI.Demo.Shared/pictures/red.png">
+        <ResponsiveContent>
+            <ResponsiveImage Source="./_content/FluentUI.Demo.Shared/pictures/butterfly.png" ContentType="image/png" Media="(max-width: 600px)" />
+            <ResponsiveImage Source="./_content/FluentUI.Demo.Shared/pictures/morpho.png" ContentType="image/png" Media="(max-width: 800px)" />
+            <ResponsiveImage Source="./_content/FluentUI.Demo.Shared/pictures/monarch.png" ContentType="image/png" Media="(min-width: 801px) and (max-width: 1100px)" />
+        </ResponsiveContent>
+    </FluentCxPicture>
+</div>
+

examples/demo/FluentUI.Demo.Shared/Pages/Pictures/Examples/PictureWithEffects.razor

@@ -0,0 +1,68 @@
+@using FluentUI.Blazor.Community
+@using Microsoft.FluentUI.AspNetCore.Components.Extensions
+
+<div class="height: 500px">
+    <FluentStack Style="margin-bottom: 20px">
+        <FluentSwitch @bind-Value="_showShadow" Label="Show Shadow" AriaLabel="Show Shadow" />
+        <FluentSwitch @bind-Value="_grayscale" Label="Grayscale" AriaLabel="Grayscale" />
+        <FluentSwitch @bind-Value="_sepia" Label="Sepia" AriaLabel="Sepia" />
+        <FluentSwitch @bind-Value="_opacity" Label="Opacity" AriaLabel="Opacity" />
+        <FluentSwitch @bind-Value="_blur" Label="Blur" AriaLabel="Blur" />
+    </FluentStack>
+
+
+    <FluentCxPicture Caption="This is a caption for the FluentCxPicture"
+                     Source="./_content/FluentUI.Demo.Shared/pictures/red.png"
+                     Shadow="@(_showShadow ? _shadow : null)"
+                     Effects="@GetEffects()">
+        <ResponsiveContent>
+            <ResponsiveImage Source="./_content/FluentUI.Demo.Shared/pictures/butterfly.png" ContentType="image/png" Media="(max-width: 600px)" />
+            <ResponsiveImage Source="./_content/FluentUI.Demo.Shared/pictures/morpho.png" ContentType="image/png" Media="(max-width: 800px)" />
+            <ResponsiveImage Source="./_content/FluentUI.Demo.Shared/pictures/monarch.png" ContentType="image/png" Media="(min-width: 801px) and (max-width: 1100px)" />
+        </ResponsiveContent>
+    </FluentCxPicture>
+</div>
+
+@code {
+    private bool _showShadow;
+    private bool _grayscale;
+    private bool _sepia;
+    private bool _opacity;
+    private bool _blur;
+
+    private string? GetEffects()
+    {
+        var effects = new EffectBuilder();
+
+        if (_grayscale)
+        {
+            effects.AddGrayscale(0.75);
+        }
+
+        if (_sepia)
+        {
+            effects.AddSepia(0.3);
+        }
+
+        if (_blur)
+        {
+            effects.AddBlur(3, LengthUnit.Pixels);
+        }
+
+        if (_opacity)
+        {
+            effects.AddOpacity(0.5);
+        }
+
+        return effects.Build();
+    }
+
+    private readonly Shadow _shadow = new Shadow
+    {
+        OffsetX = new(5),
+        OffsetY = new(5),
+        BlurRadius = new(10),
+        SpreadRadius = new(0),
+        Color = new(0, 0, 0, 0.3)
+    };
+}

examples/demo/FluentUI.Demo.Shared/Pages/Pictures/Examples/PictureWithOverlay.razor

@@ -0,0 +1,38 @@
+@using Microsoft.FluentUI.AspNetCore.Components.Extensions
+
+<div class="height: 500px">
+    <FluentSelect @bind-Value="_overlayPosition"
+                  TOption="string"
+                  Style="margin-bottom">
+        <FluentOption Value="@PictureOverlayPosition.TopLeft.ToString()">Top Left</FluentOption>
+        <FluentOption Value="@PictureOverlayPosition.TopCenter.ToString()">Top Center</FluentOption>
+        <FluentOption Value="@PictureOverlayPosition.TopRight.ToString()">Top Right</FluentOption>
+
+        <FluentOption Value="@PictureOverlayPosition.MiddleLeft.ToString()">Middle Left</FluentOption>
+        <FluentOption Value="@PictureOverlayPosition.MiddleCenter.ToString()">Middle Center</FluentOption>
+        <FluentOption Value="@PictureOverlayPosition.MiddleRight.ToString()">Middle Right</FluentOption>
+
+        <FluentOption Value="@PictureOverlayPosition.BottomLeft.ToString()">Bottom Left</FluentOption>
+        <FluentOption Value="@PictureOverlayPosition.BottomCenter.ToString()">Bottom Center</FluentOption>
+        <FluentOption Value="@PictureOverlayPosition.BottomRight.ToString()">Bottom Right</FluentOption>
+    </FluentSelect>
+
+    <FluentCxPicture Caption="This is a caption for the FluentCxPicture"
+                     Source="./_content/FluentUI.Demo.Shared/pictures/red.png">
+        <ResponsiveContent>
+            <ResponsiveImage Source="./_content/FluentUI.Demo.Shared/pictures/butterfly.png" ContentType="image/png" Media="(max-width: 600px)" />
+            <ResponsiveImage Source="./_content/FluentUI.Demo.Shared/pictures/morpho.png" ContentType="image/png" Media="(max-width: 800px)" />
+            <ResponsiveImage Source="./_content/FluentUI.Demo.Shared/pictures/monarch.png" ContentType="image/png" Media="(min-width: 801px) and (max-width: 1100px)" />
+        </ResponsiveContent>
+
+        <OverlayContent>
+            <PictureOverlay Position="@(Enum.Parse<PictureOverlayPosition>(_overlayPosition))">
+                Overlay Text
+            </PictureOverlay>
+        </OverlayContent>
+    </FluentCxPicture>
+</div>
+
+@code{
+    private string _overlayPosition = "TopLeft";
+}

examples/demo/FluentUI.Demo.Shared/Pages/Pictures/PictureImageProcessorPage.razor

@@ -0,0 +1,16 @@
+@page "/picture-image-processor"
+
+<PageTitle>Picture Image Processor</PageTitle>
+
+<MarkdownSection FromAsset="./_content/FluentUI.Demo.Shared/docs/PictureImageProcessing.md" OnContentConverted="RefreshTableOfContents" />
+
+@code {
+
+    [CascadingParameter]
+    public EventCallback OnRefreshTableOfContents { get; set; }
+
+    private async Task RefreshTableOfContents()
+    {
+        await OnRefreshTableOfContents.InvokeAsync();
+    }
+}

examples/demo/FluentUI.Demo.Shared/Pages/Pictures/PicturePage.razor

@@ -0,0 +1,47 @@
+@page "/pictures"
+@using FluentUI.Blazor.Community
+@using FluentUI.Demo.Shared.Pages.Pictures.Examples
+
+<h1>Pictures</h1>
+
+<p>
+    The <c>FluentCxPicture</c> component is used to display images with support for various formats and responsive behavior.
+    The property <see cref="FluentCxPicture.Source" /> specifies the image source URL or path.
+    The property <see cref="FluentCxPicture.ResponsiveSources" /> provides a collection of responsive image sources for different screen sizes and resolutions.
+</p>
+
+<h2>Examples</h2>
+
+<DemoSection Component="typeof(PictureDefault)" Title="Default">
+    <Description>
+        The <c>FluentCxPicture</c> component displays an image with the specified source.
+        WARNING : For now, the HTML picture element cannot query the container size, only the screen size.
+        That's why the responsive images don't change when resizing the container, but only when resizing the screen.
+    </Description>
+</DemoSection>
+
+<DemoSection Component="typeof(PictureCaption)" Title="Caption">
+    <Description>
+        A caption can be added to the picture using the <c>Caption</c> property.
+    </Description>
+</DemoSection>
+
+<DemoSection Component="typeof(PictureWithOverlay)" Title="Overlay">
+    <Description>
+        An overlay can be added to the picture using the <c>Overlay</c> property.
+    </Description>
+</DemoSection>
+
+<DemoSection Component="typeof(PictureWithEffects)" Title="Effects">
+    <Description>
+        Some effects like Shadow et Grayscale are easy to add.
+        Use the property <c>Shadow</c> to add a shadow to the picture.
+        Use the class <c>EffectBuilder</c> to create many effects like Grayscale, Sepia, Blur, Brightness, Contrast, HueRotate, Invert, Opacity, Saturate.
+    </Description>
+</DemoSection>
+
+<h2>Documentations</h2>
+
+<ApiDocumentation Component="typeof(FluentCxPicture)" />
+<ApiDocumentation Component="typeof(PictureOverlay)" />
+<ApiDocumentation Component="typeof(EffectBuilder)" />