I want to build few pages with specific Padding in sytacklayout. I do not want to wrote it in every pages. And its not good design considering if I want to change it in future. Is there a way to define padding in static resource? So that I can define it in one place App.xml and use it in other pages.
I have tried
<ContentPage.Resources>
<ResourceDictionary>
<x:String x:Key="padding">45, 0, 45, 0</x:String>
</ResourceDictionary>
</ContentPage.Resources>
<StackLayout Padding="{StaticResource padding}">
<Label Text="{StaticResource padding}"/>
</StackLayout>
As said, you should use Thickness. In addition, for setting your resource at the Application level, put it in your App.xaml file:
<Application ...>
<Application.Resources>
<ResourceDictionary>
<Thickness x:Key="padding">45,0, 45, 0</Thickness>
// some others resources...
</ResourceDictionary>
</Application.Resources>
</Application>
Then call it from your different pages:
<ContentPage>
<StackLayout Padding="{StaticResource padding}">
<Label Text="{StaticResource padding}"/>
</StackLayout>
...
link to documentation
Hope it helps!
Just use Thickness instead of a string:
<ContentPage.Resources>
<ResourceDictionary>
<Thickness x:Key="padding">45,0</Thickness>
</ResourceDictionary>
</ContentPage.Resources>
<StackLayout Padding="{StaticResource padding}">
<Label Text="{StaticResource padding}"/>
</StackLayout>
Related
Total newbie Xamarin user.
I'm trying to add a background image to all the pages in the mobile app.
This was a great resource: Xamarin.Forms How to add Backgroud Image on all pages in App
However, I'd like to adjust the Aspect property of the image to AspectFill, so it's not so scrunched up. This is where I'm having trouble.
<Application xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MyApp.App">
...
<Application.Resources>
<ResourceDictionary>
<Style TargetType="ContentPage" ApplyToDerivedTypes="True" >
<Setter Property="BackgroundImageSource" Value="background_image.png" />
</Style>
...
This sets the background image. How do I adjust the Aspect property for all pages? I've tried nesting an <Image Aspect="AspectFill" /> tag within the Setter property tag, but VS gives a warning that the "property 'Value' is set more than once". Could someone help me out? I'm sure I'm making some dumb error or I've misunderstood something about Xamarin.
Thanks.
Yes, we can use the following method to set the BackgroundImageSource for all ContentPage in your app：
<Application.Resources>
<ResourceDictionary>
<Style TargetType="ContentPage" ApplyToDerivedTypes="True" >
<Setter Property="BackgroundImageSource" Value="background_image.png" />
</Style>
</ResourceDictionary>
</Application.Resources>
But we couldn't set the AspectFill property for it while Aspect is specifically a property of the Image control as jason said.
Of course,if you need a solution that allows you to change the AspectRatio and adjust the image you can use this:
<?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="Pages.PhotoPage">
<Grid >
<Image Source="background.png" Aspect="AspectFit" />
<!-- Place here the rest of the layout for the page. -->
</Grid >
</ContentPage>
Or use the solution j-petty said:
<AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Image AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" Source="sample.jpg" Aspect="AspectFill"/>
<StackLayout AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="1,1,1,1">
<!--Content-->
<StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" >
<Label x:Name="KategoriePicker" Text="Was möchtest du essen?" BackgroundColor="White" />
<Label x:Name="OrtTextBox" Text="Dein Lieferort" BackgroundColor="White" />
</StackLayout>
</StackLayout>
</AbsoluteLayout>
I have a color defined in my App.xaml resource dictionary. When I try to reference it in a ContentView I get a run time exception:
StaticResource not found for key NavbarBackground
Do I need to merge the resource dictionary in App.xaml?
App.xaml
<Application.Resources>
<ResourceDictionary>
<!--Global Styles-->
...
<Color x:Key="NavbarBackground">Black</Color>
...
</ResourceDictionary>
</Application.Resources>
CustomTitleView.xaml
<ContentView>
...
<ContentView.Content>
...
<ImageButton Source="search.png" HorizontalOptions="Center"
VerticalOptions="CenterAndExpand" BackgroundColor="{StaticResource NavbarBackground}" />
...
</ContentView.Content>
</ContentView>
If you are using separate xaml file to define resources use ResourceDictionary. If you are settings values inside App.xaml set them inside Application.Resources. Refer to docs here
My application has objects that are surrounded by this:
<StackLayout HeightRequest="49" BackgroundColor="Red" Orientation="Vertical" Margin="0" >
<Grid VerticalOptions="CenterAndExpand">
<!-- XAML here -->
</Grid>
</StackLayout>
I would like to make it so that I don't need to enter the XAML on the 1st, 2nd, last and next to last lines each time.
Can I use something like a control template to avoid doing this and if so how would I use it?
You will need to use a combination of ContentPresenter and ControlTemplate (as mentioned in the note on this page)
On a ContentPage (or ContentView), the Content property can be assigned and the ControlTemplate property can also be set. When this occurs, if the ControlTemplate contains a ContentPresenter instance, the content assigned to the Content property will be presented by the ContentPresenter within the ControlTemplate.
<ControlTemplate x:Key="DefaultTemplate">
<StackLayout HeightRequest="49" BackgroundColor="Red"
Orientation="Vertical" Margin="0">
<Grid VerticalOptions="CenterAndExpand">
<ContentPresenter /> <!-- This line is replaced by actual content -->
</Grid>
</StackLayout>
</ControlTemplate>
Usage:
<ContentView ControlTemplate="{StaticResource DefaultTemplate}">
<!-- XAML here (basically the view that is to be surrounded by above layout) -->
<Label TextColor="Yellow" Text="I represent the content" />
</ContentView>
Yes, Xamarin also provide the Control Template functionalities in XAML.
Write a below code in App.xaml
<Application.Resources>
<ResourceDictionary>
<ControlTemplate x:Key="TealTemplate">
<Grid>
<Label Text="Control Template Demo App"
TextColor="White"
VerticalOptions="Center" />
</ControlTemplate>
</ResourceDictionary>
</Application.Resources>
Call the template in side ContentPage
<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>
I tried to use my custom IValueConverter which declared in the Xaml file.
The Converter Class was defined inside the EnglishKeyboard. The convert declared in a ResourceDictionary inside the xaml below. I tried to use this converter at the end of the code below
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:local="clr-namespace:ProjectorRemote"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="ProjectorRemote.EnglishKeyboard"
x:Name="englishKeyboard">
<ContentView.Resources>
<ResourceDictionary>
<local:EnglishKeyboard.StringCaseConverter x:Key="caseConverter">
</local:EnglishKeyboard.StringCaseConverter>
<!-- lower 1 characters -->
<x:String x:Key="lower_1">q</x:String>
<x:String x:Key="lower1_2">w</x:String>
<x:String x:Key="lower1_3">e</x:String>
<x:String x:Key="lower1_4">r</x:String>
<x:String x:Key="lower1_5">t</x:String>
<x:String x:Key="lower1_6">y</x:String>
<x:String x:Key="lower1_7">u</x:String>
<x:String x:Key="lower1_8">i</x:String>
<x:String x:Key="lower1_9">o</x:String>
<x:String x:Key="lower1_0">p</x:String>
</ResourceDictionary>
</ContentView.Resources>
<ContentView.Content>
<StackLayout
Orientation="Vertical"
HorizontalOptions="Fill"
VerticalOptions="End">
<Grid HorizontalOptions="Center" ColumnSpacing="1">
**<local:BaseKeyView
Grid.Column="0"
Text="{StaticResource lower1_1,
Converter={StaticResource caseConverter},
ConverterParameter={Binding IsUpper}}">
</local:BaseKeyView>**
It work with no error but the converter didn't get called after I changed to the code below
<local:BaseKeyView
Grid.Column="0"
Text="{StaticResource lower1_1,
Converter={StaticResource caseConverter},
ConverterParameter={Binding IsUpper}}">
</local:BaseKeyView>
I fixed the problem by changing to this
{Binding Source={StaticResource lower1_1}, Converter={ ..... –
I have contentview as below
<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:convertors="clr-namespace:myApp.Convertors;assembly=myApp"
x:Class="myApp.cwPart">
<ContentView.Content>
<StackLayout Orientation="Horizontal"
BackgroundColor="White">
<RelativeLayout Style="{StaticResource myStyle}"
HorizontalOptions="Start"
VerticalOptions="Center">
I am referencing this ContentView inside multiple ContentPages as example one below. Every ContentPage should set different BackgroundColor, Height and Width. That's why I thought that style should be defined in the ContentPage but it is throwing error that it is not recognized. How can I achieve this?
PS, interesting thing I am using Gorilla player to achieve such changes and Gorilla player doesn't return any error :)
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:convertors="clr-namespace:myApp.Convertors;assembly=myApp"
xmlns:c="clr-namespace:myApp;assembly=myApp"
x:Class="myApp.AppLogsPage"
Title="{Binding AppName}"
x:Name="AppLogsPage">
<ContentPage.Resources>
<ResourceDictionary>
<Style x:Key="myStyle" TargetType="RelativeLayout">
<Setter Property="HeightRequest" Value="148"/>
<Setter Property="WidthRequest" Value="80"/>
<Setter Property="BackgroundColor" Value="White"/>
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<StackLayout x:Name="MainHolder">
<c:cwPart />
...
If I define ContentView Resources as below, it works fine but I am not able to override the Style defined inside ContentView
<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:convertors="clr-namespace:myApp.Convertors;assembly=myApp"
x:Class="myApp.cwPart">
<ContentView.Resources>
<ResourceDictionary>
<Style x:Key="myStyle" TargetType="RelativeLayout">
<Setter Property="HeightRequest" Value="148"/>
<Setter Property="WidthRequest" Value="80"/>
<Setter Property="BackgroundColor" Value="White"/>
</Style>
</ResourceDictionary>
</ContentView.Resources>
<ContentView.Content>
<StackLayout Orientation="Horizontal" BackgroundColor="White">
<RelativeLayout Style="{StaticResource myStyle}"
HorizontalOptions="Start" VerticalOptions="Center" >
There are many issues i would change in your approach but let's keep it simple. First of all i would use contentview with control template as;
in App.xaml;
<ControlTemplate x:Key="MyControlTemplate">
<StackLayout Orientation="Horizontal" BackgroundColor="White">
<RelativeLayout HorizontalOptions="Start" VerticalOptions="Center" />
</StackLayout>
</ControlTemplate>
then in your page.xaml
<ContentView ControlTemplate={StaticResource MyControlTemplate}/>
if you want to set individual styles for every page then you can create a control template for each of them.
To create a WPF like user control;
in App.xaml;
<ControlTemplate x:Key="MyControlTemplate">
<StackLayout Orientation="Horizontal" BackgroundColor="White">
<RelativeLayout HorizontalOptions="Start" VerticalOptions="Center" />
</StackLayout>
</ControlTemplate>
in the same project
public class CustomView: ContentView
{
public CustomView()
{
ControlTemplate = (ControlTemplate)Application.Current.Resources.FirstOrDefault(x => x.Key == "MyControlTemplate").Value;
}
}
then you can use CustomView control/view in any xaml page. Don't forget to add xaml namespace of the CustomView in consuming xaml page.