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.
Related
So here is my generally idea:
I have a flyout page in which i want to press different buttons to load different blazor pages in the flyout.details. The goal is to replace the default navbar of the blazor example with native elements of the different frameworks in the .NET MAUI XAML. (Image) My first thought was accessing the navigationManager of the blazor pages but no idea how. Does that even makes sense? I feel like I am missing sth very crucial because it seems to be a very natural thing to do with .net Maui Blazor.
Important to understand is that i want to stay on the same xaml page. I just want to change the loaded Blazor page without the need to define the nav at in the Blazor page.
I tried to access it via injection,
which kinda confused me but tried it any ways (got it from a forum). I feel like I am not understanding something fundamental.
XAML:
<FlyoutPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MauiTest"
x:Class="MauiTest.MainPage"
BackgroundColor="{DynamicResource PageBackgroundColor}">
<FlyoutPage.Flyout>
<ContentPage Title="FlyoutMenu">
<VerticalStackLayout>
<Label x:Name="TestLabel"
Text="Welcome to .NET MAUI!"
VerticalOptions="Center"
HorizontalOptions="Center" />
<Button Text="Counter" Clicked="OnCounterClicked" x:Name="Counter" />
<Button Text="Test" Clicked="OnTestButtonClicked" x:Name="TestButton"/>
<WebView BackgroundColor="red" Source="http://0.0.0.0/app/counter" />
</VerticalStackLayout>
</ContentPage>
</FlyoutPage.Flyout>
<FlyoutPage.Detail>
<ContentPage>
<BlazorWebView x:Name="blazorWebView" HostPage="wwwroot/index.html">
<BlazorWebView.RootComponents>
<RootComponent Selector="#app" ComponentType="{x:Type local:Main}" />
</BlazorWebView.RootComponents>
</BlazorWebView>
</ContentPage>
</FlyoutPage.Detail>
For the methode behind it I don't really have any idea...
C#:
private void OnTestButtonClicked(object sender, EventArgs e)
{
//Navigating to a site
}
Don't let yourself irritate from the other buttons: I am playing around.
To replace the nav bar
Maui Blazor have designed the structure for us. The easiest way i think is to modify it.
The NavMenu.razor (default blazor template) define the appearance and structure of the navigation bar. You could modify it.
<div class="sidebar">
<NavMenu />
</div>
Another way is that you do it like .net maui FlyoutPage. In MainPage
<FlyoutPage.Flyout>
<MauiPages:FlyoutMenuPage x:Name="flyoutPage" />
</FlyoutPage.Flyout>
<FlyoutPage.Detail>
<NavigationPage>
<x:Arguments>
<local:ContactsPage />
</x:Arguments>
</NavigationPage>
</FlyoutPage.Detail>
I have tested it and it worked well just like the official docs.
For more info, you could refer to FlyoutPage and for sample code Xamarin flyout doc could be help
2.I don't think we could navigate from a maui page to razor component as their route ways are much different. For a walkaround, you could wrap razor component in a maui contentpage.
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MauiBlazor"
>
<BlazorWebView HostPage="wwwroot/index.html">
<BlazorWebView.RootComponents>
<RootComponent Selector="#app" ComponentType="{x:Type local:Main}" />
</BlazorWebView.RootComponents>
</BlazorWebView>
</ContentPage>
And then use maui navigation:
App.Current.MainPage.Navigation.PushAsync(new MauiPages.MyPage());
========origin answer============
Seems you want to close the sidebar created by Blazor. That's MainLayout.razor in Shared folder. You could simply remove the following line:
<div class="sidebar">
<NavMenu />
</div>
Then the default sidebar would disappear.
if you want navigate, you could try the following:
App.Current.MainPage.Navigation.PushAsync(new MauiPages.MyPage());
Hope it works for you.
I am trying to create this layout in Xamarin XAML but I cannot figure out how to combine TabView within a TabView. I want 3 main tabs in the bottom and for each page 1-2 subtabs. On each subtab I will need to have a ScrollView(I think thats the right element to use) with list items, which makes it even more complex. Like this picture:
Any idea or guidance of how to achieve this?
I am trying to create this layout in Xamarin XAML but I cannot figure out how to combine TabView within a TabView.
If you want to do that, you could nest a TabView in Tabbed page.
TabView:https://github.com/chaosifier/TabView
Create three tab pages in views folder.
Tabbed Page:
<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage
x:Class="TabbedPageDemo.MainPage"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:Views="clr-namespace:TabbedPageDemo.Views"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
BarBackgroundColor="Blue"
BarTextColor="White"
mc:Ignorable="d">
<Views:Tab1_Page Title="TAB1" />
<Views:Tab2_Page Title="TAB2" />
<Views:Tab3_Page Title="TAB3" />
</TabbedPage>
And then use TabView in you tab1 page.
Tab1_Page:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
x:Class="TabbedPageDemo.Views.Tab1_Page"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:local="clr-namespace:Xam.Plugin.TabView;assembly=Xam.Plugin.TabView"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<ContentPage.Content>
<local:TabViewControl>
<local:TabViewControl.ItemSource>
<local:TabItem HeaderText="SUBTAB1">
<StackLayout VerticalOptions="Start" Padding="10">
<Button
BackgroundColor="White"
Text="List Item"
TextColor="Black"/>
</StackLayout>
</local:TabItem>
<local:TabItem HeaderText="SUBTAB2">
<Image Source="pink.jpg" />
</local:TabItem>
</local:TabViewControl.ItemSource>
</local:TabViewControl>
</ContentPage.Content>
</ContentPage>
Please note, if you want to make the tabs in tabbed page in the bottom. Add the code below in your MainPage.
On<Android>().SetToolbarPlacement(ToolbarPlacement.Bottom);
You could download the code sample from GitHub in TabbedPage_NestedTabView/TabbedPageDemo
https://github.com/WendyZang/Test.git
I can't seem to get Ellipse to work at all in my Xamarin project.
It just says "The type or namespace name 'ImageBrush' does not exist in the namespace 'Xamarin.Forms' (are you missing an assembly reference?)" and I have no clue what's up. I've checked video's but there everything seems to work fine...
Anyone know what I'm doing wrong?
EDIT:
I forgot to post the code along with the question. Thanks for the reminder!
I'm trying to get the Logo.png to display as a circle. I
I can't seem to get Ellipse to work at all in my Xamarin project.
It just says "The type or namespace name 'ImageBrush' does not exist in the namespace 'Xamarin.Forms' (are you missing an assembly reference?)" and I have no clue what's up. I've checked video's but there everything seems to work fine...
Anyone know what I'm doing wrong?
EDIT:
I forgot to post the code along with the question. Thanks for the reminder!
I'm trying to get the Logo.png to display as a circle. I
<?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="GrowersClassified.Views.LoginPage">
<StackLayout x:Name="MasterLayout">
<StackLayout x:Name="LogoStack" Padding="40, 80, 40 , 0">
<Ellipse Height="100" Width="100">
<Ellipse.Fill>
<ImageBrush ImageSource="Logo.png"/>
</Ellipse.Fill>
</Ellipse>
</StackLayout>
<StackLayout Padding="40, 20, 40, 0">
<StackLayout x:Name="LoginEntries" VerticalOptions="StartAndExpand">
<ActivityIndicator x:Name="ActivitySpinner" Color="Red" IsRunning="True"></ActivityIndicator>
<Label x:Name="Lbl_Username" Text="Username"/>
<Entry x:Name="Entry_Username" Placeholder="Username"/>
<Label x:Name="Lbl_Password" Text="Password"/>
<Entry x:Name="Entry_Password" Placeholder="Password"/>
<Button x:Name="Btn_Signin" Text="Log in" Clicked="SigninProcedure"/>
</StackLayout>
</StackLayout>
</StackLayout>
</ContentPage>
I am trying xamarin forms for the first time so that I can build my app fro android and Iphone
I need to add an image to my layout MainPage.xaml and have this layout.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:ReassuredMobileApp"
x:Class="ReassuredMobileApp.MainPage">
<StackLayout
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<StackLayout
VerticalOptions="Start"
HorizontalOptions="FillAndExpand"
AutomationId="TitleBar">
<Label
Text="Hello, world!"></Label>
<Image
WidthRequest="200"
HeightRequest="50"
VerticalOptions="Start"
HorizontalOptions="Start"
Source="reassured_text.png" />
</StackLayout>
</StackLayout>
But the image "reassured_text.png" is not being displayed when I run the app in the emulator. I can see the Hello, World! text just fine (still cant see the image when I remove this)
My image is under my project as "reassured_text.png"
I've tried to follow tutorials online, but don't understand what is being said, and the ones I could understand didn't work. I've also tried to format the tag like
<Image
####Stuff here>
</Image>
but that didn't have an effect.
Directory tree:
Solution 'MyApp'
c# - MyApp
Dependencies
App.xaml
App.xaml.cs
MainPage.xaml
MainPage.xaml.cs
reassured_text.png
MyApp.Android
drawable
reassured_text.png
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
layout
values
MyApp.Ios
//I haven't touched anything here
1.Put the image reassured_text.png in Android project i.e in Resource/Drawable folder.
or
2.Put the image reassured_text.png in portable project & set build action to "Embedded Resource" & in .cs file do like this:
imagecontrol.FromResource="reassured_text.png";
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>