Style inheritance issue mixing types - wpf

I'm trying to factorize some styles with common properties.
So I'm using style inheritance but seems like it's not fully implemented.
Say I have these two styles:
<Style TargetType="ProgressBar">
<Setter Property="Height" Value="50"></Setter>
<Setter Property="Margin" Value="10"></Setter>
</Style>
<Style TargetType="Rectangle">
<Setter Property="Height" Value="50"></Setter>
<Setter Property="Margin" Value="10"></Setter>
</Style>
Here is my first try:
<Style x:Key="BaseStyle" TargetType="FrameworkElement">
<Setter Property="Height" Value="50"></Setter>
<Setter Property="Margin" Value="10"></Setter>
</Style>
<Style BasedOn="{StaticResource BaseStyle}" TargetType="ProgressBar"></Style>
<Style BasedOn="{StaticResource BaseStyle}" TargetType="Rectangle"></Style>
It's running but the Visual Studio designer is not happy and it displays this error:
Can only base on a Style with target type that is base type of this style's target type.
AFAIK if I trust MSDN both ProgressBar and Rectangle should inherit from FrameworkElement.
Here is the full code:
<StackPanel>
<StackPanel.Resources>
<!--<Style TargetType="ProgressBar">
<Setter Property="Height" Value="50"></Setter>
<Setter Property="Margin" Value="10"></Setter>
</Style>
<Style TargetType="Rectangle">
<Setter Property="Height" Value="50"></Setter>
<Setter Property="Margin" Value="10"></Setter>
</Style>-->
<Style x:Key="BaseStyle" TargetType="FrameworkElement">
<Setter Property="Height" Value="50"></Setter>
<Setter Property="Margin" Value="10"></Setter>
</Style>
<Style BasedOn="{StaticResource BaseStyle}" TargetType="ProgressBar"></Style>
<Style BasedOn="{StaticResource BaseStyle}" TargetType="Rectangle"></Style>
</StackPanel.Resources>
<ProgressBar Value="50"></ProgressBar>
<ProgressBar IsIndeterminate="True"></ProgressBar>
<Rectangle Width="100" Fill="BlueViolet"></Rectangle>
</StackPanel>
Note that the exact same code is working fine with WPF both in the designer and at runtime.
Is this a VS bug or a WinRT limitation?
Am I doing something wrong?

Related

How do I apply styles to different `TextBlock` objects?

Here is my Application ResourceDictionary
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:CABI_PO_Manager.Themes">
<Style TargetType="TextBlock">
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="FontFamily" Value="Comic Sans MS"/>
<Setter Property="FontSize" Value="14"/>
</Style>
<Style BasedOn="{StaticResource {x:Type TextBlock}}"
TargetType="TextBlock"
x:Key="YellowTextBlock">
<Setter Property="FontSize" Value="16"/>
<Setter Property="Foreground" Value="#d8b243"/>
</Style>
<Style BasedOn="{StaticResource {x:Type TextBlock}}"
TargetType="TextBlock"
x:Key="GreenTextBlock">
<Setter Property="FontSize" Value="18"/>
<Setter Property="Foreground" Value="Green"/>
</Style>
<Style BasedOn="{StaticResource {x:Type TextBlock}}"
TargetType="TextBlock"
x:Key="RedTextBlock">
<Setter Property="FontSize" Value="14"/>
<Setter Property="Foreground" Value="#a01e21"/>
</Style>
</ResourceDictionary>
I want to have some default styles for a TextBlock which works
<Style TargetType="TextBlock">
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="FontFamily" Value="Comic Sans MS"/>
<Setter Property="FontSize" Value="14"/>
</Style>
I found somewhere to use x:Key but I can't get it to work.
I will have several TextBlock's, How do I identify a TextBlock in the UI XAML as Red, Yellow or Green TextBlock and apply that style to them? This isn't recognized x:Key="GreenTextBlock"
<TextBlock x:Key="GreenTextBlock" Grid.Column="1" Margin="0,10,0,0" TextWrapping="Wrap" Text="PO Manager" VerticalAlignment="Top" TextAlignment="Center" FontWeight="ExtraBold"/>
If u want apply style on for example all TextBlocks in application, just use style without x:key defined e.g
<Style TargetType="{x:Type TextBlock}">
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="FontFamily" Value="Comic Sans MS"/>
<Setter Property="FontSize" Value="14"/>
</Style>
When you are applying a style, use TargetType="{x:Type TextBlock}" instead of TargetType="TextBlock"
When do you use want to base on other style use
BasedOn="{StaticResource StyleUWantToBaseOn}"
where StyleUWantToBaseOn is style with x:Key property
And when you want to apply a specific style on lets say textblock you want to use Style property e.g:
<TextBlock Style="{StaticResource GreenTextBlock}" Grid.Column="1" />

RadioButton style property Padding not being applied

