Maui with Material Design - c#

I am building a Maui App for the first time and want to employ Material Design. I normally use MahApps or Material design depending on the project. However, when adding the resource dictionary I get a Uri error
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Presentation"
x:Class="Presentation.App">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Resources/Styles/Colors.xaml" />
<ResourceDictionary Source="Resources/Styles/Styles.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignExtensions;component/Themes/Generic.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignExtensions;component/Themes/MaterialDesignLightTheme.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
The code blows up everytime but if I miss out the last 3 resource dictionaries (those referring to Material Design) I get no issues. I've added Material Design as a NuGet package as well as the extensions. Can anyone see anything daft that I have done???
Thanks

Dotnet MAUI has Material UI for Android as default now. You can include the material ui just by adding using Google.Android.Material line in your Android folder. Refer this forum for detailed steps.

Related

microsoft.ui.xaml not found

I installed the microsoft.ui.xaml NuGeT to my WPF Project and added the following to the app.xaml Merged Dictionarys (as the documentation said ):
<Application>
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls"/>
<!-- MahApps -->
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
...
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
But VS displays the following errors:
"CS0234 7 The type or namespace name 'UI' does not exist in the namespace 'Microsoft'
"
and
"
XDG0008 16 The name "XamlControlsResources" does not exist in the namespace "using:Microsoft.UI.Xaml.Controls"."
Does someone know how I can make it work / find the assembly error?
You are using WinUI 2.x which is not compatible with WPF, it can only be used with UWP.
The WinUI 2.x Library is closely coupled to the Windows 10 SDK and provides official native Windows UI controls and other UI elements for UWP apps.
Support for WPF is introduced in WinUI 3, which is currently only available as preview.

How to include MaterialDesignXamlToolkit to WPF class library?

I'm trying to use MaterialDesignXamlToolkit in my WPF class library (.NET framework). I'm following their official quick start tutorial, but since i do not have App.xaml, i had to make some adjustments. Apperently some step was wrong, but i do not know which one.
1) I installed MaterialDesignXamlToolkit using Nuget.
2) I created ResourceDictionary with the following code: (i specified the key because there is an error if i don't)
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ResourceDictionary x:Key="123">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.DeepPurple.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</ResourceDictionary>
If i remove <ResourceDictionary x:Key="123"> element, then i get an error:
System.Windows.Markup.XamlParseException: Set property 'System.Windows.ResourceDictionary.Source' threw an exception.
FileNotFoundException: Could not load file or assembly 'MaterialDesignThemes.Wpf, Culture=neutral' or one of its dependencies.
3) My 'main screen' is Page, so i added the resource to it:
<Page.Resources>
<ResourceDictionary Source="/MyAsembly;component/ResourceDictionary/MaterialDesign.xaml" />
</Page.Resources>
4) The obvious problem occurs here (this is the second step of the official tutorial): i add the following code to my Page:
<Page ...
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
TextElement.Foreground="{DynamicResource MaterialDesignBody}"
TextElement.FontWeight="Regular"
TextElement.FontSize="13"
TextOptions.TextFormattingMode="Ideal"
TextOptions.TextRenderingMode="Auto"
Background="{DynamicResource MaterialDesignPaper}"
FontFamily="{DynamicResource MaterialDesignFont}">
But i get a warning that: The resource {MaterialDesignBody, MaterialDesignPaper, MaterialDesignFont} could not be resolved.
Some of the solutions i tried pointed out that the ResourceDictionary's build action should be page, and it is.
Any help would be greatly appreciated!
The accepted solution worked for me. To avoid the dummy code though, I was also able to get MDXT working by adding the following to the code-behind of the resource dictionary:
Assembly.LoadFrom(Path.Combine(Path.GetDirectoryName(Assembly.GetExecutingAssembly().Location), "MaterialDesignThemes.Wpf.dll"));
Assembly.LoadFrom(Path.Combine(Path.GetDirectoryName(Assembly.GetExecutingAssembly().Location), "MaterialDesignColors.dll"));
Now that i've solved the problem, i realize one important information is missing from my question: i was following MVVM pattern (so all my code behind files were empty).
The problem was with the way Revit (the application that i was building a plugin for) loads libraries that a plugin is using. I still do not understand the internal logic of it, but the following two lines added to the code behind of the first page what is being loaded solved the problem for me:
ColorZoneAssist.SetMode(new GroupBox(), ColorZoneMode.Accent);
Hue hue = new Hue("name", System.Windows.Media.Color.FromArgb(1, 2, 3, 4), System.Windows.Media.Color.FromArgb(1, 5, 6, 7));
I cannot stress enought that those two lines of code are a complite bullshit (since i do not want to place any logic to code behind), but the libraries won't otherwise be loaded. This code somehow 'forces' Revit to load Material design libraries (1st line of code uses MaterialDesignTheme.Wpf, and the 2nd MaterialDesignColors), since (i assume) it can already tell at compile time that those libraries are needed.
Remove the <ResourceDictionary x:Key="123"> element from your ResourceDictionary to begin with:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.DeepPurple.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
You should then be able to set the properties using property element syntax after you have set the Resources property:
<Page ...
d:DesignHeight="450" d:DesignWidth="800">
<Page.Resources>
<ResourceDictionary Source="/MyAsembly;component/ResourceDictionary/MaterialDesign.xaml" />
</Page.Resources>
<Page.Background>
<DynamicResource ResourceKey="MaterialDesignPaper" />
</Page.Background>
</Page>
Without adding those lines.
Double check if the MaterialDesign dll file get copied to the output path of the application.
I have seen such issue before, just adding nonsense code and Visual Studio realize your application that depends on your lib also depends on MaterialDesign lib and then copies the dll again as one would expect in the first place.
Instead of adding those lines you could then
Reference MaterialDesign directly in your application as well
Use a build event to make sure the DLL is copied to the build path.
This comment solves the problem for me,
but make sure you don't have another errors and if you have just find them and fix theme then try to run the project and it will work.
using MaterialDesignColors;
using MaterialDesignThemes.Wpf;
public MainWindow()
{
InitializeMaterialDesign();
InitializeComponent();
}
private void InitializeMaterialDesign()
{
// Create dummy objects to force the MaterialDesign assemblies to be loaded
// from this assembly, which causes the MaterialDesign assemblies to be searched
// relative to this assembly's path. Otherwise, the MaterialDesign assemblies
// are searched relative to Eclipse's path, so they're not found.
var card = new Card();
var hue = new Hue("Dummy", Colors.Black, Colors.White);
}

