Develop Reference

Image rendering in MAUI project

Is there any technique to render the images more clearly in MAUI, like RenderOption in WPF.
My image must be like this:
and it is rendered like this:
Edit: This project will run only on Windows Desktop and MacCatalyst. This behavior is happening on Windows device.
The OS is Windows 11 x64
Image xaml:
<Border
Grid.Row="1"
Margin="3"
HeightRequest="140"
StrokeShape="RoundRectangle 1,1,1,1"
WidthRequest="140">
<Border.Stroke>Black</Border.Stroke>
<Border.StrokeThickness>0.3</Border.StrokeThickness>
<Image
Margin="1"
Aspect="AspectFill"
Background="{StaticResource Gray100}"
HeightRequest="130"
HorizontalOptions="Center"
Source="{Binding MyImage}"
VerticalOptions="Center"
WidthRequest="130" />
</Border>
In action:

As a summary, I will post an answer so that it will help others who have similar problems. Thanks for your support and feedback #ValiMatie.
The posted issue is here: https://github.com/dotnet/maui/issues/10916 .
And it has been moved to Backlog milestone. This means that it is not going to be worked on for the coming release.

Cannot create an instance of UserControl in design view, works in Release mode and at runtime

I have a user control LoadingIndicatorControl which is displayed in various other controls when loading is happened.
This user control is very simple and looks like this:
<StackPanel HorizontalAlignment="Stretch"
Visibility="{Binding Loading, Converter={StaticResource Bool2Vis}}">
<Image x:Name="imgLoadingSpinner"
gif:ImageBehavior.AnimatedSource="pack://application:,,,/Images/Loading_Spinner.gif"
HorizontalAlignment="Right"
Width="30"
Height="30" />
</StackPanel>
I nest it in other views like this:
<uc:LoadingIndicatorControl Loading="{Binding Loading}"
DockPanel.Dock="Bottom"/>
When I run this application it compiles without issues and the loading indicator is displayed as I expect.
However at design time only I'm getting errors about this user control, related to the image resource. This gif is set to Build Action Resource.
In my host view I get this:
And if I look at the detail of why, it says Cannot locate resource 'images/loading_spinner.gif':
If I look at LoadingIndicatorControl in design view it does in fact locate the loading_spinner.gif resource and gives no errors.
What I have tried:
Clean and rebuild numerous times
Close VS2019 and reopen
Clean, close VS, reopen and rebuild
Set Loading_Spinner.gif Build Action to Embedded Resource (was Resource which also works at runtime)
Tried platform targets Any CPU, x64, x86
Interestingly, setting to build configuration to Release does prevent the error from appearing! It only appears when Debug is used.
I'm using Visual Studio Professional v16.11.16.
Any ideas how I can fix this?

Just use the direct path to the image:
<Image gif:ImageBehavior.AnimatedSource="Images/Loading_Spinner.gif"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="30"
Height="30" />
If you really need the pack URI, the format is explained here, it look like this:
<Image gif:ImageBehavior.AnimatedSource="pack://application:,,,/SO_72648958;component/Images/Loading_Spinner.gif"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="30"
Height="30" />
Working demo here.

How to display (transparent) animated gif in a Visual Studio extension panel?

I am developing a Visual Studio extension in C# and I would like to display a (waiting) transparent animated gif inside a tool window panel.
I have googled a lot and I only could find very complex solutions involving special dedicated libraries or some equivalent source code to add to my project. For example, I could find this post: How do I get an animated gif to work in WPF?. But I cannot understand why it would require such complex solutions for such a basic feature as animated gifs.
Can't XAML support natively animated gifs?
On my side I tried the following in my XAML file:
<Image Source="pack://application:,,,/MyPlugin;component/Resources/busy.gif"
Width="16" Height="16"/>
The image loads (although not animated) while Visual Studio is in edition mode. However, the image NEVER shows in the experimental instance.
What did I miss?

For example, I could find this post: How do I get an animated gif to
work in WPF?. But I cannot understand why it would require such
complex solutions for such a basic feature as animated gifs.
There're some easy ways to display .gif in wpf. For me, I use WpfAnimatedGif to do this.Simply install the nuget package and add the corresponding xmlns then the gif can display in wpf or vs extension.
For WpfAnimatedGif:
1.Add xmlns:gif="http://wpfanimatedgif.codeplex.com" to the xx.xaml.
2.<Image gif:ImageBehavior.AnimatedSource="xxx/xxx.gif" />
Then the .gif can display in the vs extension.
The format in my project:
<UserControl x:Class="VSIXProject2.ToolWindow1Control"
...
xmlns:gif="http://wpfanimatedgif.codeplex.com"
xmlns:vsshell="clr-namespace:Microsoft.VisualStudio.Shell;assembly=Microsoft.VisualStudio.Shell.15.0"
Background="{DynamicResource {x:Static vsshell:VsBrushes.WindowKey}}"
Foreground="{DynamicResource {x:Static vsshell:VsBrushes.WindowTextKey}}"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300"
Name="MyToolWindow">
<Grid>
<StackPanel Orientation="Vertical">
...
<Image gif:ImageBehavior.AnimatedSource="pack://application:,,,/VSIXProject2;component/Resources/time.gif" Height="100" Width="200"/>
</StackPanel>
</Grid>
</UserControl>
Note: To display the image when debugging VS extensions, the source format should be pack://application:,,,/xxx;component/Resources/xxx.gif. It's the different behavior between normal wpf and ToolWindows in vsix. More details see this.

