Search code examples
c#wpftextboxcontroltemplate

Wpf textbox validation controltemplate trigger on text value


I have a textbox:

<TextBox Grid.Row="3"
         Grid.Column="1"
         Width="200"
         TextWrapping="Wrap"
         VerticalAlignment="Top"
         Margin="5,10,-10,2"
         Style="{StaticResource TextBoxValueStyle}"
         Validation.ErrorTemplate="{StaticResource ValidationControlTemplate}">                        
                    <TextBox.Text>
                        <MultiBinding StringFormat=" {0} {1}">
                            <Binding Path="Id" ValidatesOnNotifyDataErrors="True" NotifyOnValidationError="True"/>
                            <Binding Path="Name"  />
                        </MultiBinding>
                    </TextBox.Text>
</TextBox>

And here is my controltemplate:

<ControlTemplate x:Key="ValidationControlTemplate">
    <DockPanel Visibility="{Binding ElementName=Placeholder, Path=Visibility}">

        <Image x:Name="Image"
               DockPanel.Dock="Right"
               VerticalAlignment="Center"
               Margin="0,-2"
               Style="{StaticResource InformationImageStyle}">
            <Image.ToolTip>
                <ItemsControl ItemsSource="{Binding}">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding ErrorContent}"/>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </Image.ToolTip>

        </Image>
        <AdornedElementPlaceholder Name="Placeholder" VerticalAlignment="Center"/>
    </DockPanel>
    <ControlTemplate.Triggers>
        <Trigger Property="TextBox.Text" Value="">
            <Setter Property="DockPanel.Dock" TargetName="Image" Value="Left"/>
            <Setter Property="Margin" TargetName="Image" Value="-20,-2"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

My issue is that when the textbox has a value (and has error)it is NOT taking the original values (DockPanel.Dock=Right and Margin=0,-2)

I am always starting with text empty. The image is always showing to the left, on error.

What am I missing?


Solution

  • Put a Grid around the <AdornedElementPlaceholder /> element and replace the Trigger with a DataTrigger that binds to the adorned TextBox element:

    <ControlTemplate x:Key="ValidationControlTemplate">
        <DockPanel Visibility="{Binding ElementName=Placeholder, Path=Visibility}">
            <Image x:Name="Image"
                           DockPanel.Dock="Right"
                           VerticalAlignment="Center"
                           Margin="0,-2"
                           Style="{StaticResource InformationImageStyle}">
                <Image.ToolTip>
                    <ItemsControl ItemsSource="{Binding}">
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding ErrorContent}"/>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                </Image.ToolTip>
            </Image>
            <Grid>
                <AdornedElementPlaceholder Name="Placeholder" VerticalAlignment="Center"/>
            </Grid>
        </DockPanel>
        <ControlTemplate.Triggers>
            <DataTrigger Binding="{Binding AdornedElement.Text.Length, ElementName=Placeholder}" Value="0">
                <Setter Property="DockPanel.Dock" TargetName="Image" Value="Left"/>
                <Setter Property="Margin" TargetName="Image" Value="-20,-2"/>
            </DataTrigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>