I'm new to Xamarin

I have this code and the Style="{StaticResource MyStyleButton}" doesn't work in an other Page.

componentPage.xaml

<ContentPage.Resources>
    <ResourceDictionary>
        <Style x:Key="MyStyleButton" TargetType="Button">
            <Setter Property="BackgroundColor" Value="#2196f3" />
            <Setter Property="WidthRequest" Value="300" />
            <Setter Property="CornerRadius" Value="20" />
            <Setter Property="FontSize" Value="Medium" />
            <Setter Property="TextColor" Value="White" />
        </Style>
    </ResourceDictionary>
</ContentPage.Resources>

Another xaml file

LogInPage.xaml

<ContentPage.Content>
    <StackLayout>
        <Button
            Command="{Binding Command1}"
            Style="{StaticResource MyStyleButton}"
            Text="Button1" />
  
    </StackLayout>
</ContentPage.Content> 

If i put them in the same file the code works , what should i change

CodePudding user response：

Step 1: Create new ContentPage example name ButtonStyles.xaml

Step 2: Edit

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="YourAppName.ButtonStyles"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

    ...

</ContentPage>
    

To

<?xml version="1.0" encoding="utf-8" ?>
<ResourceDictionary
    x:Class="YourAppName.ButtonStyles"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

    ....

</ResourceDictionary>

In CondeBehind

using Xamarin.Forms.Internals;
[Preserve(AllMembers = true)]
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class ButtonStyles
    {
        public ButtonStyles()
        {
            InitializeComponent();
        }
    }

Step 3: Put your Styles in ButtonStyles.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ResourceDictionary
    x:Class="YourAppName.ButtonStyles"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

    <Style x:Key="MyStyleButton" TargetType="Button">
        <Setter Property="BackgroundColor" Value="#2196f3" />
        <Setter Property="WidthRequest" Value="300" />
        <Setter Property="CornerRadius" Value="20" />
        <Setter Property="FontSize" Value="Medium" />
        <Setter Property="TextColor" Value="White" />
    </Style>

    <Style x:Key="MyStyleButton2" TargetType="Button">
        .....
    </Style>

</ResourceDictionary>

Step 4: In your App.xaml

<?xml version="1.0" encoding="utf-8" ?>
<Application
    x:Class="YourAppName.App"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:YourAppName;assembly=YourAppName">

    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <local:ButtonStyles />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>

</Application>

Step 5: In your any ContentPages

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="YourAppName.MainPage"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

    <StackLayout>
        <Button
            Command="{Binding Command1}"
            Style="{StaticResource MyStyleButton}"
            Text="Button1" />
        <Button
            Command="{Binding Command2}"
            Style="{StaticResource MyStyleButton}"
            Text="Button2" />
        <Button
            Command="{Binding Command3}"
            Style="{StaticResource MyStyleButton}"
            Text="Button3" />
    </StackLayout>

</ContentPage>

CodePudding user response：

You where close there is also this way , you also can put it in Application.Resources and use it in every page . https://docs.microsoft.com/en-us/xamarin/xamarin-forms/xaml/resource-dictionaries

In App.xaml

  <Application.Resources>
    <Style x:Key="MyStyleButton" TargetType="Button">
        <Setter Property="BackgroundColor" Value="#2196f3" />
        <Setter Property="WidthRequest" Value="300" />
        <Setter Property="CornerRadius" Value="20" />
        <Setter Property="FontSize" Value="Medium" />
        <Setter Property="TextColor" Value="White" />
    </Style>
</Application.Resources>

Use in any page you like

 <ContentPage.Content>
    <StackLayout>
        <Button
            Command="{Binding Command1}"
            Style="{StaticResource MyStyleButton}"
            Text="Button1" />   
    </StackLayout>
</ContentPage.Content>