UWP - Reference StaticResource from different style resource dictionary: Failed to assign to property 'Windows.UI.Xaml.ResourceDictionary.Source'

Hello my team and I recently started developing an win10 uwp application. Application will have a lot of views and components so heavy use of styles is expected, so we need to organize our styles through file/folder structure we did this using following structure (unfortunately I cannot embed images yet see the link):
Anyways my Resource.xaml merges all other dictionaries as following:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Resources/Colors.xaml" />
<ResourceDictionary Source="/Resources/Icons.xaml" />
<ResourceDictionary Source="/Resources/Fonts.xaml" />
<ResourceDictionary Source="/Resources/Converters.xaml" />
<ResourceDictionary Source="/Resources/Buttons.xaml" />
<ResourceDictionary Source="/Resources/RadioButton.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
And in my App.xaml I reference this dictionary:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Resources/Resources.xaml" />
</ResourceDictionary.MergedDictionaries>
<vm:ViewModelLocator x:Key="Locator" d:IsDataSource="True" />
</ResourceDictionary>
</Application.Resources>
Now I managed to find the source of the problem in my RadioButton.xaml I reference a brush defined in Colors.xaml using StaticResource lookup:
<Setter Property="Foreground" Value="{StaticResource TopMenuTextBrush}" />
If I remove this line everything will start but with it I get following exception:
Exception {Windows.UI.Xaml.Markup.XamlParseException: The text associated with this error code could not be found.
Failed to assign to property
'Windows.UI.Xaml.ResourceDictionary.Source' because the type
'Windows.Foundation.String' cannot be assigned to the type
'Windows.Foundation.Uri'. [Line: 28 Position: 37]} System.Exception
{Windows.UI.Xaml.Markup.XamlParseException}
Interesting thing is when I start the app with this line commented and uncomment it visual studio will recognize the brush and apply it correctly, it only breaks on application start.
We used same approach before when developing WPF, so I'm thinking it might have to do with something regarding application deployment.
All help is greatly appreciated.
Exception = {Windows.UI.Xaml.Markup.XamlParseException: The text associated with this error code could not be found.
The problem is that you have used wrong ResourceDictionary source . I found the Resources.xaml and other xaml file stored in the same level directory in your screenshot. So you could not declare the parent directory of these xaml files within source. Please modify ResourceDictionary like the following
<ResourceDictionary Source="Colors.xaml"/>
For more you could refer to ResourceDictionary and XAML resource references.

Fluent ribbonTabItem not visible in designer?

i am Using the Fluent-Ribbons to create my view in wpf.
to have a better organisation of my code i wanted to put the different RibbonTabItems into their own files.
The problem is:
the designer does not show the content of the ribbontab.
I only see the a blank page.
Is there a way to make the RibbonTab visible in the designer?
If anyone else lands here from google, I was having this situation where the ribbon was not only invisible in the designer, but also not showing at runtime. After spending some time, I found that you have import generic fluent ribbon theme resources into your Window or Application Resources section, like this:
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/Fluent;component/Themes/Generic.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
After this my ribbon started showing in the designer as well as at runtime.
You can also use other themes in the same way. Just override the generic theme like this:
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/Fluent;component/Themes/Generic.xaml" />
<!-- change "Cobalt" to the color you want -->
<ResourceDictionary Source="pack://application:,,,/Fluent;component/Themes/Themes/Dark.Cobalt.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
Hope this helps someone down the road.
Credit to the project documentation at github.

Shared library not seeing resource dictionary

I have two wpf solutions that use the same class library (one I have written). The library references sytles (as static resources) that are in a resource dictionary of the main project. In one of those solutions, the library finds these static resources in the resource dictionary but in the other project the static resources are not resolved. In both cases the Resource dictionary is declared in the App.Xaml of the main application as follows:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary>
<local:AppBootstrapper x:Key="bootstrapper" />
</ResourceDictionary>
<ResourceDictionary Source="StoryMakerStyle.xaml" />
<ResourceDictionary Source="Resources\GlassButton.xaml"/>
<ResourceDictionary Source="Resources\Slider.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
Where StoryMakerStyle.xaml is the name of the resource dictionary in one app. It is called FlashcardsStyle.xaml in the other. The other 2 ResourceDictionary references are the same in both solutions.
Any suggestions as to why references to the resource dictionary are resolved in one solution but not the other?
Thanks in advance
I'm assuming that this is a solution of 2 project. You need to specify which project when referencing the ResourceDictionaries like so:
<ResourceDictionary Source="/ProjectNamespace;Resources/GlassButton.xaml"/>
<ResourceDictionary Source="/ProjectNamespace;Resources\Slider.xaml" />

Categories