Change a Border Background inside a BasedOn ControlTemplate - wpf

Here is the XAML in my application resources that globally changes all of the Button controls in the application to look and behave like I want:
<Style TargetType="{x:Type Button}" x:Key="MyButtonStyle">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="Border" CornerRadius="0" BorderThickness="0"
Background="CornflowerBlue" BorderBrush="CornflowerBlue">
<ContentPresenter Margin="2" HorizontalAlignment="Center" VerticalAlignment="Center" RecognizesAccessKey="True" />
</Border>
<ControlTemplate.Triggers>
<!-- a bunch o' triggers here -->
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
On one of my application's user controls, I would like to change some properties of this button. Here is some XAML that I am using in the UserControl.Resources section now to do this:
<Style x:Key="SpecialButton" TargetType="Button" BasedOn="{StaticResource MyButtonStyle}">
<Setter Property="Width" Value="20" />
<Setter Property="Visibility" Value="Collapsed" />
<Setter Property="Content" Value=">" />
<Setter Property="Border" Value="#eeeeee" />
<Setter Property="Border.Background" Value="#eeeeee" />
</Style>
The Button controls on my UserControl that I assign the style to of SpecialButton have the correct width, visibility, and content, but these last two attempts do not work. How would I go about changing the background color of the Border with a name of "Border" from the application resource in this SpecialButton style?

What you can do is use TemplateBinding to set the Background property on the control, in the base style. Also in the base style, set the Background color to the default "CornflowerBlue".
<Setter Property="Background" Value="CornflowerBlue" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="Border" Background="{TemplateBinding Background}"
Now you can overwrite the Background in the derived style:
<Style x:Key="SpecialButton" TargetType="Button" BasedOn="{StaticResource MyButtonStyle}">
<Setter Property="Background" Value="#eeeeee" />
(Note that, if you want to use other properties that aren't defined on the Button control -- or, say you wanted to use multiple background colors -- then you'd have to create your own control that inherits Button, and expose the new properties as Dependency Properties.)

Related

WPF - Using Control Template just on one element

My first steps in WPF and C# and i don't get it to work... :(
I have an application with two grids inside one window. I have to change the style of the first grid, so i started reading and reached using ControlTemplate.
My Grid now looks as i wanted it. But i only want that the first grid looks this way. the second one on the same page should have another style.
Is it possible to bind the controltemplate only on one grid. Maybe by name or soemthing identifying?
My ControlTemplate Code for now i have written in window.resources looks:
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<Border
Name="Border"
Margin="0,0,0,0"
Background="Black"
BorderBrush="Black"
BorderThickness="0,2,0,0"
CornerRadius="0,0,0,0" >
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="0,0,0,20"
RecognizesAccessKey="True"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Border" Property="BorderBrush" Value="#FF454E54" />
<Setter TargetName="Border" Property="Background" Value="#FF0A3651" />
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Border" Property="BorderBrush" Value="White" />
<Setter TargetName="Border" Property="Background" Value="#FF454E54" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You could give the Style or ControlTemplate an x:Key ( <Style x:Key="key" TargetType="{x:Type TabItem}"> ) and apply it to the element you want by setting the element's Style or Template property like this:
<TabItem Style="{StaticResource key}">
A Style without an x:Key is implicit and will be applied to all elements whose type matches the specified TargetType of the Style.
Instead of writing your template under Window.Resources do it under your Grid.Resources
Try this. All this is doing is setting the style of the TabItem directly.
<TabItem> <!-- This is your TabItem control -->
<TabItem.Style>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<!-- ControlTemplate here -->
</Controltemplate
</Setter.Value>
</Setter>
</Style>
</TabItem.Style>
</TabItem>

How to override Foreground for selected ListBoxItem

I have a global style (Application.Resources) to set the Foreground of all TextBlocks.
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Foreground" Value="Brown"/>
</Style>
This works fine.
Now I try to override the Foreground of the TextBlock inside of a selected ListBoxItem, which is part of default ContentPresenter content.
I created a new global style for the ListBoxItem:
<Style TargetType="ListBoxItem">
<Setter Property="Foreground" Value="Orange" />
<Setter Property="Background" Value="Aqua"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border Background="{TemplateBinding Background}">
<ContentPresenter/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="Brown" />
<Setter Property="Foreground" Value="Aqua" />
</Trigger>
</Style.Triggers>
</Style>
The background works fine.
But Foreground has still the brush form de global style from the TextBlock.
Which is the best way to set the Foreground in a solution that works with Binding?
This is an example of why defining an implicit application-wide TextBlock style is usually a bad idea.
But you should be able to override it by adding a default style to to <ContentPresenter.Resources>:
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border Background="{TemplateBinding Background}">
<ContentPresenter>
<ContentPresenter.Resources>
<Style TargetType="{x:Type TextBlock}" BasedOn="{x:Null}" />
</ContentPresenter.Resources>
</ContentPresenter>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>

