What is Resource-dictionary and how to used in xamarin forms

maxresdefault

Introduction :

Resourcedictionary :- These resource objects are stored in a resource dictionary. XAML resources are definitions that can be shared and re-used throughout a Xamarin forms application.

This blog explain how to create and consume a resource dictionary.

Description:

Placing styles and other resources in your ResourceDictionary is a great way to reuse these elements through your page or application. Typical resources that are stored in a ResourceDictionary include styles, control templates, data templates, colors, and converters.

IMAGE :-

1. Select App.xaml file.

IMAGE :-  1

2. Write some code in App.xaml file for ResourceDictionary.

2

3. CODE :-

<Application.Resources>

<!– Application resource dictionary –>

<ResourceDictionary>

<!– Region (Icons) –>

<FileImageSource x:Key=”logo” File =”logo.png”></FileImageSource>

<FileImageSource x:Key=”logos” File =”logos.png”></FileImageSource>

<FileImageSource x:Key=”menu” File =”menu.png”></FileImageSource>

<FileImageSource x:Key=”select” File =”select.png”></FileImageSource>

<FileImageSource x:Key=”unselect” File =”unselect.png”></FileImageSource>

<FileImageSource x:Key=”splash” File =”splash.png”></FileImageSource>

<FileImageSource x:Key=”google” File =”google.png”></FileImageSource>

<FileImageSource x:Key=”Asset” File =”Asset.png”></FileImageSource>

<FileImageSource x:Key=”bgimage” File =”bgimage.png”></FileImageSource>

<!– EndRegion –>

<!– Region (Color) –>

<Color x:Key=”PlaceholderColor”>#9E9E9E</Color>

<Color x:Key=”LabelColor”>#414141</Color>

<Color x:Key=”BlueColor”>#26768C</Color>

<Color x:Key=”NavigationBackGroundColor”>#206173</Color>

<Color x:Key=”InputBackgroundColor”>White</Color>

<Color x:Key=”BorderColor”>#60A9BC</Color>

<Color x:Key=”LightBlue”>#E7F6FB</Color>

<Color x:Key=”PageBackGroundColor”>#F4F9FC</Color>

<!– EndRegion –>

<!– Region (GlobalEntryStyle) –>

<Style x:Key=”GlobalEntryStyle” TargetType=”Entry”>

<Setter Property=”TextColor” Value=”#26768C”/>

<Setter Property=”BackgroundColor” Value=”White”/>

<Setter Property=”FontSize” Value=”13″/>

<Setter Property=”HeightRequest” Value=”35″/>

<Setter Property=”PlaceholderColor” Value=”#9E9E9E”/>

<Setter Property=”HorizontalOptions” Value=”FillAndExpand”/>

<Setter Property=”VerticalOptions” Value=”FillAndExpand”/>

<Setter Property=”Keyboard” Value=”Default”/>

</Style>

<!– EndRegion –>

<!– Region (GlobalLabelStyle) –>

<Style x:Key=”GlobalLabelStyle” TargetType=”Label”>

<Setter Property=”TextColor” Value=”#414141″/>

<Setter Property=”FontSize” Value=”12″/>

<Setter Property=”HorizontalOptions” Value=”Center”/>

<Setter Property=”VerticalOptions” Value=”CenterAndExpand”/>

</Style>

<!– EndRegion –>

<!– Region (ContentPagePadding) –>

<OnPlatform x:Key=”ContentPagePadding” x:TypeArguments=”Thickness”

Android=”0, 0, 0, 0″

iOS=”0, 20, 0, 0″

WinPhone=”0, 20, 0, 0″ />

<Style x:Key=”ContentPageStyle” TargetType=”ContentPage”>

<Setter Property=”Padding” Value=”{StaticResource ContentPagePadding}”/>

</Style>

<!– EndRegion –>

<!– Region (inverseBool) –>

<converters:VisibleConverter x:Key=”inverseBool” />

<!– EndRegion –>

<!– Region Labels –>

<Style x:Key=”LabelStyle” TargetType=”Label”>

<Setter Property=”TextColor” Value=”#414141″/>