[Using .NET Framework 4.5.1]
I have the following resource set in one of my WPF Windows:
<Window.Resources>
<Style TargetType="{x:Type FrameworkElement}" x:Key="baseStyle">
<Setter Property="Margin" Value="5"/>
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
<Style TargetType="{x:Type FrameworkElement}" x:Key="basePlusEnabled" BasedOn="{StaticResource baseStyle}">
<Setter Property="IsEnabled" Value="{Binding TestIsRunning, Mode=OneWay}"/>
</Style>
<Style TargetType="RadioButton" BasedOn="{StaticResource basePlusEnabled}">
<Setter Property="Padding" Value="4,-5,0,0"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="Foreground" Value="{Binding TestIsRunning,
Converter={StaticResource testIsRunningForegroundConverter}, Mode=OneWay}"/>
</Style>
</Window.Resources>
However, the Padding style is not being applied to the RadioButtons in the window. (The other properties in the style are getting applied.) If I explicitly specify the Padding in each RadioButton, then it works. What am I missing here?
EDIT:
Sample RadioButton instance:
<RadioButton Grid.Column="4" Content="Iowa" GroupName="Facility"
IsChecked="{Binding IowaFacilityChecked1, UpdateSourceTrigger=PropertyChanged,
Mode=TwoWay}"/>
change TargetType="{x:Type FrameworkElement}" to TargetType="{x:Type RadioButton}"

Default style for TextBlock not being picked up after applying a style key

I have a <ResourceDictionary> containing this:
<Style TargetType="TextBlock">
<Setter Property="FontFamily" Value="..\..\Fonts\#Roboto"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="TextWrapping" Value="Wrap"/>
</Style>
This works fine.
Now I've added another style:
<Style x:Key="MyText" TargetType="{x:Type TextBlock}">
<Setter Property="Foreground" Value="Red"/>
<Setter Property="FontWeight" Value="SemiBold"/>
</Style>
However, after changing my <TextBlock> to <TextBlock Style="{StaticResource MyText}"/> - only the styles within the 2nd style block are picked up. E.g. the FontFamily, FontSize and TextWrapping are now ignored.
How can I have a default for a TextBlock, and then add to it? I don't want to add an x:Key to the 'default' style as this is in use throughout the system already.
I think you just need to base your keyed style on the type. See example below.
Note the BasedOn="{StaticResource {x:Type TextBlock}}"
<Window.Resources>
<Style TargetType="TextBlock">
<Setter Property="FontSize" Value="14"/>
<Setter Property="Foreground" Value="Green" />
<Setter Property="TextWrapping" Value="Wrap"/>
</Style>
<Style x:Key="MyText" TargetType="TextBlock">
<Setter Property="Foreground" Value="Red"/>
<Setter Property="FontWeight" Value="SemiBold"/>
</Style>
<Style x:Key="MyAppendedStyles" TargetType="TextBlock" BasedOn="{StaticResource {x:Type TextBlock}}">
<Setter Property="Foreground" Value="Red"/>
<Setter Property="FontWeight" Value="SemiBold"/>
</Style>
</Window.Resources>
<StackPanel>
<TextBlock Text="Hello" />
<TextBlock Style="{StaticResource MyText}" Text="Style Key" />
<TextBlock Style="{StaticResource MyAppendedStyles}" Text="Style Key" />
</StackPanel>

Silverlight: Fix for HyperlinkButton hover bug?