Single Style for All Toggle Buttons but with Different Static Content

Static Resource Style
<Style TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background" Value="Red"></Setter>
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Background" Value="Green" />
</Trigger>
</Style.Triggers>
</Style>
Toggle Button Code
<ToggleButton Grid.Row="3" Grid.Column="1" ToolTip="Toggle to Show and Hide Date" IsChecked="True" Cursor="Hand">
<ToggleButton.Style>
<Style TargetType="{StaticResource ToggleButton}">
<Setter Property="Content" Value="No Date" />
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Content" Value="Date" />
</Trigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
</ToggleButton>
But I'm unable to set the content getting error as Content is not recognized or inaccessible.
I'm not a frequent user of WPF.
Thanks
In your Toggle Button Code, Change
<Style TargetType="{StaticResource ToggleButton}">
to
<Style TargetType="{x:Type ToggleButton}" BasedOn="{StaticResource {x:Type ToggleButton}}">
You can have a style defined for a control globally that is/may apply to all controls of that type, but when you have to give individual control some extra styling you can do that by creating a style within the control and base that style on the global style.
This basedOn can be done on style x:Type (as in my answer), or can be based on x:Name as well if you want to base it on a specific style.

WindowInstance WPF Custom Properties

Iam trying to create a custom Window which will contain some custom Properties. When I run the Application all things go fine but the problem that the xaml designer never recognize these properties
Also the Window's OnApplyTemplate method not working under designer
<Style TargetType="{x:Type windows:MDWindow}">
<Setter Property="AllowsTransparency" Value="True" />
<Setter Property="WindowStyle" Value="None" />
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type windows:MDWindow}">
<Grid >
<!--This Never Changed At Design Time-->
<TextBlock Text="{TemplateBinding Title}"></TextBlock>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

How can I apply the same style for textbox and combobox in WPF?

I have made a BaseStyle, which looks like this:
<Style x:Key="BaseStyle" TargetType="{x:Type Control}">
<Setter Property="KeyboardNavigation.TabNavigation" Value="None" />
<Setter Property="AllowDrop" Value="true" />
<Setter Property="Background" Value="Transparent"></Setter>
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="FontSize" Value="12" />
<Setter Property="Padding" Value="8,5,3,3" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Control}">
<Grid>
<Border x:Name="BorderBase" Background="White" BorderThickness="1,1,1.4,1.4" BorderBrush="Silver" CornerRadius="4" />
<Label x:Name="TextPrompt" Content="{TemplateBinding Tag}" Visibility="Collapsed" Focusable="False" Foreground="Silver"></Label>
<ScrollViewer Margin="0" x:Name="PART_ContentHost" Foreground="{DynamicResource OutsideFontColor}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="BorderThickness" TargetName="BorderBase" Value="1,1,2.4,2.4"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate x:Name="InspectorErrorTemplate">
<StackPanel Orientation="Vertical">
<Border BorderBrush="Red" BorderThickness="1" CornerRadius="4">
<AdornedElementPlaceholder Name="adornerPlaceholder"/>
</Border>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And have used it this way to apply it to a textbox, which works fine:
<Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource BaseStyle}" />
Now I thought I can simply use the same style at a textbox of a combobox. So I thought I have to add something in this part:
<ControlTemplate x:Key="ComboBoxTextBox" TargetType="{x:Type TextBox}">
<Border x:Name="PART_ContentHost" Focusable="False" Background="{TemplateBinding Background}" />
<ControlTemplate.Triggers>
</ControlTemplate.Triggers>
</ControlTemplate>
However, I cannot add something like BasedOn="{StaticResource BaseStyle}" in the ControlTemplate to make e.g. the textbox to get a different border when it receives the focus (see IsFocused Trigger in the BaseStyle), or a red curved corner in case the validation is triggered... What am I doing wrong?
Hi you are working with different border color for different text-box that is the only problem here. There are several other options but I feel the following option is good to go.
You can create your own UserControl keeping a TextBox inside it. You can add a new DependencyProperty- BorderColor property in your UserControl. So that according to the BorderColor property value internally you can change the color of the border. So here you don't have to worry about multiple Style or any inheritance.
Isn't it?
The template for a TextBox is fundamentally different than the the template for a ComboBox. So you'll have to have different templates.
You can have one base style to define the shared properties (like Padding, FontFamily, etc.) without defining the Template property. Then make two more styles: one with TargetType set to TextBox; and the other with TargetType set to ComboBox. Each of these styles will be based on your base style and have additional definition for the template (and other properties that are not shared between the two controls).

Resources