Binding within a template

Question

I have the following ControlTemplate, as shown below, and I would like to avoid hard coding the hight and width of the image, instead I would like to bind the Height and width of the Image control

    <Image Source="/Rotate.Pictures;component/Images/error.png"
       Stretch="Uniform"
       HorizontalAlignment="Stretch"
       VerticalAlignment="Stretch"
       Height="14"
       Width="14"/>

to the TextBlock's Text (TextBlock named "ErrorText") property path = "Height". Both Height and Width of the image should be bound to the Height value of the TextBlock's Text Height property

Does anyone know how I can accomplish this?

Template:

    <Grid IsSharedSizeScope="True">
    <Grid.Resources>
        <Style TargetType="{x:Type TextBox}">
            <Setter Property="Validation.ErrorTemplate">
                <Setter.Value>
                    <ControlTemplate>
                        <StackPanel>
                            <AdornedElementPlaceholder>
                                <Border BorderBrush="Red" BorderThickness="2"/>
                            </AdornedElementPlaceholder>
                            <ItemsControl ItemsSource="{Binding}">
                                <ItemsControl.ItemTemplate>
                                    <DataTemplate>
                                        <StackPanel Orientation="Horizontal">
                                            <Image Source="/Rotate.Pictures;component/Images/error.png" Stretch="Uniform" HorizontalAlignment="Stretch"
                                                   VerticalAlignment="Stretch"
                                                   Height="14"
                                                   Width="14"/>
                                            <TextBlock x:Name="ErrorText" Text="{Binding ErrorContent}" Foreground="Red"/>
                                        </StackPanel>
                                    </DataTemplate>
                                </ItemsControl.ItemTemplate>
                            </ItemsControl>
                        </StackPanel>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Grid.Resources>

I guess what you actually want is a DataTrigger on the ErrorContent that sets the Image Visibility to Visible when ErrorContent isn't empty. — Clemens

AviFarah AviFarah · Accepted Answer · 2017-09-15T18:20:33

Key to the answer is to reference past controls (control that the thread of execution already encountered in the "{Binding ElementName=ErrorText, Path=ActualHeight}"). So the solution uses a grid, then specify Grid.Column 1 before specifying Grid.Column 0 that references the ElementName in Grid.Column 1.

        <Style TargetType="{x:Type TextBox}">
            <Setter Property="Validation.ErrorTemplate">
                <Setter.Value>
                    <ControlTemplate>
                        <StackPanel>
                            <AdornedElementPlaceholder>
                                <Border BorderBrush="Red" BorderThickness="2"/>
                            </AdornedElementPlaceholder>
                            <ItemsControl ItemsSource="{Binding}">
                                <ItemsControl.ItemTemplate>
                                    <DataTemplate>
                                        <Grid>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="Auto" />
                                                <ColumnDefinition Width="*" />
                                            </Grid.ColumnDefinitions>
                                            <TextBlock x:Name="ErrorText" Grid.Column="1" Text="{Binding ErrorContent}" Foreground="Red"/>
                                            <Image Grid.Column="0" Source="/Rotate.Pictures;component/Images/error.png"
                                                   Height="{Binding ElementName=ErrorText, Path=ActualHeight}"
                                                   Width="{Binding ElementName=ErrorText, Path=ActualHeight}"/>
                                        </Grid>
                                    </DataTemplate>
                                </ItemsControl.ItemTemplate>
                            </ItemsControl>
                        </StackPanel>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Binding within a template

1 Answers