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={ ..... –
Related
By default a MasterDetailPage adds the Title of the NavigationPage to the top of the view. I tried a simple experiment but it didn't work. It still renders the title instead of replacing it with an image. Is there a simple way to override the title area?
<MasterDetailPage 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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:views="clr-namespace:MyApp.Views"
x:Class="MyApp.Views.MainPage">
<MasterDetailPage.Master>
<views:MenuPage />
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
<NavigationPage.TitleView>
<StackLayout>
<Image Source="MyAppLogo.png" HorizontalOptions="CenterAndExpand" WidthRequest="50" HeightRequest="50" Aspect="AspectFill" />
</StackLayout>
</NavigationPage.TitleView>
<NavigationPage.Icon>
<OnPlatform x:TypeArguments="FileImageSource">
<On Platform="iOS" Value="tab_feed.png"/>
</OnPlatform>
</NavigationPage.Icon>
<x:Arguments>
<views:JobsPage />
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
Update
So I discovered that each content page has to individually override the NavigationPage.TitleView. But the goal is to have the same title bar across all content pages. So I followed the recomendation here: https://forums.xamarin.com/discussion/167655/it-is-possible-to-creatre-a-navigationpage-titleview-for-all-contentpage. I've implemented this however I'm not seeing anything in the title bar at all. What am I doing wrong now?
App.xaml
<Application 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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:MyApp.Views"
mc:Ignorable="d"
x:Class="MyApp.App">
<Application.Resources>
<ResourceDictionary>
<!--Global Styles-->
<Color x:Key="NavigationPrimary">#2196F3</Color>
<Color x:Key="NavbarBackground">Black</Color>
<Style TargetType="NavigationPage">
<Setter Property="BarBackgroundColor" Value="{StaticResource NavbarBackground}" />
<Setter Property="BarTextColor" Value="White" />
</Style>
<local:CustomTitleView x:Key="CustomTitleView"/>
<Style TargetType="ContentPage" x:Key="CustomTitle">
<Setter Property="NavigationPage.TitleView" Value="{StaticResource CustomTitleView}"/>
</Style>
</ResourceDictionary>
</Application.Resources>
</Application>
CustomTitleView.xaml
<ContentPage 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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="BuildPro.Views.CustomTitleView">
<ContentPage.Content>
<StackLayout>
<Label Text="Hello world!" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
MyContentPage.xaml
<ContentPage 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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="MyApp.Views.MyPage"
xmlns:vm="clr-namespace:MyApp.ViewModels"
Style="{StaticResource CustomTitle}" >
<ContentPage.BindingContext>
<vm:MyViewModel />
</ContentPage.BindingContext>
<ContentPage.Content>
<StackLayout>
<Label Text="Welcome to the Xamarin-Forms!"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
Update 2
I goofed up on the template for the title bar. Should have been a ContentView instead of ContentPage. Totally different class. Now this works:
CustomTitleView
<ContentView 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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="MyApp.Views.CustomTitleView">
<ContentView.Content>
<StackLayout>
<Label Text="Hello world!" TextColor="AliceBlue" />
</StackLayout>
</ContentView.Content>
</ContentView>
You should add NavigationPage.TitleView in Xaml of each Detail Page (Usually Content Page), not in Xaml of MasterDetailPage.
Such as the Xaml of views:JobsPage can be modified as follow :
<?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:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="AppFormsMaster.Views.ItemsPage"
Title="{Binding Title}"
x:Name="BrowseItemsPage">
<NavigationPage.TitleView>
<StackLayout>
<Image Source="MyAppLogo.png" HorizontalOptions="CenterAndExpand" WidthRequest="50" HeightRequest="50" Aspect="AspectFill" />
</StackLayout>
</NavigationPage.TitleView>
<ContentPage.Content>
//...
//Content of Content Page
//...
</ContentPage.Content>
</ContentPage>
Then it will show the NavigationPage.TitleView .
For xamarin shell it should be Shell.TitleView
<Shell.TitleView>
<StackLayout Margin="10,10,0,10" Orientation="Horizontal">
<Image
BackgroundColor="LightBlue"
HeightRequest="25"
WidthRequest="25" />
<SearchBar HorizontalOptions="FillAndExpand" />
<Image
BackgroundColor="LightYellow"
HeightRequest="25"
WidthRequest="25" />
</StackLayout>
</Shell.TitleView>
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 have a fairly simple Xamarin.Forms App, with a ContentPage and a ControlTemplate in an App.Xaml ResourceDictionary
I am trying to bind to the ContentPage.Title Property of the parent ContentPage. however the following doesn't seem to work..
ContentPage
<ContentPage
x:Class="Inhouse.Mobile.Pcl.Views.MoveLocationView"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
ControlTemplate="{StaticResource MainPageTemplate}"
Title="Move Location"
...
ControlTemplate
<?xml version="1.0" encoding="utf-8" ?>
<Application
x:Class="Inhouse.Mobile.Pcl.App"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
<Application.Resources>
<ResourceDictionary>
<ControlTemplate x:Key="MainPageTemplate">
<cut for Brevity ...>
<StackLayout BackgroundColor="#333333">
<Label Text="{TemplateBinding Page.Title}"></Label>
</StackLayout>
<ScrollView Grid.Row="2" >
<ContentPresenter VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" />
</ScrollView>
</ControlTemplate>
</ResourceDictionary>
</Application.Resources>
</Application>
I'm not sure what i should actually be binding too
i.e my attempt was
<Label Text="{TemplateBinding Page.Title}"></Label>
My problem was that i was in a StackLayout and needed to set
HorizontalOptions="StartAndExpand" so i could see it.
Additionally, Title was sufficient
{TemplateBinding Title}
I.e
<StackLayout Grid.Row="1" BackgroundColor="#333333">
<Label Text="{TemplateBinding Title}" TextColor="AliceBlue" HorizontalOptions="StartAndExpand"/>
</StackLayout>
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>
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.