I have a bunch of code in a page that I would like to make reusable across multiple pages
<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<SwipeView x:Name="MainSwipeView" BackgroundColor="Transparent"
SwipeStarted="SwipeStarted" SwipeEnded="SwipeEnded" VerticalOptions="FillAndExpand">
<SwipeView.LeftItems>
</SwipeView.LeftItems>
<Grid x:Name="swipeContent">
Where I want the rest of the content to be
(This means this would surround the content, similar to <ContentPresenter/> in a ControlTemplate)
</Grid>
</SwipeView>
<StackLayout HeightRequest="50" BackgroundColor="Red">
<Label> Where the Augnito Button will be </Label>
</StackLayout>
</StackLayout>
I wanted to put this in a reusable component so I could use it in other pages as follows:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
.
.
.
.>
<MyReusableComponent>
<StackLayout>
This is where the regular contents of a page would go
</StackLayout>
</MyReusableComponent>
</ContentPage>
I don't think I can use a ControlTemplate because my custom view has code behind it in a xaml.cs file to make it work, so is there another way to do this?
Related
I want to put my text button "login" to the foreground and into the google maps view. The aqua color should not be visible.
This question is related to Xamarin View - How to put TextButton at the end and to the foreground, but actually does not solve my problem with google maps.
<?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="StandApp.Views.MainMapPage"
xmlns:maps="clr-namespace:Xamarin.Forms.GoogleMaps;assembly=Xamarin.Forms.GoogleMaps"
Title="MapsPage1">
<ContentPage.Content>
<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
HeightRequest="1" BackgroundColor="Aqua">
<maps:Map x:Name="map" MyLocationEnabled="True" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"/>
<StackLayout Padding="10, 10, 10, 10">
<Button VerticalOptions="Center" Text="Login" />
</StackLayout>
</StackLayout>
</ContentPage.Content>
</ContentPage>
My current state looks like this:
use a Grid with two rows. Make the Map span both rows, then add the Button to only the 2nd row, on top of the map
<Grid RowDefinitions="80*,20*">
<Map Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" ... />
<Button Grid.Row="1" Grid.Column="0" ... />
</Grid>
I user flex in my every project on html and css.
I find in XAML <flexlayout work same kind of so I try
<ContentPage.Content>
<StackLayout>
<FlexLayout>
<FlexLayout>
<Label Text="It don't work"></Label>
</FlexLayout>
<Label Text="Is it work"></Label>
</FlexLayout>
</StackLayout>
</ContentPage.Content>
which don't show any flex inside flex so nothing in it but i can see it work stuff. What is i am doing wrong here kind of still new in xarmarin/xaml
Microsoft doc are kind of basic also https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/flex-layout
I find one thread at github to discuss about nested FlexLayout is not visible:
https://github.com/xamarin/Xamarin.Forms/issues/9537.
I also find one workaround that you can place your child flex layout inside it will work:
<StackLayout>
<FlexLayout>
<StackLayout WidthRequest="100">
<FlexLayout>
<Label Text="It don't work" />
</FlexLayout>
</StackLayout>
<Label FlexLayout.AlignSelf="Center" Text="Is it work" />
</FlexLayout>
</StackLayout>
I have a main Navigation Page that is a Tabbed Page, linking different views.
I've set the in the main Tabbed Page and it works, but I would like to set it different for each page.
This is the Tabbed Page:
<TabbedPage
NavigationPage.HasBackButton="False"
BackgroundColor="Black"
xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TestProiectLicenta.Views.UserPageForm" xmlns:local="clr-namespace:TestProiectLicenta.Views"
xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin"
xmlns:refresh="clr-namespace:Refractored.XamForms.PullToRefresh;assembly=Refractored.XamForms.PullToRefresh">
<TabbedPage.Children>
<local:CarsListPage Title="Cars" Icon="new_car_icon"/>
<local:NewCarsListPage Title="New Cars" Icon="new_car_icon"/>
<local:ChooseMethodFormPage Title="Add Car" Icon="new_add_icon" />
<local:UserViewPage Title="New Page Test" Icon="new_user_icon" />
<ContentPage Title="Settings" Icon="new_settings_icon.png">
<StackLayout VerticalOptions="Center" HorizontalOptions="Center">
<StackLayout Orientation="Horizontal">
<StackLayout Orientation="Horizontal">
<Image Source="face_id" />
<Label Text="FaceID Login?" />
</StackLayout>
<Switch IsToggled="false" Toggled="Handle_Toggled" x:Name="Fid" />
</StackLayout>
<Button Text="Sign Out" Clicked="SignOutButton" />
</StackLayout>
</ContentPage>
</TabbedPage.Children>
</TabbedPage>
The views are Content Pages.
I would like to have a Title View for the first page with some controls, like search, delete etc. (it's a list of cars) and the user's picture, and the others with the title and maybe other controls.
Usually what I do is I set the Title property in every ContentPage and it reflects on to the page when I flip through tabs
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
NavigationPage.BackButtonTitle=""
Title="My Demo Title">...
Update:
In your TabbedPage, you can add the NavigationPage's TitleView something like below
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
NavigationPage.BackButtonTitle=""
Title="My Demo Title">
<NavigationPage.TitleView>
<StackLayout Orientation="Horizontal">
<Image x:Name="TitleImage"/>
<Label x:Name="TitleLabel"/>
</StackLayout>
</NavigationPage.TitleView>
Hope you can take care of the alignment and everything else.
So Now using the above names you will be able to access the title image and label whenever you please!!
I have found a solution to my problem. Inside the TabbedPage, for each page that you need to have a special Navigation Bar you declare it like this:
<NavigationPage Title="Schedule" IconImageSource="schedule.png">
<x:Arguments>
<local:SchedulePage />
</x:Arguments>
</NavigationPage>
Then you edit the new page and add the
<NavigationPage.TitleView/>
If I want to move a button up the screen the same distance as the height of another control on the page I can do this:
this.myControl.TranslateTo(20, - this.myOtherControl.Height);
Is there a way to do this in XAML?
Is your situation like the screenshot below?
Do you want to achieve it like this screenshot?
You could used TranslationY="{ Binding Path=TranslationY ,Source={x:Reference btn1}}" to achieve that.
<StackLayout Orientation="Horizontal" VerticalOptions="Start">
<StackLayout Orientation="Horizontal" HeightRequest="100" Padding="20,0,0,0">
<Button x:Name="btn1" Text="Aqua" HeightRequest="60" WidthRequest="50" TranslationY="23" />
</StackLayout>
<StackLayout Orientation="Horizontal" HeightRequest="100" Padding="20,0,0,0">
<Button HeightRequest="60" WidthRequest="50" Text="llll" TranslationY="{ Binding Path=TranslationY ,Source={x:Reference btn1}}"/>
</StackLayout>
</StackLayout>
I'm new to Xamarin.Forms and Xaml and this. I have made a custom control i would like to utilize as a custom background throughout my app. The custom control is made as a contentview and looks like this.
<ContentView.Content>
<ScrollView>
<StackLayout>
<RelativeLayout Padding="0" BackgroundColor="Teal" VerticalOptions="Start">
<Image Source="TopBG" BackgroundColor="Purple" Aspect="Fill" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}" RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.6}" />
</RelativeLayout>
<Frame Padding="0" Margin="0,-25,0,0" CornerRadius="25" BackgroundColor="{StaticResource Key=Charcoal}">
<StackLayout Margin="0,0,0,0" VerticalOptions="StartAndExpand" BackgroundColor="Transparent" x:Name="InnerStack">
<!--I can insert custom controls here, but htat would determine this custom contentView for one purpose only-->
</StackLayout>
</Frame>
</StackLayout>
</ScrollView>
</ContentView.Content>
The custom control is then implemented on my ContentPage as such:
<ContentPage.Content>
<CustomLayouts:ContentBackground>
<!-- I would instead like to be able to add content here, and have it go into the stacklayout of the custom view.
This way i could utilize the same background but have different content go into it depending on my wishes -->
</CustomLayouts:ContentBackground>
</ContentPage.Content>
If i add a label inside that later example it just overrides everything and places a label, but not as intended inside the designated inner stackview of my ContentBackground.
The only thing i can think of is figuring some way of accesing the InnerStackView of my custom contentBackground, then accesing the children property of that Stacklayout and then Children.add(View) to that stack layout. Allthough this means i will have to do it from code and i would like to achieve this behaviour in XAML since that is more familiar to me.
Is this the only way or is there an alternative to achieve my goal in XAML?
Try use ContentProperty.Simple example:
[ContentProperty("AddContent")]
public class YourView: ContentView
{
protected ContentView ContentContainer;
public View AddContent
{
get => ContentContainer.Content;
set => ContentContainer.Content = value;
}
......
}
//in xaml
<YourView>
<Label Text="Hello world"/>
</YourView>
In case someone still trying this, you can use ControlTemplate to have a view on multiple pages or app wide,
<Application xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="SimpleTheme.App">
<Application.Resources>
<ResourceDictionary>
<ControlTemplate x:Key="TealTemplate">
<Grid>
...
<BoxView ... />
<Label Text="Control Template Demo App"
TextColor="White"
VerticalOptions="Center" ... />
<ContentPresenter ... />
<BoxView Color="Teal" ... />
<Label Text="(c) Xamarin 2016"
TextColor="White"
VerticalOptions="Center" ... />
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="AquaTemplate">
...
</ControlTemplate>
</ResourceDictionary>
</Application.Resources>
</Application>
The magic here is the ContentPresenter, you can place anything inside it will appear just fine. Then to use the desired template, set it for your ContentView.ControlTemplate like so,
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="SimpleTheme.HomePage">
<ContentView x:Name="contentView" Padding="0,20,0,0"
ControlTemplate="{StaticResource TealTemplate}">
<StackLayout VerticalOptions="CenterAndExpand">
<Label Text="Welcome to the app!" HorizontalOptions="Center" />
<Button Text="Change Theme" Clicked="OnButtonClicked" />
</StackLayout>
</ContentView>
</ContentPage>
Checkout the official docs here.
If you want to create a custom control/layout that you can insert on any page, then you can create your own ContentView with ContentPresenter that will hold your views children,
<!-- Content -->
<ContentPresenter Content="{Binding SomeContent}"/>
where SomeContent can be a BindableProperty of type View.
You can also see an example of custom layouts here.