Similar to this SO question, I am trying to style ComboBoxItems as easily as possible. However, I am making a custom style based on ComboBox's default style found here.
<Style x:Key="MultiComboBox" TargetType="{x:Type ComboBox}">
<Style.Resources>
<Style TargetType="{x:Type ComboBoxItem}">
<Setter Property="Style" Value="{StaticResource MultiComboBoxItem}"/>
</Style>
</Style.Resources>
<Setter Property="SnapsToDevicePixels" Value="true" />
<!--<Setter Property="OverridesDefaultStyle" Value="true" />-->
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
...
...
</Style>
.
.
.
<ComboBox Style="{StaticResource MyComboBox}">
<ComboBoxItem x:Name="First">First</ComboBoxItem>
<ComboBoxItem x:Name="Second">Second</ComboBoxItem>
<ComboBoxItem x:Name="Third">Third</ComboBoxItem>
</ComboBox>
I added the <Style.Resources> bit to the top in hopes to only need one reference here, instead of individually adding it to nested elements, or even needing to add it to the element in the first place. Also, I commented out all of the OverridesDefaultStyle Setters.
However, then I get a XAMLparseexception, "Style object is not allowed to affect the Style property of the object to which it applies". The error makes sense by itself, but I thought since I was targeting ComboBoxItem's it should work. Is there a way around this?
Style object is not allowed to affect the Style property of the object to which it applies
the problematic lines are these:
<Style TargetType="{x:Type ComboBoxItem}">
<Setter Property="Style" Value="{StaticResource MultiComboBoxItem}"/>
</Style>
try rewrite them as
<Style TargetType="{x:Type ComboBoxItem}" BasedOn="{StaticResource MultiComboBoxItem}">
</Style>
or maybe better use ItemContainerStyle property:
<Style x:Key="MultiComboBox" TargetType="{x:Type ComboBox}">
<Setter Property="ItemContainerStyle" Value="{StaticResource MultiComboBoxItem}" />
<Setter Property="SnapsToDevicePixels" Value="true" />
<!--<Setter Property="OverridesDefaultStyle" Value="true" />-->
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
</Style>
Related
I have developed WPF code; I'm showing a figure like 0.77. But I want to show a figure like 0.7777.
I have two separate styles for both GridColumn and TextBox.
My code for gridcolumn is:
<Style TargetType="{x:Type dxg:GridColumn}" x:Key="dxGridColumnNumber" >
<Setter Property="ColumnHeaderContentStyle" Value="{DynamicResource dxHeaderContentControl}" />
<Setter Property="CellTemplate">
<Setter.Value>
<DataTemplate>
<dxe:TextEdit Name="PART_Editor" Mask="N2" MaskType="Numeric" HorizontalAlignment="Right" MaskUseAsDisplayFormat="True"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
Also This is for textbox:
<Style TargetType="{x:Type dxe:TextEdit}" x:Key="dxTextEditTutarText" BasedOn="{StaticResource dxTextEditBaseText}">
<Setter Property="MaskUseAsDisplayFormat" Value="True" />
<Setter Property="MaskType" Value="Numeric" />
<Setter Property="Mask" Value="N2" />
<Setter Property="HorizontalContentAlignment" Value="Right"/>
</Style>
Change the mask to "N4". In Your code, you set the mask to "N2" twice, which is unnecessary.
Just change
<Setter Property="Mask" Value="N2" />
to
<Setter Property="Mask" Value="N4" />
and remove Mask property in you TextExit (or the other way round)
For more options see https://msdn.microsoft.com/en-us/library/dwhawy9k(v=vs.100)
And the DevExpress documentation: https://documentation.devexpress.com/WindowsForms/1498/Controls-and-Libraries/Editors-and-Simple-Controls/Simple-Editors/Concepts/Masks/Mask-Type-Numeric
I have a WPF project, where i want to do implicit styling for all Windows of my program.
I am facing problems with the DataGridTextColumn in my DataGrid. This is a TextBlock in view mode and a TextBox in EditMode, but my styles to not apply to them.
My Implicit Styling
<System:Double x:Key="FontSize">14</System:Double>
<Style x:Key="TextBoxStyle" TargetType="TextBox">
<Setter Property="Margin" Value="3" />
<Setter Property="MinWidth" Value="30" />
<Setter Property="Height" Value="20" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Background" Value="White" />
<Setter Property="FontSize" Value="{StaticResource FontSize}" />
<Style.Triggers>
<Trigger Property="IsReadOnly" Value="True">
<Setter Property="Background" Value="LightGray" />
</Trigger>
</Style.Triggers>
</Style>
<Style TargetType="TextBox" BasedOn="{StaticResource TextBoxStyle}" />
This styling is not applied to DataGridTextColumn in Edit mode.
I found some help in this StackOverflow Question
<Style TargetType="DataGridCell">
<Setter Property="TextElement.FontSize" Value="{StaticResource FontSize}" />
</Style>
The end result is that the FontSize is now applied, but the Content is Vertically Top Aligned
I then found a solution to Vertically CenterAlign the content of the DataGridTextColumn
<Style TargetType="DataGridCell">
<Setter Property="TextElement.FontSize" Value="{StaticResource FontSize}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridCell}">
<Grid Background="{TemplateBinding Background}">
<ContentPresenter VerticalAlignment="Center" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Unfortunately, i now face Borders in my EditMode
I have tried various solutions to try and remove the Borders around the TextBox, but i have been unable.
Is there anyway where i can specify that my implicit TextBox style should also apply to the DataGridTextColumn Editmode?
I am finding WPF Styling to be limiting and hard to understand. I hope someone can provide some clarity
You could set the EditingElementStyle of all columns to your TextBoxStyle, e.g.:
<DataGrid ...>
<DataGrid.Resources>
<System:Double x:Key="FontSize">14</System:Double>
<Style x:Key="TextBoxStyle" TargetType="TextBox">
<Setter Property="Margin" Value="3" />
<Setter Property="MinWidth" Value="30" />
<Setter Property="Height" Value="20" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Background" Value="White" />
<Setter Property="FontSize" Value="{StaticResource FontSize}" />
<Style.Triggers>
<Trigger Property="IsReadOnly" Value="True">
<Setter Property="Background" Value="LightGray" />
</Trigger>
</Style.Triggers>
</Style>
</DataGrid.Resources>
<DataGrid.Columns>
<DataGridTextColumn Binding="{Binding Property1}" EditingElementStyle="{StaticResource TextBoxStyle}" />
<DataGridTextColumn Binding="{Binding Property2}" EditingElementStyle="{StaticResource TextBoxStyle}" />
</DataGrid.Columns>
</DataGrid>
There is no implicit styling for these TextBoxes so you need to set the EditingElementStyle property of each individual column I am afraid.
I have these controls:
<Border Style="{StaticResource Button}">
<TextBlock>NEW</TextBlock>
</Border>
<Border Style="{StaticResource Button}">
<TextBlock>CLOSE</TextBlock>
</Border>
<Border Style="{StaticResource Button}">
<TextBlock>EXIT</TextBlock>
</Border>
And this style:
<Style x:Key="Button" TargetType="{x:Type Border}">
<Setter Property="Padding" Value="15, 10" />
<Setter Property="Margin" Value="5, 0" />
<Setter Property="MinWidth" Value="150" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Cursor" Value="Hand" />
</Trigger>
</Style.Triggers>
<Style.Resources>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
</Style.Resources>
</Style>
And I want to set each button/border to a specific, different color each, and another color for IsMouseOver.
I tried setting the Background on the control, but then the style can't overwrite the background and I can't do the IsMouseOver change.
I can only think of creating a different style for each one with their colors, but is there anyway to do a partial styling, like how you'd do in CSS?
<div class="button blue">NEW</div>
<div class="button red">CLOSE</div>
<div class="button gray">EXIT</div>
Or any other way to achieve this?
I haven't done any XAML in a while, so I'm a tad rusty. I'm pretty sure you can't do partial styles, but I know you can inherit styles using "BasedOn".
https://msdn.microsoft.com/en-us/library/system.windows.style.basedon(v=vs.110).aspx
This will allow you to do your base button style, and then create a color variant for each color you need based upon the common style features.
<Style x:Key="Button" TargetType="{x:Type Border}">
<Setter Property="Padding" Value="15, 10" />
<Setter Property="Margin" Value="5, 0" />
<Setter Property="MinWidth" Value="150" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Cursor" Value="Hand" />
</Trigger>
</Style.Triggers>
<Style.Resources>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
</Style.Resources>
</Style>
<Style x:Key="ButtonBlue" TargetType="{x:Type Border}" BasedOn="{StaticResource Button}">
<Setter Property="Background" Value="Blue" />
</Style>
Something like that, and then you use "ButtonBlue" instead of "Button" as the static resource you're referencing in the XAML for the control that you want to be blue. You should be able to add triggers as well in the inheriting style. Hopefully I'm remembering my syntax correctly.
Also, you may want to change the style Key to something other than "Button". Could be a bit confusing.
I create an UWP App and define some styles like this:
<Style TargetType="TextBlock" >
<Setter Property="Foreground" Value="Orange" />
<Setter Property="Margin" Value="12" />
<Setter Property="FontSize" Value="18" />
So, all my TextBlocks are orange and have a margin of 12px. All fine. But now I want to define a second style for Headlines, which should be inherit the base style and just override the extra defined properties, like this:
<Style x:Key="HeadlineStyle" TargetType="TextBlock">
<Setter Property="FontSize" Value="32" />
But if I do it this way, all other style definitions are gone (no margin, no coloring).
So how could I keep the base style?
In WPF I can use the x:Type attribute and just say
BasedOn="{StaticResource {x:Type Button}}"
But x:Type are not available in UWP (and what I found it is no longer supported)
This does exactly what you want:
<Grid.Resources>
<Style TargetType="TextBlock" x:Key="medium">
<Setter Property="Foreground" Value="Orange"/>
<Setter Property="FontSize" Value="20"/>
</Style>
<Style TargetType="TextBlock" BasedOn="{StaticResource medium}">
<Setter Property="FontSize" Value="10"/>
</Style>
<Style TargetType="TextBlock" x:Key="bigger" BasedOn="{StaticResource medium}">
<Setter Property="FontSize" Value="30"/>
</Style>
</Grid.Resources>
<StackPanel>
<TextBlock Text="normal"/>
<TextBlock Text="medium" Style="{StaticResource medium}"/>
<TextBlock Text="bigger" Style="{StaticResource bigger}"/>
</StackPanel>
The first TextBlock is 10-px orange
The second TextBlock is 20-px orange
The third TextBlock is 30-px orange
I'm trying to style the Extended WPF Toolkit RichTextBox like so:
<Style TargetType="{x:Type tk:RichTextBox}">
<Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="SpellCheck.IsEnabled" Value="True"/>
<Setter Property="tk:RichTextBoxFormatBarManager.FormatBar" Value="{x:Type tk:RichTextBoxFormatBar}"/>
</Style>
However at runtime it fails with a ArgumentNullException saying: "Value cannot be null. Parameter name: property".
What could be causing this behaviour?
EDIT 1
I also tried this syntax:
<Style TargetType="{x:Type tk:RichTextBox}">
<Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="SpellCheck.IsEnabled" Value="True"/>
<Setter Property="tk:RichTextBoxFormatBarManager.FormatBar">
<Setter.Value>
<tk:RichTextBoxFormatBar />
</Setter.Value>
</Setter>
</Style>
Unfortunately it gave me the same exception.
Value is expecting an instance not a Type. Please try
<Style TargetType="{x:Type tk:RichTextBox}">
<Setter Property="VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="SpellCheck.IsEnabled" Value="True" />
<Setter Property="tk:RichTextBoxFormatBarManager.FormatBar">
<Setter.Value>
<tk:RichTextBoxFormatBar />
</Setter.Value>
</Setter>
</Style>