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}" />
Related
I have a DataTrigger to set some styling based on the result of a validation (it is linked to a TextValidationBehaviour). It works fine, except I want it to trigger when the page loads so the user can see what they need to fill in (i.e. Entry is red until the user types something into it).
So is there any way to trigger the validation on page load?
Here is my code, but open to suggestions:
<Frame WidthRequest="350">
<StackLayout Orientation="Horizontal">
<Entry Style="{StaticResource Key=EntryInverted}" Placeholder="Last Name" Text="{Binding LastName}">
<Entry.Behaviors>
<toolkit:TextValidationBehavior x:Name="LastNameVal"
InvalidStyle="{StaticResource InvalidEntryStyle}"
Flags="ValidateOnValueChanged"
MinimumLength="2"
MaximumLength="99" />
</Entry.Behaviors>
</Entry>
</StackLayout>
<Frame.Style>
<Style TargetType="Frame" BasedOn="{StaticResource Key=EntryFrame}">
<Setter Property="BorderColor" Value="White"/>
<Style.Triggers>
<DataTrigger TargetType="Frame" Binding="{Binding Source={x:Reference LastNameVal}, Path=IsNotValid}" Value="True">
<Setter Property="BorderColor" Value="{StaticResource FrameErrorBorder}" />
</DataTrigger>
</Style.Triggers>
</Style>
</Frame.Style>
</Frame>
You can add a trigger to the entry, such as:
<Entry >
<Entry.Triggers>
<MultiTrigger TargetType="Entry">
<MultiTrigger.Conditions>
<PropertyCondition Property="IsFocused" Value="false"/>
<PropertyCondition Property="Text" Value="{x:Null}"/>
</MultiTrigger.Conditions>
<Setter Property="BackgroundColor" Value="Red"/>
</MultiTrigger>
</Entry.Triggers>
</Entry>
The codes above will make the entry's background color show as red. And it will show the default background color when user taps the entry.
Or you want to the entry is red if the entry has no text in it. You can try the following code:
<Entry >
<Entry.Triggers>
<MultiTrigger TargetType="Entry">
<MultiTrigger.Conditions>
<BindingCondition Binding="{Binding Source={RelativeSource Self}, Path= Text.Length}" Value="0"/>
</MultiTrigger.Conditions>
<Setter Property="BackgroundColor" Value="Red"/>
</MultiTrigger>
<Trigger TargetType="Entry" Property="Text" Value="{x:Null}">
<Setter Property="BackgroundColor" Value="Red"/>
</Trigger>
</Entry.Triggers>
</Entry>
When you use the trigger above, the entry will be red until it has been typed something.
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>
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}" />
I'm facing a problem with ToolbarItem and IsEnabled property when trying to turn it on/off from XAML using triggers. ToolbarItem doesn't support triggers, so what I do is to create a Button (a hidden one) which supports triggers and then bind Button.IsEnabled to ToolbarItem.IsEnabled; here is the sample code:
<ContentPage.ToolbarItems>
<ToolbarItem x:Name="tlbSave" Text="Save" Clicked="Handle_Clicked">
<ToolbarItem.IsEnabled>
<Binding Source="{x:Reference btnTest}" Path="IsEnabled" />
</ToolbarItem.IsEnabled>
</ToolbarItem>
</ContentPage.ToolbarItems>
<ContentPage.Content>
<StackLayout Padding="10" VerticalOptions="CenterAndExpand">
<Entry x:Name="txtTest" HorizontalOptions="FillAndExpand" />
<Button x:Name="btnTest" Text="HIDDEN" IsEnabled="false" HorizontalOptions="FillAndExpand">
<Button.Triggers>
<MultiTrigger TargetType="Button">
<MultiTrigger.Conditions>
<BindingCondition Binding="{Binding Source={x:Reference txtTest}, Path=Text.Length,
Converter={convert:IsPositiveIntegerConverter}}" Value="true" />
</MultiTrigger.Conditions>
<Setter Property="IsEnabled" Value="True" />
</MultiTrigger>
</Button.Triggers>
</Button>
</StackLayout>
</ContentPage.Content>
If you try this piece of code you will see how btnTest gets enable/disable when txtTest.Text has some value. But it isn't affecting tlbSave.IsEnabled property.
However, this work perfect in code behind when I set tlbSave.IsEnabled into btnText.PropertyChanged EventHandler
btnTest.IsVisible is false, I'm just showing it up for testing purposes.
Any idea about how to deal with this?
This is because of the IsEnabled property of ToolbarItem is read-only.
If you just set IsEnabled property of a toolbar item in your XAML to false or true, you will get the following exception at runtime.
System.InvalidOperationException: The BindableProperty "IsEnabled" is readonly.
And if you take a look at Microsoft's documentation, you will notice that you cannot directly set IsEnabled property of a toolbar item.
For disabling a toolbar item, the suggested way is to use a command and it's CanExecute.
I found out a way to solve this problem, at least a way better than implementing OnPropertyChange for btnTest
<ContentPage.ToolbarItems>
<ToolbarItem x:Name="tlbSave" Text="Save" Clicked="Handle_Clicked" />
</ContentPage.ToolbarItems>
<ContentPage.Content>
<StackLayout Padding="10" VerticalOptions="CenterAndExpand">
<Entry x:Name="txtTest" HorizontalOptions="FillAndExpand" />
<Button x:Name="btnTest" Text="HIDDEN">
<Button.Triggers>
<MultiTrigger TargetType="Button">
<MultiTrigger.Conditions>
<BindingCondition Binding="{Binding Source={x:Reference txtTest}, Path=Text.Length,
Converter={convert:IsPositiveIntegerConverter}}" Value="true" />
</MultiTrigger.Conditions>
<Setter Property="IsEnabled" Value="True" />
</MultiTrigger>
</Button.Triggers>
<Button.IsEnabled>
<Binding Source="{x:Reference tlbSave}" Path="IsEnabled" Mode="OneWayToSource" />
</Button.IsEnabled>
</Button>
</StackLayout>
</ContentPage.Content>
Then set btnTest.IsEnabled = false; inside constructor and everything will go as smooth as I want.
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>