I would like to apply a common style for each ShellContent element in my app.xaml.
My problem is that I don't see any ShellContent property in my TargetType
AppShell.xaml
<ShellContent Title="TITLE1"
ContentTemplate="{DataTemplate local:Page1}"
Route="Route1"
Icon="Icon1" />
<ShellContent Title="TITLE2"
ContentTemplate="{DataTemplate local:Page2}"
Route="Route2"
Icon="Icon2" />
I would like something in this style in my App.xaml
<Style TargetType="ShellContent">
<Setter Property="Title" Value="{StaticResource Black}" />
</Style>
In Styles.xaml, which is merged into App.xaml, find and change the styles applied to Shell:
<Style TargetType="Shell" ApplyToDerivedTypes="True">
<Setter Property="Shell.TitleColor" Value="HotPink" />
<!--TBD_WHAT_PROPERTY?? <Setter Property="Shell.FontFamily" Value="..." /> --/>
</Style>
This will change the color of Titles of ShellContents, on tabbar (On Android, but not on Windows - bug?), and on each page.
Unfortunately, I have not found any way to change the properties of the flyout.
Unfortunately, I have not found any way to change the font used.
Related
I have an app which uses the shell flyout. When I added the flyout, it automatically created an icon as shown in the image below:
However, when I switch the android dark theme off:
The flyout icon remains white making it difficult to see:
I am using AppThemeBinding to automatically theme the app accordingly based on the system theme selected by the user, but I do not know how to change the flyout icon to a darker color if the user switches off the dark theme from the android settings.
Any idea how to do that?
The AppShell.xaml currently looks like this:
<?xml version="1.0" encoding="UTF-8" ?>
<Shell
x:Class="MAUIApp1.AppShell"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MAUIApp1"
FlyoutBackgroundColor="{AppThemeBinding Light=#f2f2f2, Dark=#2a2a2a}">
<Shell.Resources>
<ResourceDictionary>
...
</ResourceDictionary>
</Shell.Resources>
<Shell.FlyoutHeader>
...
</Shell.FlyoutHeader>
<Shell.ItemTemplate>
<DataTemplate>
...
</DataTemplate>
</Shell.ItemTemplate>
<FlyoutItem Title="Item1" Icon="item1.svg">
<ShellContent ContentTemplate="{DataTemplate local:page1}" Route="page1"/>
</FlyoutItem>
<FlyoutItem Title="Item2" Icon="item2.svg">
<ShellContent ContentTemplate="{DataTemplate local:page2}" Route="page2"/>
</FlyoutItem>
<FlyoutItem Title="Item3" Icon="item3.svg">
<ShellContent ContentTemplate="{DataTemplate local:page3}" Route="page3"/>
</FlyoutItem>
<Shell.FlyoutFooter>
...
</Shell.FlyoutFooter>
</Shell>
Generally, you could override the Foreground color of the Shell to accomplish this:
<Shell
x:Class="MAUIApp1.AppShell"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MAUIApp1"
FlyoutBackgroundColor="{AppThemeBinding Light=#f2f2f2, Dark=#2a2a2a}"
Shell.ForegroundColor="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}">
Alternatively, you can overwrite the style directly, by editing the Resources\Styles\styles.xaml:
<Style TargetType="Shell" ApplyToDerivedTypes="True">
<Setter Property="Shell.BackgroundColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource Gray950}}" />
<!--<Setter Property="Shell.ForegroundColor" Value="{OnPlatform WinUI={StaticResource Primary}, Default={StaticResource White}}" />-->
<Setter Property="Shell.ForegroundColor" Value="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}" />
</Style>
I couldn't find any guidance on Microsoft websites or on the winui github. I'm working on a WinUI 3 application, and have previously worked on WPF. I tried setting a default FontFamily for my application at the highest level using WPF methodologies, but it doesn't seem to work.
For example, in WPF I would include the FontFamily as a resource in the App.xaml.cs file.
<ResourceDictionary>
<FontFamily x:Key="MyCustomFont">pack://application:,,,/MyAssembly;component/Fonts/#CustomFontName</FontFamily
<ResourceDictionary.MergedDictionaries>
<!-- Removed for brevity -->
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
Then I would set this accordingly in my Window and all textblocks etc. would change to my custom font:
<Window FontFamily="{StaticResource MyCustomFont}">
I tried to do the same in WinUI but there is no FontFamily dependency property anymore on the Window, so I'm not sure how to do it.
Any help would be greatly appreciated!
After further digging through online help, I found a strategy that worked for WinUI applications.
Add the following to your App.xaml.cs and your custom font will now be the Font that you can use as default on other UIElements such as TextBlock, TextBox, etc.
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
<!-- Other merged dictionaries here -->
</ResourceDictionary.MergedDictionaries>
<!-- Other app resources here -->
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Default">
<FontFamily x:Key="MyCustomFont">ms-appx:///MyOtherAssembly/Subfolder/fontfile.ttf#MyCustomName</FontFamily>
<Style TargetType="TextBlock">
<Setter Property="FontFamily" Value="{StaticResource MyCustomFont}"/>
</Style>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>
</Application.Resources>
Is there an advantage to using a XAML Markup Extension instead of a Style tag at the application (or page) level when setting global properties?
Context:
In the "XAML Basics" docs they give the following example:
ORIGINAL
<Button Text="Do this!"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand"
BorderWidth="3"
Rotation="-15"
TextColor="Red"
FontSize="24" />
... OTHER SIMILAR BUTTONS ...
CLEAN
<ContentPage.Resources>
<ResourceDictionary>
<LayoutOptions x:Key="horzOptions"
Alignment="Center" />
<LayoutOptions x:Key="vertOptions"
Alignment="Center"
Expands="True" />
<x:Double x:Key="borderWidth">
3
</x:Double>
<x:Double x:Key="rotationAngle">-15</x:Double>
</ResourceDictionary>
</ContentPage.Resources>
<Button Text="Do this!"
HorizontalOptions="{StaticResource horzOptions}"
VerticalOptions="{StaticResource vertOptions}"
BorderWidth="{StaticResource borderWidth}"
Rotation="{StaticResource rotationAngle}"
TextColor="{StaticResource textColor}"
FontSize="{StaticResource fontSize}" />
and in the docs for Style they give the following example:
RESOURCE DICTIONARY CONTAINING BUTTON STYLE set in App.cs
<Application.Resources>
<ResourceDictionary>
<Style x:Key="buttonStyle" TargetType="Button">
<Setter Property="HorizontalOptions" Value="Center" />
<Setter Property="VerticalOptions" Value="CenterAndExpand" />
<Setter Property="BorderColor" Value="Lime" />
<Setter Property="BorderRadius" Value="5" />
<Setter Property="BorderWidth" Value="5" />
<Setter Property="WidthRequest" Value="200" />
<Setter Property="TextColor" Value="Teal" />
</Style>
</ResourceDictionary>
</Application.Resources>
BUTTON WITH STYLE APPLIED IN A ContentPage
<Button Text="These buttons" Style="{StaticResource buttonStyle}" />
Clearly they are syntactically similar but the second one is much less verbose, so what's the point of the first approach?
Obviously, they are different definitions according to the document.
XAML Markup Extensions
XAML markup extensions constitute an important feature in XAML that allow properties to be set to objects or values that are referenced indirectly from other sources. XAML markup extensions are particularly important for sharing objects, and referencing constants used throughout an application, but they find their greatest utility in data bindings.
Global Styles in Xamarin.Forms
Styles can be made available globally by adding them to the application's resource dictionary. This helps to avoid duplication of styles across pages or controls.
You will see that the range of XAML Markup Extensions is greater than Global Styles,
however Global Styles is just a special use for Styles of Resource.
I am just playing around with uwp, and I found it very limiting comparing to wpf.
Let’s say I want to do something when a mouse is over and a property that my control is bound too is false, then do something. Here is an example
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ListboxItem},
Path=IsMouseOver}" Value="true" />
<Condition Binding="{Binding IsRequired}" Value="false" />
</MultiDataTrigger.Conditions>
<Setter Property="Background" Value="#383838" />
</MultiDataTrigger>
Any ideas? The above is so useful and so flexible. Not to mention multidatatrigger which could achieve even more.
Kind Regards
Try playing around with {x:Bind} instead of {Binding}.
You may need to rework quite a bit, but if you look at the referenced page you can see the differences (from Silverlight, RT/8)
<object property="{x:Bind}" .../>
-or-
<object property="{x:Bind propertyPath}" .../>
-or-
<object property="{x:Bind bindingProperties}" .../>
-or-
<object property="{x:Bind propertyPath, bindingProperties}" .../>
In Xamarin Forms, I am not sure what the best alternative is for using RelativeSource Self.
For example, if I wanted a label to bind to its own Text or Tag property then in WPF I could do this:
<Style TargetType="TextBlock">
<Setter Property="Text">
<Setter.Value>
<MultiBinding Converter="{StaticResource TextConverter}">
<Binding RelativeSource="{RelativeSource Self}" Path="Tag" />
<Binding ElementName="Window" Path="DataContext.SelectedContent" />
<Binding ElementName="Window" Path="DataContext.CopyMade" />
</MultiBinding>
</Setter.Value>
</Setter>
</Style>
What is the best alternative for using Xamarin.Forms?
RelativeSource is not supported in Xamarin.Forms and the usual alternative is to use Source={x:Reference} markup extension.
Depending on wether or not your Style is defined as a Resource in a ResourceDictionary, and thus can be reused, you might or might not be able to use {x:Reference} as an alternative.