Styling Custom User Control Disabled state

Question

How can I style the 'disabled' state of my custom user control? I'm not clear on how to style the various parts of my custom user control. For example my custom user control is made up of several components. So How can I target specific parts of the control in my global style sheet? Keeping in mind that i want it to restore to it's original color if it's enabled again.

Here is my custom user control code...

VNode.xaml

<UserControl x:Class="WpfApplication1.VNode"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:WpfApplication1"
             mc:Ignorable="d" 
             d:DesignHeight="100" d:DesignWidth="200">
    <Grid>
        <Rectangle x:Name="Backplate" Fill="Green" Width="100" Height="50" RadiusX="3" RadiusY="3"/>
        <Rectangle x:Name="Highlight"
                   Height="60"
                   Width="110" 
                   Fill="Transparent"
                   Stroke="White"
                   StrokeThickness="2"
                   RadiusX="6" RadiusY="6">
        </Rectangle>
        <TextBlock x:Name="Label" Text="Label" TextWrapping="Wrap" Width="100" Height="50"/>
    </Grid>
</UserControl>

VNode.xaml.cs

using System.Windows.Controls;
using System.Windows.Media;

namespace WpfApplication1
{
    /// <summary>
    /// Interaction logic for VNode.xaml
    /// </summary>
    public partial class VNode : UserControl
    {
        public VNode()
        {
            InitializeComponent();
        }
        public Brush BackplateColor
        {
            get { return Backplate.Fill; }
            set { Backplate.Fill = value; }
        }
        public string Text
        {
            get { return Label.Text; }
            set { Label.Text = value; }
        }
    }
}

Style sheet

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:WpfApplication1">

    <Style x:Key="NodeStyle" TargetType="{x:Type local:VNode}">
        <Style.Triggers>
            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Backplate" Value="Red" />
            </Trigger>
        </Style.Triggers>
    </Style>

</ResourceDictionary>

Looks like you have to override the templates of each control in VNode, see [http://stackoverflow.com/questions/3751990/how-to-change-disabled-background-color-of-textbox-in-wpf](http://stackoverflow.com/questions/3751990/how-to-change-disabled-background-color-of-textbox-in-wpf) — jHilscher, Dec 15 '15 at 17:17

score 4 · Accepted Answer · answered Dec 15 '15 at 19:11

It is better to create or override Style for each Control. It gives to you flexibility for alteration styles of your Controls from code-behind and it is a separation of concerns.

For example, let's see style for TextBlock which changes its style depend on IsMouseOver or IsEnabled conditions:

At the App.xaml file:

<Application x:Class="UWPWpfApplication.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <Style TargetType="TextBlock" x:Key="VNodeTextBlock">
            <Setter Property="FontWeight" Value="Bold" />
            <Setter Property="FontSize" Value="8"/>
            <Style.Triggers>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter Property="Foreground" Value="Red" />
                </Trigger>
                <Trigger Property="IsEnabled" Value="True">
                    <Setter Property="Foreground" Value="Green" />
                </Trigger>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="FontSize" Value="20" />
                </Trigger>
            </Style.Triggers>
        </Style>

    </Application.Resources>
</Application>

At the form:

<TextBlock Text="Hello World!:)" Style="{StaticResource VNodeTextBlock}"/>

Styling Custom User Control Disabled state

1 Answers1