I have created a subclass of TextBox
public class MyAwesomeTextBox : TextBox { ... }
and have set the color of all TextBoxes to be red
<UserControl>
<UserControl.Resources>
<Style TargetType="TextBox">
<Setter Property="Background" Value="Red" />
</Style>
</UserControl.Resources>
<TextBox ... />
<xyz:MyAwesomeTextBox ... />
</UserControl>
It works for all TextBoxes but not for MyAwesomeTextBoxes.
Please tell me what is wrong.
I bet you set the DefaultStyleKey property to typeof(MyAwesomeTextBox) and now the framework will only apply a style with the specialized stylekey.
See the documentation, I extracted the following part:
If you do not set the DefaultStyleKey, the default style for the base class is used. For example, if a control called NewButton inherits from Button, to use a new default Style, set DefaultStyleKey to the type, NewButton. If you do not set DefaultStyleKey, the Style for Button is used.
So what can you do now? You can either remove the defaultStyleKey (but that means the TextBox style will be applied everywhere in your application and you cannot have you AwesomeControlTemplate applied to it by default, so I think this is not what you should do now) or you can add a derived style to your resources:
<UserControl.Resources>
<Style TargetType="TextBox" x:Key="BaseStyle">
<Setter Property="Background" Value="Red" />
</Style>
<Style TargetType="TextBox" BasedOn="{StaticResource BaseStyle}">
<Style TargetType="MyAwesomeTextBox" BasedOn="{StaticResource BaseStyle}">
</UserControl.Resources>
Related
What I want to do
I've been exploring XAML Resource Dictionaries recently. They are very powerful, but in order to cut down (even further) on the changes that would need to be made to accommodate any modifications, I'd like to use some basic arithmetic operations to change the HeightRequest property of an Entry.
I'm already making good use of OnPlatform and OnIdiom for different aspects, like FontSize.
For the iOS Platform, I'd like to make the HeightRequest of an entry 20+(FontSize). The FontSize is already set using OnIdiom (it's slightly increased for tablets).
In a perfect world, the core thing which I'm trying to do might look something like
<Setter Property="HeightRequest" Value="{DynamicResource StandardFontSize}+10">
What "works"
I have a working solution if I use a combination of OnIdiom and OnPlatform.
<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="XamarinDesigner.App"
xmlns:local="clr-namespace:XamarinDesigner"
>
<Application.Resources>
<ResourceDictionary>
<OnIdiom x:Key="StandardFontSize" x:TypeArguments="x:Double" Tablet="22" Phone="18"/>
<Style x:Key="MyEntry" TargetType="Entry">
<Setter Property="FontSize" Value="{DynamicResource StandardFontSize}"/>
<Setter Property="HeightRequest">
<Setter.Value>
<OnIdiom x:TypeArguments="x:Double">
<OnIdiom.Phone>
<OnPlatform x:TypeArguments="x:Double" iOS="30"/>
</OnIdiom.Phone>
<OnIdiom.Tablet>
<OnPlatform x:TypeArguments="x:Double" iOS="40"/>
</OnIdiom.Tablet>
</OnIdiom>
</Setter.Value>
</Setter>
<Setter Property="VerticalOptions" Value="Center"/>
</Style>
</ResourceDictionary>
</Application.Resources>
</Application>
With this 'solution' - I need to set the value explicitly and do the calculations myself. While this works, I'd like to be able to perform a basic arithmetic operation to find the value of FontSize, and add some number to it.
What I've tried
In another attempt I've made, I've found a converter and tried to adapt it to my use case. While there is no intellisense or build/compile errors, the app crashes immediately after opening. The .cs file for ArithmeticConverter can be found in the link above.
<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="XamarinDesigner.App"
xmlns:local="clr-namespace:XamarinDesigner"
>
<Application.Resources>
<local:ArithmeticConverter x:Key="AScript"/>
<ResourceDictionary>
<OnIdiom x:Key="StandardFontSize" x:TypeArguments="x:Double" Tablet="22" Phone="18"/>
<Style x:Key="MyEntry" TargetType="Entry">
<Setter Property="FontSize" Value="{DynamicResource StandardFontSize}"/>
<Setter Property="HeightRequest" Value="{Binding Converter={StaticResource AScript},ConverterParameter=Int32.Parse(20+{DynamicResource StandardFontSize}}"/>
<Setter Property="VerticalOptions" Value="Center"/>
</Style>
</ResourceDictionary>
</Application.Resources>
</Application>
I don't fully understand the use of converters, and {Binding} inside of a value in App.xaml is also something that is new to me. Looking at the example provided with the converter, I think I'm close to being correct, and may just need a push in the right direction?
Is it possible to do this basic sort of arithmetic function in the App.xaml alone(or with the use of a converter)? I'm hoping to contain as much as I can to this file.
Other solutions I've found in my search have mentioned the use of a viewmodel, but this is a 'global' change I want to apply to every entry per platform/idiom, so I can't see how that adaption might work.
Thanks for your time!
One of the reason your app is crashing is because Converter is outside the ResourceDictionary.
Solution 1
Binding should be used only when there is a BindingContext assigned, hence you need to assign it in cs file.
App.cs:
public App()
{
InitializeComponent();
BindingContext = new { EntryHeightRequest = 10 };
MainPage = ...
}
App.xaml:
<ResourceDictionary>
<local:ArithmeticConverter x:Key="AScript"/>
<OnIdiom x:Key="StandardFontSize" x:TypeArguments="x:Double" Tablet="22" Phone="18"/>
<Style x:Key="MyEntry" TargetType="Entry">
<Setter Property="FontSize" Value="{DynamicResource StandardFontSize}" />
<Setter Property="HeightRequest" Value="{Binding EntryHeightRequest, Converter={StaticResource AScript},ConverterParameter="{StaticResource StandardFontSize}"/>
<Setter Property="VerticalOptions" Value="Center"/>
</Style>
</ResourceDictionary>
ArithmeticConverter.cs:
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if(value is int constant && parameter is OnIdiom<double> dynamicSize)
return constant + dynamicSize.GetValue();
return -1;
}
OnIdiomExtension:
public static T GetValue<T>(this OnIdiom<T> idiom)
{
switch(Device.Idiom)
{
case TargetIdiom.Phone:
return idiom.Phone;
case TargetIdiom.Desktop:
return idiom.Desktop;
case TargetIdiom.Tablet:
return idiom.Tablet;
case TargetIdiom.TV:
return idiom.TV;
case TargetIdiom.Watch:
return idiom.Watch;
default:
throw new NotSupportedException();
}
}
Beware: When I tried, BindingContext is passed to ResourceDictionary(but this post contradicts it, may be they changed?)
Solution 2
Similar to Solution 1 but instead of setting BindingContext you can use OnIdiom on HeightRequest with default value.
<Setter Property="HeightRequest" Value="{OnIdiom Default=10, Converter={StaticResource AScript}, ConverterParameter={StaticResource StandardFontSize}}" />
How can I create a style for a DataGridCell with DataTriggers linked to properties of the column value.
I am binding my DataGridTextColumn to an object - not just a text/numeric value. The object has properties that I want to use to display a ToolTip, set the color, etc...
I can do this by specifying the column property name within the style as follows:
<DataGridTextColumn Header="Payment Terms" Binding="{Binding PaymentTerms, StringFormat='{}{0:0.00}'}" >
<DataGridTextColumn.ElementStyle>
<Style TargetType="TextBlock" BasedOn="{StaticResource RightDataGridColumnStyle}">
<Setter Property="ToolTip" Value="{Binding PaymentTerms.ToolTip}" />
<Style.Triggers>
<DataTrigger Binding="{Binding PaymentTerms.HasChanged}" Value="True" >
<Setter Property="Foreground" Value="Red" />
</DataTrigger>
</Style.Triggers>
</Style>
</DataGridTextColumn.ElementStyle>
</DataGridTextColumn>
But I have several columns all looking for the same formatting approach, each based on the data within that column. So I am looking to do this within a Style that can pick up the bound item of that cell.
The PaymentsTerms property is a DataValue class as follows:
Public Class DataValue
Public Property Value As Double
Public Property HasChanged As Boolean
Public Property ToolTip As String
Public Overrides Function ToString()
Return Value
End Function
End Class
In WPF, if you want to base a style on the default style of a control, you would say:
<Style TargetType="customControls:ResponsiveGridView" BasedOn="{StaticResource {x:Type GridView}}">
However, x:Type is not supported on UAP - how do I do it then? I tried the following - none works (after defining XAML as an alias for the namespace where GridView is).
<Style TargetType="customControls:ResponsiveGridView" BasedOn="{StaticResource xaml:GridView}">
<Style TargetType="customControls:ResponsiveGridView" BasedOn="xaml:GridView">
None of this works - crashes on parsing the XAML.
Any more ideas?
You can still use "BasedOn" for inheritance of styles.
<Page.Resources>
<Style TargetType="Button" x:Key="MyOtherStyle">
<Setter Property="Background" Value="Red"></Setter>
</Style>
<Style TargetType="Button" BasedOn="{StaticResource MyOtherStyle}" >
<Setter Value="Green" Property="Foreground"></Setter>
</Style>
</Page.Resources>
Just define the resources like above. They'll be applied for every button on the page.
<Button Content="Hello"></Button>
To base on a default style of a control, you don't use "BasedOn". You implicitly base on the default style of a control by specifying the TargetType in the style.
To be more precise for your special case:
If you want to use an (implicit) style for your custom control that is based on a default style of a built-in control do the follwing:
Create a custom style that targets the built-in control type. Like this:
<Page.Resources>
<Style TargetType="Grid" x:Key="MyStyle1" >
<Setter Property="Background" Value="Green"></Setter>
</Style>
...
Then add another style that targets your custom control type an is based on your custom style for the built-in control. Like this:
...
<Style TargetType="local:MyCustomGrid" BasedOn="{StaticResource MyStyle1}">
<Setter Property="BorderBrush" Value="Black"></Setter>
<Setter Property="BorderThickness" Value="4"></Setter>
</Style>
</Page.Resources>
All your MyCustomGrid controls will implicitly get the style which is based on the default style.
All standard Grids will keep their default style, because they won't get the style implicitly, because you specified the x:key in the first style and therefore have to explicitly set the style of the grids. Does this clarify?
In my Windows Phone 8 app, I have some implicit styles defined in a xaml file at the location /Styles/DefaultStyles.xaml
I have a similar file but with different colors, fonts, etc ... defined at /Styles/GreenStyles.xaml.
I reference the default style file in my App.xaml as follows :
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Styles/DefaultStyles.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
I want to make my app switch its implicit styles from the other styles file (GreenStyles) programmatically.
How can I achieve this ?
**
UPDATE:
I manged to change the source of the resource dictionary as follows:
ResourceDictionary style = App.Current.Resources.MergedDictionaries.ToList()[0];
string source = String.Format("/ApplicationName;component/Styles/GreenStyles.xaml");
style.Source = new Uri(source, UriKind.Relative);
Note: the word component must be written like that to avoid exceptions
Now I have an issue:
only the Implicit styles (the ones that do not have a x:Key attribute) are switched when the source of the dictionary changes.
any other style with a specified key and defined twice (with different attributes) in both files, will not be reflected in the UI.
so if I have these files:
DefaultStyles.xaml:
<Style x:Key="MainGrid" TargetType="Grid">
<Setter Property="Background" Value="Red"/>
</Style>
<Style TargetType="TextBlock">
<Setter Property="Foreground" Value="Red"/>
<Setter Property="FontSize" Value="24"/>
</Style>
</ResourceDictionary>
And:
GreenStyles.xaml:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone">
<Style x:Key="MainGrid" TargetType="Grid">
<Setter Property="Background" Value="Green"/>
</Style>
<Style TargetType="TextBlock">
<Setter Property="Foreground" Value="Green"/>
<Setter Property="FontSize" Value="24"/>
</Style>
</ResourceDictionary>
and I switched the source to point to GreenStyles.xaml, any Grid with the style MainGrid will still have it's background to Red.
What can be the reason for this ?
You can try using the approach Jeff Wilcox described here: http://www.jeff.wilcox.name/2012/01/phonethememanager/
Alternative approach is described here for Silverlight and I'm not sure if this will work on Windows Phone (though they share some codebase):
http://silverlightips.wordpress.com/2010/04/29/change-themestyle-using-merged-dictionaries/
Both of the ways are not easy if you have a large app and you may consider another option like (call me crazy)
<Button Style="{Binding Locator.Theme, Converter={StaticResource StyleThemeConverter}, ConverterParameter=RefreshButtonStyle}"
Hope this helps.
I have entity with property IsRemoved. When it is become true grid row should be Gray.
To do this I am using this code:
<dxg:TableView.RowStyle>
<Style TargetType="{x:Type dxg:GridRowContent}">
<Style.Triggers>
<DataTrigger Binding="{Binding DataContext.IsRemoved, Mode=OneWay}" Value="True">
<Setter Property="Background" Value="Gray" />
</DataTrigger>
</Style.Triggers>
</Style>
</dxg:TableView.RowStyle>
</dxg:TableView>
But It will run only when grid shows first time. I want to change color when value is changing. Property implement INotifyPropertyChange Event.
Note: this answer is legacy (see my other answer).
This answer is for DevExpress versions prior to v14.1, or DevExpress versions v14.1 and after with
UseLightweightTemplates="None".
You need to have an initial setter for the property you want to change. This is due to the order in which WPF uses styles.
Include this line after your style tag:
<Setter Property="Background" Value="Black" />
Full Example:
<dxg:TableView.RowStyle>
<Style TargetType="{x:Type dxg:GridRowContent}">
<Setter Property="Background" Value="Black" />
<Style.Triggers>
<DataTrigger Binding="{Binding DataContext.IsRemoved, Mode=OneWay}" Value="True">
<Setter Property="Background" Value="Gray" />
</DataTrigger>
</Style.Triggers>
</Style>
</dxg:TableView.RowStyle>
Starting with v14.1 of DevExpress, they introduced Optimized Mode which uses Lightweight Templates. This makes everything faster, but requires a change to how the styles and DataTriggers are specified.
Lightweight Templates are controlled by a the attached property UseLightweightTemplates="Row", which is on by default. It can be switched to None for backwards compatibility.
Here is a working MVVM example of how to color a row if the IsDirty property is set for any grid row.
<dxg:GridControl x:Name="MyGridControl"
ItemsSource ="{Binding MyViewModelList}"
SelectionMode="None"
VerticalAlignment="Stretch">
<dxg:GridControl.Resources>
<SolidColorBrush x:Key="GridRowIsDirty" Color="#FF602D2D" />
</dxg:GridControl.Resources>
<dxg:GridControl.View>
<dxg:TableView UseLightweightTemplates="Row" >
<dxg:TableView.RowStyle>
<Style TargetType="dxg:RowControl">
<Style.Triggers>
<DataTrigger Binding="{Binding Row.IsDirty}" Value="True">
<Setter Property="Background" Value="{StaticResource GridRowIsDirty}" />
</DataTrigger>
</Style.Triggers>
</Style>
</dxg:TableView.RowStyle>
</dxg:TableView>
</dxg:GridControl.View>
<dxg:GridControl.Columns>
<dxg:GridColumn x:Name="Included" FieldName="Included"/>
<dxg:GridColumn x:Name="ColumnB" Header="Column B" FieldName="ColumnB" ReadOnly="True"/>
<dxg:GridColumn x:Name="ColumnC" Header="Column C" FieldName="ColumnC" ReadOnly="True"/>ReadOnly="True"/>
</dxg:GridControl.Columns>
</dxg:GridControl>
In the ViewModel behind this grid:
public ObservableCollection<MyViewModel> MyViewModelList { get; set; }
Every row in the grid points to a class of type MyViewModel, which contains a custom IsDirty flag which we can set on demand:
public bool IsDirty
{
get { return _isDirty; }
set
{
_isDirty = value;
OnPropertyChanged();
}
}
Appendix A: Additional Links
See DevExpress: How to disable focused/selected row colors.
See DevExpress: Optimized Mode.
See DevExpress: DXGrid: DataTrigger does not seem to work with UseLightweightTemplates="All".
See DevExpress: Binding to the RowData.Row property is not updated when changing a specific data row property.
See DevExpress: DxGrid: Grid does not update until I scroll the row on off and one the screen.
Appendix B: Other solutions
This also works most of the time, but it will not work if the source of the event is via a context menu, so it is not recommended:
<DataTrigger Binding="{Binding DataContext.IsDirty}" Value="True">
<Setter Property="Background" Value="{StaticResource GridRowIsDirty}" />
</DataTrigger>
Appendix C: AllowLiveDataShaping
If the trigger is not firing, try switching on AllowLiveDataShaping="True" in <GridControl>. However, try to avoid this as it (theoretically) has an impact on the speed of large, complex grids (it has no discernable impact on most grids of a reasonable size).
Appendix D: If all else fails, use a custom ControlTemplate
With the introduction of "UseLightweightTemplates", DevExpress has been focusing on speed. However, the techniques used for speed involve switching off bindings that might slow things down.
This means that if we change something in a DxGrid cell, the value in the ViewModel does not change until the user shifts to the next cell or row. This means that the ViewModel lags behind what is actually in the grid.
To fix this, the only solution that I could find was to bypass DevExpress's templates entirely, and use my own. This means that the DxGrid has no choice but to display a custom template which updates the ViewModel instantaneously as soon as the user edits it, which means that the row color changes immediately:
<dxg:GridControl Grid.Row="3" x:Name="TrsGridControl"
ItemsSource ="{Binding MyObservableCollection}"
VerticalAlignment="Stretch"
AllowLiveDataShaping ="True">
<dxg:GridControl.Resources>
<converter:TestConverter x:Key="TestConverter" />
<ControlTemplate x:Key="DisplayedOnTicketTrs">
<dxe:CheckEdit x:Name="DisplayedOnTicketCheckEdit" HorizontalAlignment="Center" IsChecked="{Binding RowData.Row.DisplayedOnTicket, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
</ControlTemplate>
</dxg:GridControl.Resources>
<dxg:GridControl.View>
<dxg:TableView UseLightweightTemplates="All"/>
</dxg:GridControl.View>
<dxg:GridControl.Columns>
<dxg:GridColumn x:Name="DisplayedOnTicketTrs" DisplayTemplate="{StaticResource DisplayedOnTicketTrs}" Header="Displayed On Ticket?" HeaderToolTip="Displayed On Ticket?" AllowEditing="False"/>
Header ="Displayed On Ticket?"/>
<dxg:GridColumn x:Name="ColumnA" Header="ColumnA" FieldName="ColumnA" ReadOnly="True"/>
<dxg:GridColumn x:Name="ColumnB" Header="ColumnB" FieldName="ColumnB" ReadOnly="True"/>
</dxg:GridControl.Columns>
</dxg:GridControl>
After I made this change, everything started to work:
When the checkbox is clicked, the background color changes instantly (if we add the trigger to change the background color, above).
Editing the DxGrid changes the ViewModel instantaneously.
Changing the ViewModel updates the DxGrid instantaneously.
If a ContextMenu updates the ViewModel, then everything just works.
you should write just "Row" instead of "DataContext"