CODEWITHSUNDEEP
wpfuser-controlstriggers
van Nijnatten
van Nijnatten

Reputation: 404

Usercontrol style trigger not working

I am pretty sure this question has been asked from time to time since I found another question with about the same contents, here. But when I try to figure using all those pages, I'm just stuck... This is what I'm trying to do. I created a usercontrol to select a file and show the path to the file in a textbox. Just like in HTML (input type=file). That all works great and as expected. But when I try to change the colour of the textbox using a trigger (FilePathIsValid), it just does not work. The dependency properties all work fine, as said above. But the style just is not assigned to the textbox. Here is my XAML - can anybody tell me what I'm doing wrong? (Code Behind here, if needed)

<UserControl x:Class="Project.Controls.SelectFileBox"
         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:Controls="clr-namespace:Project.Controls"
         x:Name="ThisUserControl"
         mc:Ignorable="d" d:DesignHeight="30" d:DesignWidth="300">
<UserControl.Resources>
    <!-- This does not work... -->
    <Style TargetType="{x:Type Controls:SelectFileBox}">
        <Style.Triggers>
            <Trigger Property="FilePathIsValid" Value="false">
                <Setter Property="TextBoxBorderColor" Value="red"/>
            </Trigger>
        </Style.Triggers>
    </Style>
    <!-- Neither does this: FilePathIsValid can't be found -->
    <Style TargetType="{x:Type TextBox}">
        <Style.Triggers>
            <Trigger Property="FilePathIsValid" Value="false">
                <Setter Property="BorderBrush" Value="red"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</UserControl.Resources>
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="100"/>
    </Grid.ColumnDefinitions>
    <TextBox Grid.Column="0" Margin="3" IsEnabled="{Binding ElementName=ThisUserControl,Path=TextBoxIsEnabled}" Text="{Binding ElementName=ThisUserControl,Path=FilePath}" BorderThickness="{Binding ElementName=ThisUserControl, Path=TextBoxBorderThickness}"/>
    <Button Grid.Column="1" Margin="0,3,3,3" Content="{Binding ElementName=ThisUserControl, Path=ButtonText}" Click="SelectFileClick"/>
</Grid>

Upvotes: 2

Views: 4274

Answers (2)

Suresh
Suresh

Reputation: 4149

Ok, I understood the problem after looking at the codebehind.

All you need to do is add a binding to the BorderBrush property on the TextBox like below to get the right BorderBrush applied.

BorderBrush="{Binding ElementName=ThisUserControl, Path=TextBoxBorderColor}"

Full XAML for TextBox element:

<TextBox Grid.Column="0" Margin="3" 
         IsEnabled="{Binding ElementName=ThisUserControl,Path=TextBoxIsEnabled}"
         Text="{Binding ElementName=ThisUserControl,Path=FilePath}" 
         BorderThickness="{Binding ElementName=ThisUserControl, Path=TextBoxBorderThickness}" 
         BorderBrush="{Binding ElementName=ThisUserControl, Path=TextBoxBorderColor}"/>

I have tried and tested, below is the screenshot

Sample Output

Alternative Way:

You could have a style for TextBox and have data triggers to change the borderbrush:

<Style TargetType="TextBox">
       <Style.Triggers>
            <DataTrigger Binding="{Binding ElementName=ThisUserControl, 
                         Path=FilePathIsValid}" Value="False">
                  <Setter Property="BorderBrush" Value="Red" />
            </DataTrigger>
        </Style.Triggers>
</Style>

With this approach, you don't need style for SelectFileBox and binding for BorderBrush property on TextBox.

Upvotes: 1

Kumareshan
Kumareshan

Reputation: 1341

If i understand correctly you want to set the textBoxbroder as red if the path is invalid then change your code as below

<Style TargetType="{x:Type TextBox}">
    <Style.Triggers>
        <Trigger Property="FilePathIsValid" Value="false">
            <Setter Property="BorderBrush" Value="red"/>
        </Trigger>
    </Style.Triggers>
</Style>

Upvotes: 0

Related Questions