I'm creating some application styles in my app and want to define some explicit colors to use by key. In WPF XAML, I would create a SolidColorBrush to define the RGB/ARGB values. In Xamarin XAML, do I need to convert this to hex to define the same color in XAML? The snippet below is from WPF XAML.
<SolidColorBrush
x:Key="blueColor">
<SolidColorBrush.Color>
<Color
A="255"
R="50"
G="150"
B="225" />
</SolidColorBrush.Color>
</SolidColorBrush>
Xamarin.Forms provides a cross-platform Color class.
Using from Xaml:
Colors can also be easily referenced in Xaml using the defined color names or the Hex representations shown here:
<Label Text="Sea color" BackgroundColor="Aqua" />
<Label Text="RGB" BackgroundColor="#00FF00" />
<Label Text="Alpha plus RGB" BackgroundColor="#CC00FF00" />
<Label Text="Tiny RGB" BackgroundColor="#0F0" />
<Label Text="Tiny Alpha plus RGB" BackgroundColor="#C0F0" />
The Color class provides a number of methods to build a color instance
Named Colors - a collection of common named-colors, including Red , Green , and Blue .
FromHex - string value similar to the syntax used in HTML, eg "00FF00".
Alpha is can optionally be specified as the first pair of characters ("CC00FF00").
FromHsla - Hue, saturation and luminosity double values, with optional alpha value (0.0-1.0).
FromRgb - Red, green, and blue int values (0-255).
FromRgba - Red, green, blue, and alpha int values (0-255).
FromUint - set a single double value representing argb .
Ref: Using Colors in Xamarin.Forms
According to Xamarin's WorkingWithColors sample, you can do something like this:
<Color
x:Key="BlueColor">
<x:Arguments>
<x:Double>.4</x:Double> <!-- R/255 -->
<x:Double>.62</x:Double> <!-- G/255 -->
<x:Double>.95</x:Double> <!-- B/255 -->
<x:Double>.2</x:Double> <!-- A: 0.0-1.0 -->
</x:Arguments>
</Color>
Their example doesn't show the use of the alpha channel, but I just tested it and as of May 30th, 2017, it seems to work just fine.
However, be aware that this doesn't seem to be documented. The Xamarin.Forms "Colors" guide, which goes with the code above, doesn't mention it either, so this may change without notice.
In direct answer to the question, you cannot specify a x:FactoryMethod="FromRgb" in xaml for specifying colours in RGB from resources. In order to work around this you must specify colours using the 'FromHex' approach and converting as appropriate e.g.
<Color x:Key="somethingGreenish" x:FactoryMethod="FromHex">
<x:Arguments>
<x:String>#97cd75</x:String>
</x:Arguments>
</Color>
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="ListViewDemo.MainPage"
Title="BoxView using Color in XAML">
<StackLayout>
<Label Text="My Box View" FontSize="Large" BackgroundColor="LightBlue" />
<BoxView HeightRequest="50" WidthRequest="50" HorizontalOptions="Center">
<BoxView.Color>
<Color x:FactoryMethod="FromRgb">
<x:Arguments>
<x:Int32>192</x:Int32>
<x:Int32>75</x:Int32>
<x:Int32>150</x:Int32>
</x:Arguments>
</Color>
</BoxView.Color>
</BoxView>
</StackLayout>
Related
I've followed existing answer on how to add image as a background for your MAUI app. This works fine, but I would like to have image repeated rather than filled. Equivalent with CSS would be background-repeat: repeat;
Anyone knows a way to achieve this?
I currently have the following code from answer I've mentioned before
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
x:Class="CartographersMapGenerator.View.Testing"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
Title="Testing">
<Grid>
<Image Aspect="AspectFit" Source="dotnet_bot.png" />
<Grid>
<Label>
All page content goes here
</Label>
</Grid>
</Grid>
</ContentPage>
Which gives the following result:
First, there is no repeat option for the The in maui. For more information about Images in Xamarin.Forms.
Second, you can refer to the SkiaSharp bitmap tiling, it provides the method to tile bitmaps.
I have been dipping my toes in the .NET Maui framework, but unfortunately so far it has been quite disappointing. There seem to be multiple errors related to Shell (title view not working properly) and controls themselves. I have the following main page xaml file:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiApp1.MainPage">
<StackLayout Background="#111111" >
<Frame HasShadow="True" Margin="10" CornerRadius="10" BackgroundColor="#222222">
<StackLayout Spacing="30">
<Grid ColumnDefinitions="30,*">
<Label Text="R" FontSize="Medium" TextColor="White" />
<Slider GridLayout.Column="1" MinimumTrackColor="Red" ThumbColor="Red" MaximumTrackColor="#AAAAAA" />
</Grid>
<Grid ColumnDefinitions="30,*">
<Label Text="G" FontSize="Medium" TextColor="White" />
<Slider GridLayout.Column="1" MinimumTrackColor="#7FFF00" ThumbColor="#7FFF00" MaximumTrackColor="#AAAAAA" />
</Grid>
</StackLayout>
</Frame>
</StackLayout>
</ContentPage>
which is just a stack layout with a single frame that houses two sliders with labels. However, the two sliders seem to have a predefined width, as they are not filling the remaining space:
As soon as I add anything to any of the controls in the xaml while the app is running, for example a green background to the first grid, both sliders resize to the correct size:
However, when I reload the application with this change, the sliders go back to the wrong size:
There are additional issues that I encountered as well, when placing this content page as a flyout item in the shell where android behaviour was as described here, but additionally the Sliders are not interactable in Windows version. In this example with a clean project they do work in Windows version.
Try with any third-party packages like syncfusion, etc. to meet your requirements.
How can I design an underlined custom textbox in UWP. Example of such textbox is given below -
You could set BorderBrush="Purple" and BorderThickness="0,0,0,2" to change the border color and border thickness directly.
As follows:
<TextBox Width="150" Height="40" BorderBrush="Purple" BorderThickness="0,0,0,2">
<TextBox.Resources>
<!-- To also have the focused TextBox only have a border at the bottom,
we need to override this resource. -->
<Thickness x:Key="TextControlBorderThemeThicknessFocused">0,0,0,2</Thickness>
</TextBox.Resources>
</TextBox>
I'm using OxyPlot in a Xamarin Forms project.
In WPF, the tracker (popup when I click on a datapoint) has a white background with yellow text, making it impossible to see.
In UWP however, it is just fine with a yellow background and black text.
How can I change the font color of the tracker to black?
xmlns:oxy="clr-namespace:OxyPlot.Xamarin.Forms;assembly=OxyPlot.Xamarin.Forms"
<oxy:PlotView Model="{Binding MyModel}"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
</oxy:PlotView>
You can change the default colors of Oxyplot Tracker by modifying the Control Template. For example,
<oxy:PlotView Height="500" Width="500" Model="{Binding MyModel}">
<oxy:PlotView.DefaultTrackerTemplate>
<ControlTemplate>
<oxy:TrackerControl Position="{Binding Position}" LineExtents="{Binding PlotModel.PlotArea}">
<oxy:TrackerControl.Background>
<SolidColorBrush Color="LightBlue" />
</oxy:TrackerControl.Background>
<oxy:TrackerControl.Content>
<TextBlock Text="{Binding}" Margin="7" Foreground="Black" />
</oxy:TrackerControl.Content>
</oxy:TrackerControl>
</ControlTemplate>
</oxy:PlotView.DefaultTrackerTemplate>
</oxy:PlotView>
Of course, you can set the binding as well in the above, but for the sake of example, given the color directly in above example.
I need to override predefined style of the ListViewItem to not have visible selection. I know how to do it if I copy the whole style into my resources and edit it. But I can't believe there is no lighter way than copy-past the whole style.
So I found that default ListViewItem style uses the following brushes for the selection:
<UserControl.Resources>
<SolidColorBrush x:Key="ListViewItemPointerOverBackgroundThemeBrush" Color="Yellow" />
<SolidColorBrush x:Key="ListViewItemSelectedBackgroundThemeBrush" Color="Yellow" />
<SolidColorBrush x:Key="ListViewItemSelectedForegroundThemeBrush" Color="Yellow" />
<SolidColorBrush x:Key="ListViewItemSelectedPointerOverBackgroundThemeBrush" Color="Yellow" />
<SolidColorBrush x:Key="ListViewItemSelectedPointerOverBorderThemeBrush" Color="Yellow" />
</UserControl.Resources>
Note: I've put all those brushes to my UserControl as well as set them all to the yellow color. But I don't have any yellow color in my UI, alas.
So the question is: how can I force the default template to use my overridden brushes?
And second(optional) question: maybe I'm doing it wrong and there is a better way to achieve my goal?
As Vasile said you need to override the brushes, this has to be done on App level, as far as I know you will need to template the whole control if you only want to change one control or on one page.
If you are curious, you can find all the brushes under:
C:\Program Files (x86)\Windows Kits\8.0\Include\WinRT\Xaml\Design
To override the listview colors you add this in your App.xaml/resource dictionary, I've added some comments here so you can see which brush does what:
<ResourceDictionary x:Key="Default">
<!--After selection - Background-->
<SolidColorBrush x:Key="ListViewItemSelectedBackgroundThemeBrush" Color="Yellow"></SolidColorBrush>
<!--When pointer hovers over an item - Background-->
<SolidColorBrush x:Key="ListViewItemPointerOverBackgroundThemeBrush" Color="Red"></SolidColorBrush>
<!--When the item is selected (first few milliseconds) - Background-->
<SolidColorBrush x:Key="ListViewItemSelectedPointerOverBackgroundThemeBrush" Color="Green"></SolidColorBrush>
<!--When the item is selected (first few milliseconds) - Border-->
<SolidColorBrush x:Key="ListViewItemSelectedPointerOverBorderThemeBrush" Color="Black"></SolidColorBrush>
</ResourceDictionary>
You have to override them in App.xaml file, something like this (at least that's how I did) :
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Default">
<SolidColorBrush x:Key="ListViewItemSelectedPointerOverBorderThemeBrush" Color="Transparent" />
<SolidColorBrush x:Key="ListViewItemPointerOverBackgroundThemeBrush" Color="Transparent" />
<SolidColorBrush x:Key="ListViewItemSelectedPointerOverBackgroundThemeBrush" Color="Transparent" />
<SolidColorBrush x:Key="ListViewItemSelectedBackgroundThemeBrush" Color="Transparent" />
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
If you need more customization (in my case the ListView items were some pictures), here's a pretty useful link for changing default Color Controls .
In Windows 8.1 Universal App in shared App.xaml I use this code
<Application
x:Class="XXX.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:XXX">
<Application.Resources>
<ResourceDictionary>
<SolidColorBrush x:Key="ListViewItemPointerOverBackgroundThemeBrush" Color="Transparent" />
</ResourceDictionary>
</Application.Resources>
</Application>
I have been trying similar things before with no luck. I think you just need to update the entire template.