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
Related
In App.xaml I have styled all my Buttons.
<Style TargetType="Button">
<Setter Property="Margin" Value="3"/>
</Style>
I realized if the Button is in a DataGrid then I not need a margin. I have a lot of DataGrid and I put this code into all of them one by one.
<DataGrid.Resources>
<Style TargetType="Button">
<Setter Property="Margin" Value="0"/>
</Style>
</DataGrid.Resources>
Is there a more clever way to do this?
You can define Style for DataGrid and within that, add child control style to particular modification.
If you want to add this Style to all the DataGrids, no need to defineKey.
<Style x:Key="dataGrid" TargetType="DataGrid">
<Style.Resources>
<Style TargetType="Button">
<Setter Property="Margin" Value="0" />
</Style>
</Style.Resources>
</Style>
Declare a style with the key in the Window.Resources or App.Resources as shown below.
<Window.Resources>
<Style TargetType="Button" x:Key="dataGridButtonStyle">
<Setter Property="Margin" Value="3"/>
<Setter Property="Background" Value="Wheat"/>
</Style>
</Window.Resources>
Then apply the style to the control using the StaticResource with the key(in this example key name is dataGridButtonStyle)
<Button Style="{StaticResource ResourceKey= dataGridButtonStyle}" Content="Hello"/>
Please add resource file at Windows or User control level so that it will apply all child controls as below,
<Window.Resources>
<Style TargetType="DataGrid">
<Style.Resources>
<Style TargetType="Button">
<Setter Property="Background" Value="Red" />
<Setter Property="Margin" Value="0" />
</Style>
</Style.Resources>
</Style>
<Window.Resources>
or
<UserControl.Resources>
<Style TargetType="DataGrid">
<Style.Resources>
<Style TargetType="Button">
<Setter Property="Background" Value="Red" />
<Setter Property="Margin" Value="0" />
</Style>
</Style.Resources>
</Style>
</UserControl.Resources>
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 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 have a DatePicker in my application, that consists of DockPanels in a StackPanel in a ScrollViewer in a UserControl.
The (simplified) xaml of the UserControl looks like this:
<UserControl x:Class="project.UI1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xml:lang="de-DE"
mc:Ignorable="d" >
<UserControl.Resources>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Width" Value="250"/>
<Setter Property="TextWrapping" Value="Wrap"/>
<Setter Property="TextAlignment" Value="Right"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Margin" Value="2"/>
<Setter Property="Padding" Value="3"/>
</Style>
<Style TargetType="{x:Type TextBox}">
<Setter Property="DockPanel.Dock" Value="Top"/>
<Setter Property="TextWrapping" Value="Wrap"/>
<Setter Property="MaxWidth" Value="{Binding RelativeSource={RelativeSource AncestorType=Border},Path=ActualWidth}"/>
<Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
</Style>
<Style TargetType="{x:Type DatePicker}">
<Setter Property="Margin" Value="2"/>
<Setter Property="Width" Value="105"/>
<Setter Property="MaxWidth" Value="105"/>
<Setter Property="Height" Value="24"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
</Style>
<Style TargetType="{x:Type DockPanel}">
<Setter Property="DockPanel.Dock" Value="Top"/>
</Style>
<Style TargetType="{x:Type Border}">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="2"/>
</Style>
<Style TargetType="{x:Type ScrollViewer}">
<Setter Property="HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
</Style>
</UserControl.Resources>
<ScrollViewer>
<StackPanel>
<DockPanel>
<TextBlock Text="IK-Nummer des Absenders (z.B. D-Arzt)"/>
<Border>
<TextBox Text="{Binding p_1}"/>
</Border>
</DockPanel>
<DockPanel>
<TextBlock Text="IK-Nummer der UNI-DAV aus UV-Träger-Verzeichnis"/>
<Border>
<TextBox Text="{Binding p_2}" />
</Border>
</DockPanel>
<DockPanel>
<TextBlock Text="Datum der Erstellung durch den Leistungserbringer"/>
<DatePicker SelectedDate="{Binding p_3}"/>
</DockPanel>
</StackPanel>
</ScrollViewer>
</UserControl>
The TextBlocks have a 250px fixed width and hold the description of the fields while the TextBoxes for the user input are supposed to grow & shrink dynamically as the user resizes the window, to fit the rest of the window width.This is why I came up with packing every TextBlock/TextBox-combo in a DockPanel, and stack those in a StackPanel.
However, when I click on the DatePicker, the calendar beyond spans across the whole screen:
Even though this looks quite funky, I would prefer to get the common square calendar "popup" back.
Unfortunately, I don't know what causes the calendar to go wild like this at the moment...
The problem is your TextBlock style. It is being applied to the DateTimePicker because it has no key and so applies to all TextBlocks down the visual tree.
Can you give the style a key and only apply it to certain TextBlocks?
<Style TargetType="{x:Type TextBlock}" x:Key="TextBlockStyle">
<Setter Property="Width" Value="250"/>
<Setter Property="TextWrapping" Value="Wrap"/>
<Setter Property="TextAlignment" Value="Right"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Margin" Value="2"/>
<Setter Property="Padding" Value="3"/>
</Style>
....
<TextBlock Text="IK-Nummer der UNI-DAV aus UV-Träger-Verzeichnis"
Style="{StaticResource TextBlockStyle}"/>
UPDATE:
OR, you could just add a new TextBlock style to the DatePicker's resource to override the style higher up in the visual tree:
<DatePicker SelectedDate="{Binding p_3}">
<DatePicker.Resources>
<Style TargetType="{x:Type TextBlock}"/>
</DatePicker.Resources>
</DatePicker>
On the current window I have a Grid with multiple controls (labels, textboxes, buttons).
General styles are set in App.xaml. Extensions for each control are set in Grid resources.
Each control visibility is determined by viewmodel property value. Not to bind each controls visibility to it (it uses custom converter and this will cause lots duplications) I wish to have "MyVisible1" style.
The problem is if I apply this style it overlaps other properties. What value should I use in "BasedOn"? Or what else can I do to implement it?
<Grid>
<Grid.Resources>
<Style TargetType="{x:Type Control}" x:Key="MyVisible1">
<Setter Property="Visibility" Value="{Binding ...}" />
</Style>
<Style TargetType="Label" BasedOn="{StaticResource {x:Type Label}}">
<Setter Property="HorizontalAlignment" Value="Right" />
</Style>
<Style TargetType="TextBox" BasedOn="{StaticResource {x:Type TextBox}}">
<Setter Property="Width" Value="80" />
<Setter Property="HorizontalAlignment" Value="Left" />
</Style>
<Style TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
<Setter Property="Width" Value="45" />
<Setter Property="HorizontalAlignment" Value="Right" />
</Style>
</Grid.Resources>
<TextBox Grid.Column="0" Grid.Row="0" Style="{StaticResource MyVisible1}"/>
</Grid>
The only way that I can imagine that you can do this is to define a local implicit Style for this:
<Style TargetType="{x:Type Control}">
<Setter Property="Visibility" Value="{Binding ...}" />
</Style>
By not defining an x:Key, this Style will be implicitly applied to all controls that extend the Control class and by declaring it locally, it will only apply to those elements in the current focus scope. So defining it in a Grid.Resources section will implicitly apply it to all controls within that Grid. You are then free to apply whatever additional Styles that you want to these controls.