Style for a CustomControl is not applied in Generic file - styles

Question

I have a custom control, in that custom control I have loaded the TextBox, and I have customized the style for TextBox in Generic.XAML file but the style is not applied, Please refer the below code
CustomControl.cs
class CustomControl1 : Control
{
public CustomControl1()
{
this.DefaultStyleKey = typeof(CustomControl1);
}
}
Generic.XAML
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:CustomControl">
<Style TargetType="TextBox">
<Setter Property="Foreground" Value="Red"/>
</Style>
<Style TargetType="local:CustomControl1">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:CustomControl1">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<TextBox Width="100" Height="100" Text="Hi"
VerticalAlignment="Center" HorizontalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
MainWindow.XAML
<Page
x:Class="CustomControl.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:CustomControl"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid>
<local:CustomControl1 VerticalAlignment="Center" HorizontalAlignment="Center" Width="200" Height="200"/>
</Grid>
I have set the foreground color for TextBox in Generic.XAML file but that is not set to the TextBox. Please refer the below image,
If I customized the style for a TextBox in Page.Resources in MainWindow.XAML its works fine. But I need to customized in Generic.XAML itself.
Any suggestion on this?

Answer 1

There are multiple solutions:
Just set the Foreground property on the TextBox.
Since you ask this question, I suppose you'll have multiple TextBoxes and don't want to repeat setting the property. If the color has to change some day, you'll have a lot of work.
Give your TextBox style a key and apply that style.
Easy fix, but not perfect if have multiple types of controls with Foreground property.
<Style x:Key="RedStyle" TargetType="TextBox">
<Setter Property="Foreground" Value="Red"/>
</Style>
<Style TargetType="local:CustomControl1" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:CustomControl1">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<TextBox Width="100" Height="100" Text="Hi" Style="{StaticResource RedStyle}"
VerticalAlignment="Center" HorizontalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Define the Foreground property on your template and use TemplateBinding
This is my favorite fix.
<Style TargetType="local:CustomControl1" >
<Setter Property="Foreground" Value="Red" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:CustomControl1">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<TextBox Width="100" Height="100" Text="Hi" Foreground="{TemplateBinding Foreground}"
VerticalAlignment="Center" HorizontalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>