PSC.Maui.Components.LanguageDropdown 8.0.29

Language Dropdown from MAUI

A component for MAUI is to display a dropdown with languages. Include all the flags in SVG format and functions to get all language data. The Language Dropdown for MAUI is available on NuGet as a package to use in your non-commercial applications. If you would like to use it for commercial use, please send me a message.

For more information about this component, please see my post on PureSourceCode.

Usage

First, the package has to be added to your project. You can install it with this command from the dotnet CLI

dotnet add package PSC.Maui.Components.LanguageDropdown --version 8.0.0

or with the NuGet command

Install-Package PSC.Maui.Components.LanguageDropdown -Version 8.0.0

Then, the component has to be registered in your application. The component requires the CommunityToolkit.Maui and must be added in the MauiProgram.cs after that.

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .UseMauiCommunityToolkit()
            .UseLanguageDropdown()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
            });

#if DEBUG
    	builder.Logging.AddDebug();
#endif

        return builder.Build();
    }
}

Now, you can use the component in the application.

How to add the component

In your MAUI ContentView or ContentPage. the reference to the component must be added like in the following example:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="LanguageDropdownDemo.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:components="clr-namespace:PSC.Maui.Components.LanguageDropdown;assembly=PSC.Maui.Components.LanguageDropdown"
    xmlns:local="clr-namespace:LanguageDropdownDemo.ViewModels">

    <ScrollView>
        <VerticalStackLayout Padding="30,0" Spacing="25">
		<components:LanguageDropdown
			x:Name="ldd"
                        BorderColor="Gray"
			IsDisplayPickerControl="{Binding IsDisplayPickerControl}"
			Placeholder="This is a test"
			SelectedItem="{Binding LanguageItem}" />

                <Image
                    HeightRequest="50"
                    Source="f_gb.png"
                    WidthRequest="50" />

                 <Image
                     HeightRequest="50"
                     Source="{Binding LanguageItem.Flag}"
                     WidthRequest="50" />
                 <Label HorizontalTextAlignment="Center" Text="{Binding LanguageItem.LanguageName}" />
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

The code above shows the following screenshot

Properties

Behavious

How to use the converter

In the definition of the ContentPage or ContentView, add a value for the behaviour like in the following code (see bh)

<ContentPage
	x:Class="LanguageDropdownDemo.MainPage"
	xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
	xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
	xmlns:bh="clr-namespace:PSC.Maui.Components.LanguageDropdown.Behavious;assembly=PSC.Maui.Components.LanguageDropdown"
	xmlns:components="clr-namespace:PSC.Maui.Components.LanguageDropdown;assembly=PSC.Maui.Components.LanguageDropdown"
	xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">

Then, add the following ContentPage or ContentView resource

<ContentPage.Resources>
	<ResourceDictionary>
		<bh:IsLanguageNullOrEmptyConverter x:Key="IsLanguageNullOrEmptyConverter" />
	</ResourceDictionary>
</ContentPage.Resources>

Now, it is possible to use the converter in your page. For example, if I want to change the BorderColor if no language is selected, I can write the following code

<components:LanguageDropdown
	x:Name="ldd2"
	FlagHeight="40"
	FlagWidth="60"
	Placeholder="Select the target language"
	SelectedItem="{Binding LanguageItem2}"
	TextFontFamily="OpenSans Regular"
	TextSize="20">
	<components:LanguageDropdown.Triggers>
		<MultiTrigger TargetType="components:LanguageDropdown">
			<MultiTrigger.Conditions>
				<BindingCondition 
                    Binding="{Binding LanguageItem2, Converter={StaticResource IsLanguageNullOrEmptyConverter}}" 
                    Value="True" />
			</MultiTrigger.Conditions>
			<Setter Property="BorderColor" Value="#FF0000" />
		</MultiTrigger>
	</components:LanguageDropdown.Triggers>
</components:LanguageDropdown>

Languages and flags

Screenshot

iOS Screenshot

Android

Windows

More links

• CSharpCountryData: A simple cross platform offline .NET library for getting country data
• CSharp Country Data
• Demo Source Code
• NuGet package
• Language Dropdown for MAUI on PureSourceCode

PureSourceCode.com

