I have following button in my Xamarin Forms application
<Button
Grid.Column="1"
Grid.Row="0">
<Button.ImageSource>
<FontImageSource Glyph="" FontFamily="{StaticResource IconFont}" Color="{StaticResource BaseColor}"/>
</Button.ImageSource>
</Button>
where IconFont is:
<OnPlatform x:TypeArguments="x:String" x:Key="IconFont">
<On Platform="Android" Value="materialdesignicons-webfont.ttf#Material design" />
<On Platform="iOS" Value="Material Design Icons" />
</OnPlatform>
Everything is working fine. Now, because all of my icons are in materialdesignicons-webfont and I will never use different icons I decided to move entire styling to App.xaml. I would like to set default properties like that:
<Style TargetType="FontImageSource">
<Setter Property="FontFamily" Value="{StaticResource IconFont}" />
<Setter Property="Color" Value="{StaticResource BaseColor}" />
</Style>
And use button by passing glyph only.
<Button
Grid.Column="1"
Grid.Row="0">
<Button.ImageSource>
<FontImageSource Glyph=""/>
</Button.ImageSource>
</Button>
For some reasons Icon is not rendered without specifying FontFamily and Color directly in FontImageSource. Am I missing something?
Is there some way to call my button in simpler way? F.e.
<Button
Grid.Column="1"
Grid.Row="0"
MDGlyph="" />
Unfortunately it is not possible to style a FontImageSource currently. However, there is a github issue requesting this capability.
have you tried this:
<Style x:Key="ButtonWithFontImageSource" TargetType="Button">
<Setter Property="ImageSource">
<FontImageSource
FontFamily="{StaticResource FontIcons}"
Glyph="{DynamicResource IconText}">
</FontImageSource>
<Setter>
</Style>
Related
Good day! I am using Prism 7.2 along with Xamarin.Forms 4.2 and I am trying to use an external asset for fonts. I have defined them on my app resources and used it on my xaml code, however, when I try to use the static extension {x:Static} for the value of Text combined with Style that also has a static resource extension {StaticResource} the text doesn't appear to be working. Below is the code that I am using.
<prism:PrismApplication.Resources>
<ResourceDictionary>
<OnPlatform x:Key="LineAwesomeFontFamily" x:TypeArguments="x:String">
<On Platform="Android" Value="line-awesome.ttf#LineAwesome"/>
<On Platform="iOS" Value="lineawesome"/>
</OnPlatform>
<Style x:Key="LineAwesomeFonts"
TargetType="Label">
<Setter Property="FontFamily"
Value="{StaticResource LineAwesomeFontFamily }" />
</Style>
<Style TargetType="Button">
<Setter Property="BackgroundColor" Value="Green"/>
</Style>
</ResourceDictionary>
</prism:PrismApplication.Resources>
Calling it in a view
<Label Text="{x:Static fonts:LineAwesomeFonts.Adjust}"
Style="{StaticResource LineAwesomeFonts}"
TextColor="Black">
</Label>
If I try in a different way
<Label x:Name="testLabel"
FontSize="28" TextColor="Black">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="Android" Value="line-awesome.ttf#LineAwesome"/>
</OnPlatform>
</Label.FontFamily>
</Label>
and call the testLabel on xaml.cs for it to have a value it will work.
Any idea what am I doing wrong? There are no errors to be found when it compiled.
Okay, it is my fault.
public App(IPlatformInitializer platformInitializer) : base(platformInitializer)
{}
protected override void OnInitialized()
{
InitializeComponent(); //moved this away from App constructor and put it here
NavigationService.NavigateAsync("Test");
}
Though it was weird because my InitializeComponent(); on the other project was on the App Constructor and resources was working as intended.
I want to have a switch in a menuItem of my AppShell.xaml (in addition to the usual text and icon). How can I do that while keeping the styles of the MenuItem ?
I used a DataTemplate in the Shell.MenuItemTemplate of my MenuItem but the result is just ugly as all the styles of the MenuItem are lost. The MenuItem created this way does not have the same font, text color, and font size than the other FlyoutItems and MenuItems of the Shell.
<MenuItem Text="MyMenuItem" Command="{Binding SwitchMode}">
<Shell.MenuItemTemplate>
<DataTemplate>
<StackLayout Orientation="Horizontal" HorizontalOptions="Center">
<Label Text="{Binding Text}"/>
<Switch IsToggled="{Binding IsModeActivated}"/>
</StackLayout>
</DataTemplate>
</Shell.MenuItemTemplate>
Use element Shell.MenuItemTemplate with reference to DataTemplate defined in Resources.
Common/shared element property values can be defined in a "BaseStyle", while menu specific properties can be defined in styles based on the "BaseStyle":
<Shell.Resources>
...
<Style x:Key="labelBaseStyle" TargetType="Label">
<Setter Property="VerticalTextAlignment" Value="Center" />
</Style>
<Style x:Key="firstMenuLabelStyle" TargetType="Label" BasedOn="{StaticResource labelBaseStyle}">
<Setter Property="FontAttributes" Value="Italic" />
</Style>
<Style x:Key="menuLabelStyle" TargetType="Label" BasedOn="{StaticResource labelBaseStyle}">
<Setter Property="FontAttributes" Value="Bold" />
</Style>
<DataTemplate x:Key="firstMenuItemTemplate">
<StackLayout ...
<Label Style="{StaticResource firstMenuLabelStyle}" ...
</DataTemplate>
<DataTemplate x:Key="menuItemTemplate">
<StackLayout ...
<Label Style="{StaticResource menuLabelStyle}" ...
</DataTemplate>
...
</Shell.Resources>
...
<MenuItem Text="MenuItem1" Shell.MenuItemTemplate="{StaticResource firstMenuItemTemplate}" />
<MenuItem Text="MenuItem2" Shell.MenuItemTemplate="{StaticResource menuItemTemplate}" />
In a style in xamarin forms (defined in xaml) I can define values platform specific, like this:
<OnPlatform x:TypeArguments="Font" Android="30" iOS="40" WinPhone="20" x:Key="TitleFontSize" />
<Style x:Key="MyTitleLabel" TargetType="Label"">
<Setter Property="Font" Value="{StaticResource TitleFontSize}" />
</Style>
Can I also define the style in a way, so that the value of "Font" is kept to the default (not set at all) for some plarforms?
Something like this:
<Style x:Key="MyTitleLabel" TargetType="Label"">
<OnPlatform>
<OnPlatform.Android>
<Setter Property="Font" Value="30" />
</OnPlatform.Androud>
</OnPlatform>
</Style>
There is no way avoid setting a value - if no value is specified it will default to default(T).
But, with the latest XF version (> 2.4.0.282) there is a Default property available that you can use to specify the fallback value.
<!-- specify default value here -->
<OnPlatform x:TypeArguments="x:Double" Default="25">
<OnPlatform.Android>
<Setter Property="Font" Value="30"/>
</OnPlatform.Android>
</OnPlatform>
This should work:
<Style x:Key="MyTitleLabel" TargetType="Label"">
<Setter Property="Font">
<Setter.Value>
<OnPlatform x:TypeArguments="x:Double">
<On Platform="Android">30</On>
<!--?<On Platform="iOS">20</On>-->
</OnPlatform>
</Setter.Value>
</Setter>
</Style>
enter image description here
I have tried to write the style for check box placed in the Grid cell by setting the target type as checkbox, but its apply the style also for the filter checkbox. could anybody suggest me to write the style only for the Grid cell check box.
Please find the image attached above i have write a style only for the checkbox loaded in the grid cell instead of the applying to all
I tried it by this way
<Page.Resources>
<Style TargetType="CheckBox">
<Setter Property="Background" Value="Red"/>
</Style>
</Page.Resources>
<Page.DataContext>
<local:ViewModel/>
</Page.DataContext>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<my:SfDataGrid ItemsSource="{Binding Orders}" AllowFiltering="True" />
</Grid>
You have to use Column property of DataGridCell and check its DisplayIndex value and write a DataTrigger.
Sample approach :
<DataGrid ...>
<DataGrid.Resources>
<Style TargetType="CheckBox">
<Setter Property="Background" Value="Green"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Column.DisplayIndex, RelativeSource={RelativeSource AncestorType=DataGridCell, Mode=FindAncestor}}" Value="0">
<Setter Property="Background" Value="Red"/>
</DataTrigger>
</Style.Triggers>
</Style>
</DataGrid.Resources>
</DataGrid>
Ok. #BalamuruganR I've made a simple code sample for you. Using the GridTemplateColumn and specify a "x:Key" for your custom style. Please check the following code sample:
<Page.Resources>
<Style x:Key="CheckBoxStyle1" TargetType="CheckBox">
<Setter Property="Background" Value="Red" />
</Style>
<DataTemplate x:Key="cellTemplate">
<CheckBox Content="DataGrid" IsChecked="{Binding Flag}" Style="{StaticResource CheckBoxStyle1}"></CheckBox>
</DataTemplate>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<syncfusion:SfDataGrid x:Name="sfGrid" Grid.Column="0"
AllowGrouping="True"
AutoExpandGroups="True"
ShowGroupDropArea="True"
AllowEditing="True"
AllowFiltering="True"
AutoGenerateColumns="False"
ItemsSource="{Binding UserDetails}">
<syncfusion:SfDataGrid.Columns>
<syncfusion:GridTextColumn MappingName="UserId" />
<syncfusion:GridTextColumn MappingName="Name" />
<syncfusion:GridDateTimeColumn MappingName="DateofBirth" />
<syncfusion:GridNumericColumn MappingName="ContactNo" />
<syncfusion:GridTemplateColumn MappingName="Flag" CellTemplate="{StaticResource cellTemplate}" />
</syncfusion:SfDataGrid.Columns>
</syncfusion:SfDataGrid>
</Grid>
I have created a Button with the following trigger:
<Button Content="Test>
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<cal:ActionMessage MethodName="SetViewModelToOpen">
<cal:Parameter Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type telerik:RadButton}},Path=Content}" />
</cal:ActionMessage>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
Now I have several button like this one and want this trigger to be applied to every button.
How to do this?
You need to use styles, in your case:
<Style x:Key="ButtonWithTriggers" TargetType="Button">
<Style.Triggers>
<Trigger Property="IsPressed" Value="true">
<[Place your actions here]>
</Trigger>
</Style.Triggers>
</Style>
Then your button declaration:
<Button Content="Test" Style="{StaticResource ButtonWithTriggers}" />