Search code examples
c#wpfxamldatatemplatedatatrigger

Implementing both controltemplate and datatriggers for a textbox control


I'm new to WPF....I have tried implementing controltemplate and datatriggers both for textbox..I want to change the background color of the textbox when the value entered in that is not "18" through datatriggers..(i want the controlproperty for the textbox to work as it is)how can i achieve it.... the Xaml code written is as follows:

    <TextBox x:Uid="txtagevals" x:Name="txtAge" Height="25" Width="80" Background="Wheat"  BorderThickness="1" BorderBrush="Black">
        <TextBox.Template>
            <ControlTemplate x:Uid ="txtagevals" TargetType="{x:Type TextBox}">
                <Border Background="{TemplateBinding Background}" 
                    BorderBrush="Black" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="5">
                      <ScrollViewer x:Name="PART_ContentHost"/>
                </Border>
            <ControlTemplate.Triggers>
                <DataTrigger Binding="{Binding Age}" Value="18">
                    <Setter TargetName="" Property="Text" Value="Green" />
                </DataTrigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </TextBox.Template>
</TextBox>

can anybody please help me...Thank you..


Solution

  • Try below code to validate text in textbox :

    <TextBox x:Uid="txtagevals" x:Name="txtAge" Height="25" Width="80">
                <TextBox.Style>
                    <Style TargetType="{x:Type TextBox}">
                        <Setter Property="Background" Value="Red"/>
                        <Style.Triggers>
                            <Trigger Property="Text" Value="18">
                                <Setter Property="Background" Value="Green"/>
                            </Trigger>
                            <Trigger Property="Text" Value="">
                                <Setter Property="Background" Value="White"/>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </TextBox.Style>
            </TextBox>
    

    In your code, you can do like this

     <TextBox x:Uid="txtagevals" x:Name="txtAge" Height="25" Width="80" BorderThickness="1" BorderBrush="Black">
                    <TextBox.Style>
                        <Style TargetType="{x:Type TextBox}">
                            <Setter Property="Background" Value="Red"/>
                        </Style>
                    </TextBox.Style>
                    <TextBox.Template>
                        <ControlTemplate x:Uid ="txtagevals" TargetType="{x:Type TextBox}">
                            <Border Background="{TemplateBinding Background}"  
                        BorderBrush="Black" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="5">
                                <ScrollViewer x:Name="PART_ContentHost"/>
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="Text" Value="18">
                                    <Setter Property="Background" Value="Green"/>
                                </Trigger>
                                <Trigger Property="Text" Value="">
                                    <Setter Property="Background" Value="White"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </TextBox.Template>
                </TextBox>
    

    You can bind gridview like below, it's working fine for me :

    <ListView Name="lstTest">
                    <ListView.View>
                        <GridView>
                            <GridViewColumn Header="" Width="100">
                                <GridViewColumn.CellTemplate>
                                    <DataTemplate>
                                        <TextBox x:Uid="txtagevals" x:Name="txtAge" Height="25" Width="80" BorderThickness="1" BorderBrush="Black" Text="{Binding Path=Age}">
                                            <TextBox.Style>
                                                <Style TargetType="{x:Type TextBox}">
                                                    <Setter Property="Background" Value="Red"/>
                                                </Style>
                                            </TextBox.Style>
                                            <TextBox.Template>
                                                <ControlTemplate x:Uid ="txtagevals" TargetType="{x:Type TextBox}">
                                                    <Border Background="{TemplateBinding Background}"  
                        BorderBrush="Black" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="5">
                                                        <ScrollViewer x:Name="PART_ContentHost"/>
                                                    </Border>
                                                    <ControlTemplate.Triggers>
                                                        <Trigger Property="Text" Value="18">
                                                            <Setter Property="Background" Value="Green"/>
                                                        </Trigger>
                                                        <Trigger Property="Text" Value="">
                                                            <Setter Property="Background" Value="White"/>
                                                        </Trigger>
                                                    </ControlTemplate.Triggers>
                                                </ControlTemplate>
                                            </TextBox.Template>
                                        </TextBox>
                                    </DataTemplate>
    
                                </GridViewColumn.CellTemplate>
                            </GridViewColumn>
                        </GridView>
                    </ListView.View>
                </ListView>