CODEWITHSUNDEEP
xamarinxamarin.androidxamarin.forms
Emil
Emil

Reputation: 6893

how to define/override Style for ContentView when it is child of ContentPage

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" >

Upvotes: 0

Views: 1949

Answers (2)

Tolga Kartal
Tolga Kartal

Reputation: 633

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.

Upvotes: 0

Tolga Kartal
Tolga Kartal

Reputation: 633

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.

Upvotes: 1

Related Questions