Question

I have a custom IPAddressBox control in a WPF/C# project I inherited. The control works great, but it doesn’t allow me to change the background within XAML when the control is disabled (I can successfully change it via code behind, but I am trying desperately to break the coupling between the UI and business logic and want to get away from “Knowing every UI detail in my business code”

I have several controls that are enabled/disabled based on the selection of a combo box – the combo is a backup location – with 2 choices – DVD-RW or Network. If they select Network, I have an IPAddress control and text/password controls for the credentials. I can successfully enable/disable the controls by binding the IsEnabled property in the class, but I can’t seem to get the background of the IP control to turn grey. I have all the code for the control (XAML & CS) as well as my own code – I’m fairly new to WPF and am attempting to learn to do things right rather than immediately routing all events to the CS and doing it there….

Here is part of my XAML with my (latest) attempt to change the background:

<automation:IPAddressBox  Grid.Column=" 4" Grid.Row="4"                 
 Name="ipAddressBox_BackupIpAddress" Background="White" 
 IsEnabled="{Binding Path=IsBackupEnabled}">

 <automation:IPAddressBox.Style>
      <Style TargetType="{x:Type automation:IPAddressBox}">
      <Style.Triggers>
          <DataTrigger Binding="{Binding Path=IsBackkupEnabled}" Value="false">
        <Setter Property="Background" Value="LightGray"/>
         </DataTrigger>
     </Style.Triggers>
     </Style>
  </automation:IPAddressBox.Style>
</automation:IPAddressBox> "

<-- Other related controls -->

<Label Grid.Column="6" Grid.Row="2" Name="label_BackupUserID" Content="User ID:" 
       HorizontalAlignment="Right" IsEnabled="{Binding Path=IsBackupEnabled}" />

<TextBox Grid.Column="8" Grid.Row="2" Name="txtBackupUserID" 
     IsEnabled="{Binding Path=IsBackupEnabled}" />

<Label Grid.Column="6" Grid.Row="4" Name="label_BackupPassword" Content="Password:" 
       HorizontalAlignment="Right" IsEnabled="{Binding Path=IsBackupEnabled}" />

<PasswordBox Grid.Column="8" Grid.Row="4" Name="passwordBox_BackupPassword" 
       IsEnabled="{Binding Path=IsBackupEnabled}" />

Note that I am setting the background color to White as the base control is “transparent” for some reason. I’ve tried various styles/triggers on both the contol and within my own code, all will no luck in doing what I need – which is to turn the background grey

— Here is the control XAML for reference – I’m not sure if I need to include the public properties available on the control also there is basically 2 of interest – Foreground (type brush) and BorderBrush (also type brush) – I have tried adding IsEnabled to the properties on the control, trying to change the background there – again with no luck – the only place where it does work is in the “OnSelectionChanged for the combobox in my code.

Here is the simplified xaml for the IpAddressBox (I removed a few Popups that display for invalid values)

<UserControl.Resources>
  <Style x:Key="textBoxStyle" TargetType="{x:Type TextBoxBase}">
    <Setter Property="OverridesDefaultStyle" Value="True" />
       <Setter Property="Template">
       <Setter.Value>
           <ControlTemplate TargetType="{x:Type TextBoxBase}">
          <ScrollViewer x:Name="PART_ContentHost" Margin="0,3,0,0" />
           </ControlTemplate>
       </Setter.Value>
       </Setter/>
   </Style>
</UserControl.Resources>

<Border Name="border_IpAddressBox" BorderBrush="Black" BorderThickness="1">
   <Grid>
      <automation:NumericTextBox Height="23" x:Name="numericTextBox1" Width="30" 
      MinWidth="30" MaxWidth="30" HorizontalAlignment="Left" VerticalAlignment="Top"
      BorderBrush="Transparent" MaxLength="3" HorizontalContentAlignment="Center"
      ContextMenu="{StaticResource contextMenu_TextBox}" Background="Transparent" 
      Style="{StaticResource textBoxStyle}" />

     <automation:NumericTextBox Height="23" Margin="42,0,0,0" x:Name="numericTextBox2" 
       VerticalAlignment="Top" HorizontalAlignment="Left" Width="30" MinWidth="30" 
       MaxWidth="30" BorderBrush="Transparent" MaxLength="3" 
       HorizontalContentAlignment="Center" ContextMenu="{StaticResource 
       contextMenu_TextBox}" Background="Transparent" 
       Style="{StaticResource textBoxStyle}" IsTabStop="False" />

     <automation:NumericTextBox Height="23" Margin="84,0,0,0" x:Name="numericTextBox3" 
       VerticalAlignment="Top" HorizontalAlignment="Left" Width="30" MinWidth="30" 
       MaxWidth="30" BorderBrush="Transparent" MaxLength="3" 
       HorizontalContentAlignment="Center" ContextMenu="{StaticResource 
       contextMenu_TextBox}" Background="Transparent" Style="{StaticResource 
       textBoxStyle}" IsTabStop="False" />

     <automation:NumericTextBox Height="23" Margin="126,0,0,0" x:Name="numericTextBox4" 
       VerticalAlignment="Top" HorizontalAlignment="Left" Width="30" MinWidth="30"  
       MaxWidth="30" BorderBrush="Transparent" MaxLength="3" 
       HorizontalContentAlignment="Center" ContextMenu="{StaticResource 
       contextMenu_TextBox}" Background="Transparent" Style="{StaticResource 
       textBoxStyle}" IsTabStop="False" />

    <Label Name="label1" Height="23" Margin="30,0,0,0" VerticalAlignment="Top" 
       HorizontalAlignment="Left" Width="12">.</Label>

    <Label Name="label2" Height="23" HorizontalAlignment="Left" Margin="72,0,0,0" 
       VerticalAlignment="Top" Width="12">.</Label>

    <Label Name="label3" Height="23" HorizontalAlignment="Left" Margin="114,0,0,0" 
       VerticalAlignment="Top" Width="12">.</Label>

    </Grid>
  </Border>
</UserControl>

NumericTextBox is simply another user control that limits text input to numeric values – Only CS implementation, no XAML involved.

Thanks in advance for any help – 20 years in software development and this is my first question I’ve ever posted – Google usually does the trick, but not this time 🙂

— Brian

Answer 1

You cannot set the background explicitly to white and then override it with a style-applied value. A style value is “weaker” than what is called a local value and will never override it. Just move your white background setting into the style as well and it should work.