On hover of a HyperlinkButton in a vertical StackPanel, controls below the HyperlinkButton inch down a few pixels. It's kind of a weird bug, and I'm sure there's a fix, but the only HyperlinkButton bug fix I find relates to large text rendering a tad blurry on hover, not this positioning bug. Has anyone come across this?
XAML:
<Canvas x:Name="LayoutRoot">
...
<StackPanel x:Name="Article1" Style="{StaticResource ArticleContainer}"
Canvas.Top="46">
<StackPanel Orientation="Horizontal">
<Image x:Name="Article1Image" Style="{StaticResource ImageCategory}"/>
<TextBlock x:Name="Article1Title" Style="{StaticResource TitleText}"/>
</StackPanel>
<TextBlock x:Name="Article1Posted" Style="{StaticResource PostedText}"/>
<HyperlinkButton x:Name="Author1Link" Style="{StaticResource HLBStyling}">
<TextBlock x:Name="Article1By" Style="{StaticResource AuthorText}"/>
</HyperlinkButton>
<TextBlock x:Name="Article1Content" Style="{StaticResource ContentText}"/>
<HyperlinkButton x:Name="Article1Link" Style="{StaticResource HLBStyling}">
<TextBlock x:Name="Article1ReadMore" Style="{StaticResource ReadMoreText}"/>
</HyperlinkButton>
</StackPanel>
...
</Canvas>
App.xaml:
<Style x:Key="ContentPanel" TargetType="Border">
<Setter Property="Height" Value="427"/>
<Setter Property="Width" Value="250"/>
<Setter Property="Canvas.Top" Value="33"/>
<Setter Property="Canvas.Left" Value="0"/>
<Setter Property="Canvas.ZIndex" Value="1"/>
</Style>
<Style x:Key="ArticleContainer" TargetType="StackPanel">
<Setter Property="Height" Value="195"/>
<Setter Property="Width" Value="230"/>
<Setter Property="Canvas.Left" Value="10"/>
<Setter Property="Canvas.ZIndex" Value="2"/>
</Style>
<Style x:Key="ImageCategory" TargetType="Image">
<Setter Property="Width" Value="40"/>
<Setter Property="Height" Value="40"/>
<Setter Property="Margin" Value="5,5,5,0"/>
</Style>
<Style x:Key="TitleText" TargetType="TextBlock">
<Setter Property="LineStackingStrategy" Value="BlockLineHeight"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="TextWrapping" Value="Wrap"/>
<Setter Property="Height" Value="32"/>
<Setter Property="Width" Value="170"/>
<Setter Property="TextTrimming" Value="WordEllipsis"/>
<Setter Property="Margin" Value="10,0,0,0"/>
</Style>
<Style x:Key="PostedText" TargetType="TextBlock">
<Setter Property="FontSize" Value="12"/>
<Setter Property="TextWrapping" Value="Wrap"/>
<Setter Property="Height" Value="14"/>
<Setter Property="Width" Value="230"/>
<Setter Property="Margin" Value="0,10,0,0"/>
</Style>
<Style x:Key="AuthorText" TargetType="TextBlock">
<Setter Property="FontSize" Value="12"/>
<Setter Property="TextWrapping" Value="Wrap"/>
<Setter Property="Height" Value="14"/>
<Setter Property="Width" Value="230"/>
</Style>
<Style x:Key="ContentText" TargetType="TextBlock">
<Setter Property="LineStackingStrategy" Value="BlockLineHeight"/>
<Setter Property="FontSize" Value="12"/>
<Setter Property="TextWrapping" Value="Wrap"/>
<Setter Property="MaxHeight" Value="90"/>
<Setter Property="Width" Value="230"/>
<Setter Property="TextTrimming" Value="WordEllipsis"/>
</Style>
<Style x:Key="ReadMoreText" TargetType="TextBlock">
<Setter Property="FontSize" Value="12"/>
<Setter Property="Height" Value="16"/>
</Style>
<Style x:Key="HLBStyling" TargetType="HyperlinkButton">
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="IsTabStop" Value="False"/>
</Style>
This is caused by your the two styles you are using for HyperLinkButton (HLBStyling) and the TextBlocks they contain (AuthorText, ReadMoreText).
If you remove the TextBlock and just set the Content of the HyperLinkButton, the problem goes away. Also if you remove the style from the TextBlocks within the buttons, the problem goes away.

Silverlight 4 and Implicit styling

In Silverlight 4 it's possible to use implicit styling - and that is amazing! But what if I want to apply a style to all of my Buttons, CheckBoxes and RadioButtons (all inheriting from ButtonBase)? I can't set TargetType on the Style to ButtonBase - that doesn't work. Do I need to create a style to each of the 3 control types?
http://www.silverlightshow.net/items/Implicit-Styles-in-Silverlight-4.aspx
Try this
xamlgeek,
The following implicit styles work well for me. I first create some name/keyed styles, using common BasedOn styles whereever possible. Then I simply create the implicit styles BasedOn those named/keyed styles...
<Style x:Key="BaseStyle" TargetType="Control">
<Setter Property="FontFamily" Value="{StaticResource FontFamily}" />
<Setter Property="FontSize" Value="{StaticResource FontSize}" />
<Setter Property="Foreground" Value="{StaticResource FontBrush}" />
</Style>
<Style x:Key="BaseStyleCentered" TargetType="Control" BasedOn="{StaticResource BaseStyle}">
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
<Style x:Key="CommonCheckBox" TargetType="CheckBox" BasedOn="{StaticResource BaseStyleCentered}">
<Setter Property="Cursor" Value="Hand" />
</Style>
<Style x:Key="CommonRadioButton" TargetType="RadioButton" BasedOn="{StaticResource BaseStyleCentered}">
<Setter Property="Cursor" Value="Hand" />
</Style>
<Style x:Key="CommonButton" TargetType="Button" BasedOn="{StaticResource BaseStyleCentered}">
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Padding" Value="10,0,10,0" />
<Setter Property="MinWidth" Value="{StaticResource ButtonWidth}" />
<Setter Property="MinHeight" Value="{StaticResource ButtonHeight}" />
</Style>
<Style TargetType="CheckBox" BasedOn="{StaticResource CommonCheckBox}">
</Style>
<Style TargetType="RadioButton" BasedOn="{StaticResource CommonRadioButton}">
</Style>
<Style TargetType="Button" BasedOn="{StaticResource CommonButton}">
</Style>
Good luck,
Jim
YinYangMe, YinYangMoney and FaceToFaceSoftware

Resources