Custom Control Background Color in WPF

Question

I have created a custom control as you see below (Generic.xaml):

<Style TargetType="{x:Type local:MyCC}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:MyCC}">
                <Grid Name="grd" Height="{Binding Height}" Width="{Binding Width}">
                    <Rectangle Name="FirstRec" Fill="Blue"/>
                    <Rectangle Name="SecondRec" Fill="Black" Margin="1"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property = "IsMouseOver" Value = "True">
            <Setter Property = "Background" Value = "Red" />
        </Trigger>
    </Style.Triggers>
</Style>

For FirstRec I want to get the Foreground color of the CC (instead of blue) and for the SecondRec I need to get the Background (instead of black). Therefore now the trigger does not work properly! I also don't want to bind the Height and Width of the Grid because the CC has its own height and width but I don't know how to use it! Would you please help me?!

EDIT:

It is actually a switch that has a status. if status == 0 it shows an empty rectangle. if status == 1 it shows a filled rectangle. if status == 3 || status == 4 it shows a red cross on it. here is the cc:

<Style TargetType="{x:Type local:BreakerCC}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:BreakerCC}">
                <Grid Name="grd" Background="{TemplateBinding Background}" >
                    <Rectangle Name="MainRectangle" StrokeThickness="1" Stroke="{TemplateBinding Foreground}"/>
                    <Path Name="Line1" Stroke="Red" StrokeThickness="1" Stretch="Fill">
                        <Path.Data>
                            <LineGeometry StartPoint="0,0" EndPoint="1,1" />
                        </Path.Data>
                        <Path.Style>
                            <Style TargetType="Path">
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding Path=Status}" Value="0x00">
                                        <Setter Property="Visibility" Value="Hidden"/>
                                    </DataTrigger>
                                    <DataTrigger Binding="{Binding Path=Status}" Value="0x01">
                                        <Setter Property="Visibility" Value="Hidden"/>
                                    </DataTrigger>
                                    <DataTrigger Binding="{Binding Path=Status}" Value="0x02">
                                        <Setter Property="Visibility" Value="Visible"/>
                                    </DataTrigger>
                                    <DataTrigger Binding="{Binding Path=Status}" Value="0x03">
                                        <Setter Property="Visibility" Value="Visible"/>
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </Path.Style>
                    </Path>
                    <Path Name="Line2" Stroke="Red" StrokeThickness="1" Stretch="Fill">
                        <Path.Data>
                            <LineGeometry StartPoint="0,1" EndPoint="1,0" />
                        </Path.Data>
                        <Path.Style>
                            <Style TargetType="Path">
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding Path=Status}" Value="0x00">
                                        <Setter Property="Visibility" Value="Hidden"/>
                                    </DataTrigger>
                                    <DataTrigger Binding="{Binding Path=Status}" Value="0x01">
                                        <Setter Property="Visibility" Value="Hidden"/>
                                    </DataTrigger>
                                    <DataTrigger Binding="{Binding Path=Status}" Value="0x02">
                                        <Setter Property="Visibility" Value="Visible"/>
                                    </DataTrigger>
                                    <DataTrigger Binding="{Binding Path=Status}" Value="0x03">
                                        <Setter Property="Visibility" Value="Visible"/>
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </Path.Style>
                    </Path>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

And this is the definition in MainWindow.xaml

<Window.Resources>
    <Style x:Key="230KV" TargetType="Control">
        <Setter Property="Background" Value="Black"/>
        <Setter Property="Foreground" Value="Red"/>
    </Style>
    <Style x:Key="132KV" TargetType="Control">
        <Setter Property="Background" Value="Black"/>
        <Setter Property="Foreground" Value="Green"/>
    </Style>
    <Style x:Key="400KV" TargetType="Control">
        <Setter Property="Background" Value="Black"/>
        <Setter Property="Foreground" Value="Purple"/>
    </Style>
</Window.Resources>
<Grid>
    <StackPanel>
        <CC:BreakerCC Status="{Binding Status}" Style="{StaticResource 132KV}" Height="20" Width="20"/>
    </StackPanel>
</Grid>

But when the status is 3 or 4 i need to change the Foreground to Red and that doesn't work!

Answer 1

Use TemplateBindings for the Brushes. Binding Width and Height is not at all necessary.

<Style TargetType="local:MyCC">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:MyCC">
                <Grid>
                    <Rectangle Fill="{TemplateBinding Foreground}"/>
                    <Rectangle Fill="{TemplateBinding Background}" Margin="1"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="Red" />
        </Trigger>
    </Style.Triggers>
</Style>

As a note, instead of a Grid you would usually have a Border element and assign TemplateBindings to its Background, BorderBrush and BorderThickness properties - as done by default by Visual Studio when you create a new custom control.

---

EDIT: It seems that you do not need a custom control at all. Just create ContentControl styles like these:

<Window.Resources>
    <Style TargetType="ContentControl" x:Key="BaseStyle">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ContentControl">
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                        <Path x:Name="path" Stroke="{TemplateBinding Foreground}"
                              Data="{TemplateBinding Content}" Stretch="Fill"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <DataTrigger Binding="{Binding Path=Status}" Value="0">
                            <Setter TargetName="path"
                                    Property="Visibility" Value="Hidden"/>
                        </DataTrigger>
                        <DataTrigger Binding="{Binding Path=Status}" Value="1">
                            <Setter TargetName="path"
                                    Property="Visibility" Value="Hidden"/>
                        </DataTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Background" Value="Black"/>
        <Setter Property="BorderBrush" Value="{Binding Foreground,
                                        RelativeSource={RelativeSource Self}}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Width" Value="20"/>
        <Setter Property="Height" Value="20"/>
    </Style>
    <Style x:Key="230KV" TargetType="ContentControl" BasedOn="{StaticResource BaseStyle}">
        <Setter Property="Foreground" Value="Red"/>
    </Style>
    <Style x:Key="132KV" TargetType="ContentControl" BasedOn="{StaticResource BaseStyle}">
        <Setter Property="Foreground" Value="Green"/>
    </Style>
    <Style x:Key="400KV" TargetType="ContentControl" BasedOn="{StaticResource BaseStyle}">
        <Setter Property="Foreground" Value="Purple"/>
    </Style>
</Window.Resources>
<StackPanel>
    <ContentControl Style="{StaticResource 230KV}">
        <PathGeometry>M0,0 L1,1 M0,1 L1,0</PathGeometry>
    </ContentControl>
    <ContentControl Style="{StaticResource 132KV}">
        <PathGeometry>M0,0 L1,1 M0,1 L1,0</PathGeometry>
    </ContentControl>
    <ContentControl Style="{StaticResource 400KV}">
        <PathGeometry>M0,0 L1,1 M0,1 L1,0</PathGeometry>
    </ContentControl>
</StackPanel>