Adding a custom font to a windows phone 8 app

I've read articles such as this 31 days of windows phone day 24 embedding-fonts and this windows 8 xaml tips custom fonts that explain very clearly and simply how to do this.
But for some reason I can't figure out, my custom font doesn't show on my app, whether in the designer view or when I run it.
To be sure I haven't left any step out, I'm showing what I did here for any suggestions on what my issue might be:
1. First, this is my xaml textblock code
<StackPanel Grid.Row="1" x:Name="BottomPanel" Height="120" Width="800" Orientation="Horizontal">
<StackPanel.Background>
<SolidColorBrush Color="{StaticResource PhoneSemitransparentColor}"/>
</StackPanel.Background>
<TextBlock x:Name="MainTextBlock" FontFamily="/Fonts/KOMIKAX_.ttf" TextWrapping="Wrap" Text="Hello" Width="680" Height="120" Margin="10,0,0,0" FontSize="25" Padding="20,10"/>
</StackPanel>
2. I created a folder in my project, called it "Fonts" and that is where I copied my font file.
3. I changed the Build Action of the font file to Content. I left the Copy To Output Directory property as None at first, then changed it to Copy If Newer. No success.
What have I done wrong or what did I leave out?

This work for me.
First make a folder in your App with the name Fonts, then Add font to it, then use the following syntax. I used it, it works perfectly.
<TextBlock FontFamily="/Fonts/Comic.ttf#Comic" TextWrapping="Wrap" Text="Hello" FontSize="25"/>
Make sure that the Build Action must be set to Content,
Right Click on font in folder and click property, then select Build Action as Content, otherwise it will not work on Emulator and Device.

Try using this
<TextBlock x:Name="MainTextBlock" FontFamily=".\Fonts\KOMIKAX_.ttf#Komika Axis" TextWrapping="Wrap" Text="Hello" Width="680" Height="120" Margin="10,0,0,0" FontSize="25" Padding="20,10"/>
In case this doesn't work, remember the format is .\FontPath\FontFileName.ttf#FontName

ComboBox Dropdown Appears Beneath Window

So I was have a combobox like below, coded like this;
AllowsTransparency="True" Background="Transparent">
<Border CornerRadius="10" Background="Beige" BorderBrush="Aqua" BorderThickness="2">
<Grid>
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
<Label Name="lblText"></Label>
<ComboBox Name="cbxNumbers"></ComboBox>
<TextBox Name="txtNumbers" Visibility="Collapsed"></TextBox>
<Button HorizontalAlignment="Center" Name="btnDone"
Click="btnDone_Click">That's Right!</Button>
</StackPanel>
<Button VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="1"
FontSize="8" Name="btnChangeInput" Click="btnChangeInput_Click">Let me chose the number
</Button>
</Grid>
</Border>
And then populated in code like this;
lblText.Content = Text;
cbxNumbers.Items.Add(5);
cbxNumbers.Items.Add(10);
cbxNumbers.Items.Add(50);
cbxNumbers.Items.Add(100);
cbxNumbers.Items.Add(1000);
cbxNumbers.Items.Add(10000);
cbxNumbers.Items.Add(100000);
cbxNumbers.Items.Add(1000000);
cbxNumbers.SelectedIndex = 0;
My question is obviously, why is my Dropdown showing beneath my window?
UPDATE
Quote Microsoft
Thank you for reporting this issue. Though this issue is under
investigation, we will likely not have a fix available in .NET 4.0. We
will update this bug again when we are able to fix the issue in a
future release. Thanks!
Great... any ideas for a work around?

This is a well documented bug with AllowTransparency=TRUE. It only happens on some computers running Win XP.
http://connect.microsoft.com/VisualStudio/feedback/details/465964/wpf-combobox-dropdown-list-appears-behind-the-form-when-allowstransparency-true
A workaround is found here:
As noted before, this is an issue with layered windows on XP. There is
not much that can be done at the WPF level to solve this, and given
that XP is no longer being serviced this isn't very likely to be
fixed. There are potentially workarounds you can employ, though.
The source of the problem is that WPF uses something called "Layered
Windows" when WindowStyle=None and AllowsTransparency=True. Often the
reason for doing this is to implement custom window chrome. Recently
the WPF team published a library that allows you to get custom chrome
without resorting to layered windows. The library is available at
http://code.msdn.microsoft.com/WPFShell
This doesn't support per-pixel opacity, but it does allow for
completely custom rendering of the window, including areas normally
managed by the system. It lets you set the radii of the windows
corners, but not have a completely arbitrary shape. If you can use
this library instead of AllowsTransparency=True then it should solve
this issue.
Microsoft has issued a hotfix, but it seems to not have fixed all problems related to the issue.