<Setter Property=”FontSize” Value=”12″/>

<Setter Property=”HorizontalOptions” Value=”StartAndExpand”/>

<Setter Property=”VerticalOptions” Value=”Center”/>

</Style>

<Style x:Key=”PickerStyle” TargetType=”Picker”>

<Setter Property=”TextColor” Value=”#414141″/>

<Setter Property=”HorizontalOptions” Value=”FillAndExpand”/>

<Setter Property=”VerticalOptions” Value=”FillAndExpand”/>

</Style>

<Style x:Key=”DatePickerStyle” TargetType=”DatePicker”>

<Setter Property=”TextColor” Value=”#414141″/>

<Setter Property=”HeightRequest” Value=”25″/>

<Setter Property=”HorizontalOptions” Value=”FillAndExpand”/>

<Setter Property=”VerticalOptions” Value=”FillAndExpand”/>

</Style>

<Style x:Key=”ErrorLabelStyle” TargetType=”Label”>

<Setter Property=”TextColor” Value=”#F44336″/>

<Setter Property=”FontSize” Value=”12″/>

<Setter Property=”HorizontalOptions” Value=”Start”/>

<Setter Property=”VerticalOptions” Value=”Start”/>

</Style>

<converters:EntryRedColorConverter x:Key=”entryredcolorconverter” />

<converters:LightBlueLightRedColorConverter x:Key=”lightbluelightredcolorconverter” />

<converters:BlueRedColorConverter x:Key=”blueredcolorconverter” />

<converters:GreenBlueColorConverter x:Key=”greenbluecolorconverter” />

<converters:LightGreenLightBlueConverter x:Key=”lightgreenlightblueconverter” />

<!– EndRegion –>

</ResourceDictionary>

</Application.Resources>

4. This code used in xaml file : –

3

4

5. Code :-

<StackLayout x:Name=”MainStack” HorizontalOptions=”FillAndExpand” VerticalOptions=”FillAndExpand” >

<Image Source=”{StaticResource logos}” Aspect=”AspectFit” HorizontalOptions=”FillAndExpand” VerticalOptions=”Center” HeightRequest=”100″ WidthRequest=”160″ Margin=”0,70″/>

<StackLayout HorizontalOptions=”FillAndExpand” VerticalOptions=”Center” Spacing=”30″ Margin=”40,0″>

<local:CustomButtonBold Text=”NAME &amp; EMAIL” TextColor=”#FFFFFF” FontSize=”16″ HeightRequest=”50″ BorderWidth=”2″ BorderRadius=”10″ BorderColor=”#FFFFFF” BackgroundColor=”Transparent” HorizontalOptions=”FillAndExpand” VerticalOptions=”CenterAndExpand” Command=”{Binding NameProEditCommand}”/>

<local:CustomButtonBold Text=”REPORTS” TextColor=”#FFFFFF” FontSize=”16″ HeightRequest=”50″ BorderWidth=”2″ BorderRadius=”10″ BorderColor=”#FFFFFF” BackgroundColor=”Transparent” HorizontalOptions=”FillAndExpand” VerticalOptions=”CenterAndExpand” Command=”{Binding ReportsCommand}”/>

<local:CustomButtonBold Text=”LEGAL” TextColor=”#FFFFFF” FontSize=”16″ HeightRequest=”50″ BorderWidth=”2″ BorderRadius=”10″ BorderColor=”#FFFFFF” BackgroundColor=”Transparent” HorizontalOptions=”FillAndExpand” VerticalOptions=”CenterAndExpand” Command=”{Binding LegalCommand}”/>

<local:CustomButtonBold Text=”Back to Forms” TextColor=”#ffffff” FontSize=”16″ HeightRequest=”50″ WidthRequest=”160″ HorizontalOptions=”CenterAndExpand” VerticalOptions=”CenterAndExpand” BackgroundColor=”Transparent” Command=”{Binding BackCommand}”/>

</StackLayout>

</StackLayout>

Hopefully this will help you to understand . What is Resourcedictionary and how to used in Xamarin.Forms .

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>