PureSourceCode.com is my personal blog where I publish posts about technologies and in particular source code and projects in .NET.

In the last few months, I created a lot of components for Blazor WebAssembly and Blazor Server.

My name is Enrico Rossini and you can contact me via:

• Personal Twitter
• LinkedIn
• Facebook

Blazor Components

Component name	Forum	NuGet	Website	Description
AnchorLink	Forum			An anchor link is a web link that allows users to leapfrog to a specific point on a website page. It saves them the need to scroll and skim read and makes navigation easier. This component is for Blazor WebAssembly and Blazor Server
Autocomplete for Blazor	Forum			Simple and flexible autocomplete type-ahead functionality for Blazor WebAssembly and Blazor Server
Browser Detect for Blazor	Forum		Demo	Browser detect for Blazor WebAssembly and Blazor Server
ChartJs for Blazor	Forum		Demo	Add beautiful graphs based on ChartJs in your Blazor application
Clippy for Blazor	Forum		Demo	Do you miss Clippy? Here the implementation for Blazor
CodeSnipper for Blazor	Forum			Add code snippet in your Blazor pages for 196 programming languages with 243 styles
Copy To Clipboard	Forum			Add a button to copy text in the clipboard
DataTable for Blazor	Forum		Demo	DataTable component for Blazor WebAssembly and Blazor Server
Google Tag Manager	[Forum]()		Demo	Adds Google Tag Manager to the application and manages communication with GTM JavaScript (data layer).
Icons and flags for Blazor	Forum			Library with a lot of SVG icons and SVG flags to use in your Razor pages
ImageSelect for Blazor	Forum			This is a Blazor component to display a dropdown list with images based on ms-Dropdown by Marghoob Suleman. This component is built with NET7 for Blazor WebAssembly and Blazor Server
Markdown editor for Blazor	Forum		Demo	This is a Markdown Editor for use in Blazor. It contains a live preview as well as an embeded help guide for users.
Modal dialog for Blazor	Forum			Simple Modal Dialog for Blazor WebAssembly
Modal windows for Blazor	Forum			Modal Windows for Blazor WebAssembly
Quill for Blazor	Forum			Quill Component is a custom reusable control that allows us to easily consume Quill and place multiple instances of it on a single page in our Blazor application
ScrollTabs				Tabs with nice scroll (no scrollbar) and responsive
Segment for Blazor	Forum			This is a Segment component for Blazor Web Assembly and Blazor Server
Tabs for Blazor	Forum			This is a Tabs component for Blazor Web Assembly and Blazor Server
Timeline for Blazor	Forum			This is a new responsive timeline for Blazor Web Assembly and Blazor Server
Toast for Blazor	Forum			Toast notification for Blazor applications
Tours for Blazor	Forum			Guide your users in your Blazor applications
TreeView for Blazor	Forum			This component is a native Blazor TreeView component for Blazor WebAssembly and Blazor Server. The component is built with .NET7.
WorldMap for Blazor	Forum		Demo	Show world maps with your data

C# libraries for .NET6

Component name	Forum	NuGet	Description
PSC.Evaluator	Forum		PSC.Evaluator is a mathematical expressions evaluator library written in C#. Allows to evaluate mathematical, boolean, string and datetime expressions.
PSC.Extensions	Forum		A lot of functions for .NET5 in a NuGet package that you can download for free. We collected in this package functions for everyday work to help you with claim, strings, enums, date and time, expressions...

More examples and documentation

Blazor

• Write a reusable Blazor component
• Getting Started With C# And Blazor
• Setting Up A Blazor WebAssembly Application
• Working With Blazor Component Model
• Secure Blazor WebAssembly With IdentityServer4
• Blazor Using HttpClient With Authentication
• InputSelect component for enumerations in Blazor
• Use LocalStorage with Blazor WebAssembly
• Modal Dialog component for Blazor
• Create Tooltip component for Blazor
• Consume ASP.NET Core Razor components from Razor class libraries | Microsoft Docs
• ChartJs component for Blazor
• Labels and OnClickChart for ChartJs

Blazor & NET8

• Custom User Management with NET8 and Blazor (1st part)
• NET8, Blazor and Custom User Management (2nd part)