I have a datagrid with row details. When I click in the row details the IsSelectionActive on the datagrid is cleared. Now this only happens on some of my datagrids while others using the exact same styles and templates exabit the correct behavior. Here is my xaml for the DataGridRow. when I click on the details view with the error the background of the detail changes to yellow. Also my IsSelected color is cleared however the IsSelected property is always set.
<Style TargetType="{x:Type DataGridRow}">
<Style.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsSelected}" Value="True"/>
<Condition Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type DataGrid}}, Path=IsSelectionActive }" Value="False"/>
</MultiDataTrigger.Conditions>
<MultiDataTrigger.Setters>
<Setter Property="Background" Value="Yellow"/>
<Setter Property="Foreground" Value="Black"/>
</MultiDataTrigger.Setters>
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsSelected}" Value="True"/>
<Condition Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type DataGrid}}, Path=IsSelectionActive }" Value="True"/>
</MultiDataTrigger.Conditions>
<MultiDataTrigger.Setters>
<Setter Property="Background" Value="{DynamicResource PrimaryColor}"/>
<Setter Property="Foreground" Value="White"/>
</MultiDataTrigger.Setters>
</MultiDataTrigger>
</Style.Triggers>
</Style>
Upon further research I have determined this bug occurs when the datagrid is wrapped in a ScrollViewer. In my case I have a dynamic number of different datagrids that must display in a single view which can then be scrolled. As soon as I replace the ScrollViewer with A StackPanel the bug goes away, but I need the ScrollViewer.
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 am trying to get an entry IsEnabled property to set based on 2 different boolean values using a MultiTrigger in Xamarin.Forms 4.6.0.726. I have also tried in the last stable 4.5 version too.
Unfortunately the Entry IsEnabled property seems to remain at whatever the Setter's value is set to (in the case, true).
I have tried the two types of BindingCondition in the below code sample. The first (uncommented) conditions are bound to the IsVisible properties of two other elements on the page. The StackLayout and the Image will toggle their visibility as expected, however the Entry IsEnabled will not changed.
The second snip of code binds directly to the values in the ViewModel, implenenting INotifyPropertyChanged but has the exact same result where the IsEnabled value does not change.
I have run out of ideas and i'm starting to wonder if this is a bug with Xamarin and MultiTriggers. There doesn't seem to be a huge amount of people using them online, and those that do I have mine set out in what seems to be the most common way in the first set of code.
<StackLayout x:Name="ButtonsStack" IsVisible="{Binding Invoice.Editable}">
<!-- Content Here -->
</StackLayout>
<Image x:Name="InvoiceImage" IsVisible="{Binding IsUploadInvoice}" />
<StackLayout Orientation="Horizontal" HorizontalOptions="End">
<Entry Text="{Binding Invoice.TotalAmount}">
<Entry.Triggers>
<MultiTrigger TargetType="Entry">
<MultiTrigger.Conditions>
<BindingCondition Binding="{Binding Source={x:Reference ButtonsStack}, Path=IsVisible}" Value="True"/>
<BindingCondition Binding="{Binding Source={x:Reference InvoiceImage}, Path=IsVisible}" Value="True"/>
<!--<BindingCondition Binding="{Binding Invoice.Editable}" Value="True"/>
<BindingCondition Binding="{Binding IsUploadInvoice}" Value="True"/>-->
</MultiTrigger.Conditions>
<Setter Property="IsEnabled" Value="True"/>
</MultiTrigger>
<Entry.Triggers>
<Entry>
</StackLayout>
As zafar said, you need to set Entry IsEnable="False" by default, when all the conditions are true, the setter makes the Entry's IsEnabled property true.
<StackLayout>
<Entry IsEnabled="False" Text="{Binding Invoice.TotalAmount}">
<Entry.Triggers>
<MultiTrigger TargetType="Entry">
<MultiTrigger.Conditions>
<BindingCondition Binding="{Binding Source={x:Reference ButtonsStack}, Path=IsVisible}" Value="True" />
<BindingCondition Binding="{Binding Source={x:Reference InvoiceImage}, Path=IsVisible}" Value="True" />
</MultiTrigger.Conditions>
<Setter Property="IsEnabled" Value="True" />
</MultiTrigger>
</Entry.Triggers>
</Entry>
</StackLayout>
About Multi triggers, please take a look:
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/triggers
In one of my Xamarin.Forms apps I want to change the text color of a DatePicker according to the IsEnabled property.
I tried two known ways:
1) Using a style
In App.xaml:
<Style x:Key="DatePickerStyle" TargetType="DatePicker">
<Style.Triggers>
<Trigger TargetType="DatePicker" Property="IsEnabled" Value="True">
<Setter Property="TextColor" Value="Blue" />
</Trigger>
<Trigger TargetType="DatePicker" Property="IsEnabled" Value="False">
<Setter Property="TextColor" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
In View.xaml:
<DatePicker IsEnabled="{Binding IsEnabled}" Style="{StaticResource DatePickerStyle}" ... />
2) Adding the trigger in XAML
<ViewCell>
<DatePicker IsEnabled="{Binding IsEnabled}" ...>
<DatePicker.Triggers>
<Trigger TargetType="DatePicker" Property="IsEnabled" Value="True">
<Setter Property="TextColor" Value="Blue" />
</Trigger>
<Trigger TargetType="DatePicker" Property="IsEnabled" Value="False">
<Setter Property="TextColor" Value="Red" />
</Trigger>
</DatePicker.Triggers>
</DatePicker>
</ViewCell>
Both ways lead to a "System.InvalidOperationException: bindable not an instance of AssociatedType" exception.
Is it possible to change the text color of a picker with an applied style that contains a trigger at the IsEnabled property? Will a behavior be a better way to go?
I faced a similar issue with DatePicker and found no explanation on Xamarin forums or msdn. I have finally used the following workaround and it works
<Style TargetType="DatePicker">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList x:Name="CommonStates">
<VisualStateGroup>
<VisualState x:Name="Normal" />
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Property="TextColor" Value="LightGray" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
See also Visual State Manager.
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 a WPF DataGrid where the row changes color when a checkbox in the row is selected. I have a problem where if a row is highlighted (such as being clicked on by the mouse) and then the DataGrid loses focus then the row loses it's custom color.
Here is were the custom color is set
<Style x:Key="DataGridStyle" TargetType="{x:Type DataGrid}">
<Setter Property="RowStyle">
<Setter.Value>
<Style TargetType="DataGridRow">
<Style.Triggers>
<DataTrigger Binding="{Binding IsSelected}" Value="True">
<Setter Property="Background" Value="#CBE5F2"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Setter.Value>
</Setter>
</Style>
Pictures of the problem:
Row is highlighted with mouse:
After DataGrid loses focus
Question:
Is there a way to have the highlighted row keep it's custom color after the DataGrid loses focus.
I found a work around which is to set the cell style instead of the row style:
<Setter Property="CellStyle">
<Setter.Value>
<Style TargetType="DataGridCell">
<Style.Triggers>
<DataTrigger Binding="{Binding IsSelected}" Value="True">
<Setter Property="Background" Value="#CBE5F2"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Setter.Value>
</Setter>
It overrides the selected highlighting (bright blue) completely, so it's not ideal, but it works even after losing focus.