I am trying to use a setter in my application to change to font size of all Controls. My Style is looking like this:
<Style x:Key="baseStyle" TargetType="{x:Type Control}">
<Setter Property="FontSize" Value="12" />
<Setter Property="Background" Value="{x:Null}" />
<Style.Triggers>
<DataTrigger Binding="{Binding Width, ConverterParameter=1000, Converter={StaticResource DoubleToBoolConverter}, ElementName=window, Mode=OneWay}" Value="True">
<Setter Property="FontSize" Value="24" />
<Setter Property="Background" Value="Red" />
</DataTrigger>
</Style.Triggers>
</Style>
All of my substyles are looking like this
<Style BasedOn="{StaticResource baseStyle}" TargetType="{x:Type Button}">
...
</Style>
My problem is that my styles isnot applied to all controls. Labels for example seam to ignore my FontSize Setter
Default Style:
Triggered Style:
Do you actually refer to Label elements or TextBlock elements? Because the latter type is not a Control and won't be affected by your Style. This should work though:
<Style BasedOn="{StaticResource baseStyle}" TargetType="{x:Type Label}" />
But please always remember to provide a reproducible sample of your issue when asking a question: https://stackoverflow.com/help/mcve
Related
I've a style for my WPF buttons, defined in the main window:
<Window.Resources>
<Style TargetType="Button">
<Setter Property="Width" Value="Auto" />
<Setter Property="Height" Value="Auto" />
<Setter Property="FontSize" Value="12" />
<Setter Property="Foreground" Value="#FFFFFF" />
<Setter Property="Background" Value="#3fa9f5" />
...
</Style>
</Window.Resources>
In an UserControl, I want to set the content and the background depending on a binding:
<Button.Style>
<Style TargetType="Button">
<Setter Property="Content" Value="Text123" />
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=myControl, Path=IsHidden}"
Value="true">
<Setter Property="Content" Value="TextABC" />
<Setter Property="Background" Value="#ff1d25" />
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
The problem: The button in the UserControl looses all other properties it gets from the main window style (color, width, margins, ...).
I tried to let the UserControl button's style know the parent style via
BasedOn="{StaticResource {x:Type Button}}"
but with no result.
in WPF I override the basic control styles with the following Code:
<Style TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type Button}}">
<Setter Property="Padding" Value="5" />
<Setter Property="Margin" Value="{StaticResource margin}" />
</Style>
In UWP the x:Type in XAMl is gone. So how can I accomplish the above code in UWP? Thanks.
This should be it:
<Style TargetType="Button">
<Setter Property="Padding" Value="5" />
<Setter Property="Margin" Value="{StaticResource margin}" />
</Style>
From what I can gather from the documentation, x:Type is no longer supported in Universal Windows Apps.
To get around style inheritance, you will need to create a base style which has an x:Key, this can be referenced using the StaticResource markup for the BasedOn property.
<Style x:Key="BasicButtonStyle" TargetType="Button">
... (This may contain nothing)
</Style>
<Style TargetType="Button"
BasedOn="{StaticResource BasicButtonStyle}">
...
</Style>
In WPF i have a style for the control like below,
<Style TargetType="local:CustomControl">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Gray" />
<Setter Property="BorderThickness" Value="0,0,0,1" />
<Setter Property="Padding" Value="3,0,3,0" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="VerticalContentAlignment" Value="Center" />
</Style>
Now i need to override customcontrol border for some other place like below,
<Style TargetType="local:CustomControl" BasedOn="{StaticResource {x:Type local:CustomControl}}">
<Setter Property="BorderThickness" Value="1" />
</Style>
My problem is when i am using above code it override the 1st written code. is my code is correct.
Note: the base style is only written with target type. i need to override that control border in some other place without affect base code.
is it possible ? please help me to resolve this problem.
thanks in advance.
If you declare a Style without an x:Key, it will override the default style for that control.
<Style TargetType="local:CustomControl">
So the code above will effect all CustomControl elements throughout the entire application (or within the scope).
If you do not want to override the base style, you can give your Style an x:Key, like so:
<Style TargetType="local:CustomControl" x:Key="MyAwesomeStyle">
When you create your control, you will then have to reference the Style. Here's an example:
<local:CustomControl Style="{DynamicResource MyAwesomeStyle}" ... />
Accidentally I saw some example which can be useful in solving the mentioned problem. In your example own custom control has been used, in my example - a button.
<Grid>
<Button Style="{StaticResource AddButtonStyle}" Tag="Add" Click="addClick" />
</Grid>
Code for AddButtonStyle:
<Style x:Key="AddButtonStyle" TargetType="Button" BasedOn="{StaticResource AppBarButtonStyle}">
<Setter Property="Content" Value="✅"/>
</Style>
AddButtonStyle based on AppBarButtonStyle. Below code for it.
<Style x:Key="AppBarButtonStyle" TargetType="Button">
<Setter Property="MinWidth" Value="40" />
<Setter Property="Width" Value="100" />
<Setter Property="Height" Value="88" />
<Setter Property="HorizontalAlignment" Value="Right" />
<Setter Property="Foreground" Value="White" />
<Setter Property="FontFamily" Value="Segoe UI Symbol" />
<Setter Property="FontSize" Value="18" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">. . .
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
On this example base, you must declare a Style with an x:Key, and should not set any value to Content (in you example BorderThickness) property in the inherited style.
I have have a ToolBar which I am styling using the code shown below. I have come across three problems with the my ToolBar styling:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:cal="http://www.caliburnproject.org">
<Style x:Key="ToolBarToggleButton" TargetType="{x:Type ToggleButton}"
BasedOn="{StaticResource {x:Static ToolBar.ToggleButtonStyleKey}}">
<Setter Property="Icon" Value="{Binding Icon}"/>
<Setter Property="ToolTip" Value="{Binding FullToolTip}" />
<Setter Property="ToolTipService.IsEnabled" Value="{Binding HasToolTip}" />
<Setter Property="IsChecked" Value="{Binding IsChecked}" />
<Setter Property="cal:Action.Target" Value="{Binding}" />
<Setter Property="cal:Message.Attach" Value="{Binding ActionText}" />
</Style>
...
First:
The tool bar images are currently getting used as a single static instance. Even with the property x:Shared="False" moving the ToolBar one over another will cause a rendering failure.
Solution:
In the ToolTip Styles.xaml, include the image source as a ContentTemplate
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:cal="http://www.caliburnproject.org">
<Style x:Key="ToolBarToggleButton" TargetType="{x:Type ToggleButton}"
BasedOn="{StaticResource {x:Static ToolBar.ToggleButtonStyleKey}}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Image x:Shared="false" Source="{Binding Icon}">
<Image.Style>
<Style TargetType="Image">
<Setter Property="Width" Value="16" />
<Setter Property="Height" Value="16" />
<Setter Property="Stretch" Value="Fill" />
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.5" />
</Trigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="ToolTip" Value="{Binding FullToolTip}" />
<Setter Property="ToolTipService.IsEnabled" Value="{Binding HasToolTip}" />
<Setter Property="IsChecked" Value="{Binding IsChecked}" />
<Setter Property="cal:Action.Target" Value="{Binding}" />
<Setter Property="cal:Message.Attach" Value="{Binding ActionText}" />
</Style>
<Style x:Key="ToolBarButton" TargetType="{x:Type Button}"
BasedOn="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Image x:Shared="false" Source="{Binding Icon}">
<Image.Style>
<Style TargetType="Image">
<Setter Property="Width" Value="16" />
<Setter Property="Height" Value="16" />
<Setter Property="Stretch" Value="Fill" />
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.5" />
</Trigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="ToolTip" Value="{Binding FullToolTip}" />
<Setter Property="ToolTipService.IsEnabled" Value="{Binding HasToolTip}" />
<Setter Property="cal:Action.Target" Value="{Binding}" />
<Setter Property="cal:Message.Attach" Value="{Binding ActionText}" />
</Style>
</ResourceDictionary>
Now we have:
No other changes required.
Second:
The same dragging procedure the ToolTip and ToolTipService bindings also get corrupted - at this stage I am not sure of the underlying reason. The quick solution is to do what I have done with the image above and add the ToolTip to the Image. However, this causes the ToolTip only to show when over the Image and not when hovering over the very edge of the button.
Partial Solution:
Add the ToolTip to the Image. However, this is not ideal as then the tool tips do not show when on the very edge of the button.
Third:
When the drag operation shown above occurs, this also breaks the Caliburn property bindings
<Setter Property="cal:Action.Target" Value="{Binding}" />
<Setter Property="cal:Message.Attach" Value="{Binding ActionText}" />
Questions: (Second and Third Problem)
How to fix the problem with the ToolTip rendering?
How to fix the problem with the Caliburn property binding?
Thanks for your time.
Solution:
"I've finally fixed this. As near as I can tell, when you initiate a drag on a toolbar, any toolbar items on other toolbars which are covered by the toolbar you're dragging get removed from their current position in the visual tree, and then (presumably) added back when they're made visible again.
When they're removed from the visual tree (again, that's what I think is happening), they also lose access to the ToolBarToggleButton and ToolBarButton styles, because those are defined in the Styles.xaml resource dictionary which is added in ToolBarsView.xaml.
However, if you define those same styles globally, then it works - presumably, even though they're no longer children of ToolBarsView, they still have access to the global resources.
So... I've added a new property, IModule.GlobalResourceDictionaries, which allows each module to declare any resource dictionaries that should be added at the global scope. The ToolBars module makes use of this."
https://github.com/tgjones/gemini/issues/67#issuecomment-60040008
Try to re-assign the tooltips as a style trigger for the mouse over event such as:
<Button.Style>
<Style TargetType="Button">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="ToolTip" Value="{Binding FullToolTip}" />
<Setter Property="ToolTipService.IsEnabled" Value="{Binding HasToolTip}" />
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="ToolTip" Value="{Binding FullToolTip}" />
<Setter Property="ToolTipService.IsEnabled" Value="{Binding HasToolTip}" />
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
I'm trying to make a wpf style that will allow me to:
1. Base alternate styles off a base style
2. Have the base style be a default that every control uses when no style is applied.
For example, I have code to make style for a button...
<!--Base Button-->
<Style TargetType="Button" x:Key="BaseButton">
<Setter Property="Width" Value="auto"/>
<Setter Property="MaxWidth" Value="100"/>
<Setter Property="Height" Value="auto"/>
<Setter Property="MaxHeight" Value="50"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Cursor" Value="Hand"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Opacity" Value=".85"/>
</Trigger>
</Style.Triggers>
</Style>
<!--Apply Base to any Button without a style-->
<Style TargetType="Button" BasedOn="{StaticResource BaseButton}"/>
and here is a style for a specific button...
<Style TargetType="Button" x:Key="DeleteBtn" BasedOn="{StaticResource BaseButton}">
<Setter Property="Width" Value="100"/>
<Setter Property="Height" Value="35"/>
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="(some url)" Height="16" HorizontalAlignment="Left" VerticalAlignment="Center"/>
<Label Content="Delete" HorizontalAlignment="Left" VerticalAlignment="Center"/>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
As you can see, I would like to be able to base the "DeleteBtn" Style off of the base, but also have the base be the default for every button placed on the screen that doesn't have a specific style set. This currently only works for buttons and no other control. The above example does work, but I can't seem to do the same thing for labels, textboxes etc. Any thoughts or input would be greatly appreciated :)
Here's an example of one that doesn't work..
<!--Base Icon-->
<Style TargetType="Image" x:Key="BaseIcon">
<Setter Property="VerticalAlignment" Value="Top"/>
<Setter Property="HorizontalAlignment" Value="Right"/>
</Style>
<!--Apply Base to any Icon without a style-->
<Style TargetType="Image" BasedOn="{DynamicResource BaseIcon}"/>
It gives an error: 'DynamicResourceExtension' cannot be set on the 'BasedOn' property of type 'Style'. A 'DynamicResourceExtension' can only be set on a DependencyProperty of a DependencyObject.
Your example only works for Buttons because your "base" style is targeting buttons only.
i.e.
TargetType="Button"
You can try creating a style that targets the parent FrameworkElement instead. Just be warned that not all properties are supported. Some properties are unique to the child control.
It works for me, just tested it.
<Window.Resources>
<Style TargetType="Label" x:Key="BaseLabel">
<Setter Property="Background" Value="Red"/>
<Setter Property="HorizontalContentAlignment" Value="Right"/>
</Style>
<Style TargetType="Label" BasedOn="{StaticResource BaseLabel}"/>
</Window.Resources>
<Grid>
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Bottom" Orientation="Horizontal">
<Label Width="100" Content="TestLabel1"/>
<Label Width="100" Content="TestLabel1" Foreground="White"/>
</StackPanel>
</Grid>
Edit: Added derived right alignment for fun.