views:

116

answers:

2

I have a custom control template which is set via the style property on a TextBox. The visual poperties are set correctly, even typing to the textbox works, but there is no insertion cursor (the | symbol) visible which makes editing challenging for our users.

How does the control template need changing to get the traditional TextBox behavior back?

<Style x:Key="DemandEditStyle" TargetType="TextBox">
    <EventSetter Event="LostFocus" Handler="DemandLostFocus" />
    <Setter Property="HorizontalAlignment" Value="Stretch" />
    <Setter Property="VerticalAlignment" Value="Stretch" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>
                <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="1" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="1" />
                    </Grid.RowDefinitions>
                    <Grid.Background>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                            <GradientStop Color="White" Offset="0" />
                            <GradientStop Color="White" Offset="0.15" />
                            <GradientStop Color="#EEE" Offset="1" />
                        </LinearGradientBrush>
                    </Grid.Background>
                    <Border Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Background="Black" />
                    <Border Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" Background="Black" />
                    <Grid Grid.Row="0" Grid.Column="0" Margin="2">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="1" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="1" />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="1" />
                            <RowDefinition Height="*" />
                            <RowDefinition Height="1" />
                        </Grid.RowDefinitions>
                        <Border Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" Background="Black" />
                        <Border Grid.Row="0" Grid.Column="0" Grid.RowSpan="3" Background="Black" />
                        <Border Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3" Background="#CCC" />
                        <Border Grid.Row="0" Grid.Column="2" Grid.RowSpan="3" Background="#CCC" />
                        <TextBlock Grid.Row="1" Grid.Column="1"
                               TextAlignment="Right" HorizontalAlignment="Center" VerticalAlignment="Center" 
                               Padding="3 0 3 0" Background="Yellow"
                               Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Text}"
                               Width="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Grid}, AncestorLevel=1}, Path=ActualWidth}" />
                    </Grid>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Update: Replacing the inner-most TextBox with a ScrollViewer and naming it PART_ContentHost indeed shows the text insertion cursor.

+3  A: 

I suppose the reason is that your template lacks an element called PART_ContentElement. As stated here, an element with that name is used to display the content of the TextBox. However, in the v3.5 version of this document, the element is called PART_ContentHost and is further restricted to be a ScrollViewer or an AdornerDecorator.

gehho
This did the trick: the inner-most element needs to be a ScrollViewer as suggested.Thx!
Philipp Schmid
But now I cannot seem to find the place to indicate that the text in the TextBox should be right aligned, not left aligned. I've tried to set HorizontalContentAlignment to Right on both the ScrollViewer and the Style, but to no avail.Suggestions?
Philipp Schmid
Since the default template does not contain any special alignment bindings, but only sets the `HorizontalContentAlignment` in a `Setter` of the style, I would expect that it is sufficient to add a `Setter` to your `Style` which sets the `HorizontalContentAlignment` to `Right`, but obviously you already tried that. Does your `ScrollViewer` take all the available space, or is this maybe left-aligned itself, which would make the text appear to be left-aligned as well?!
gehho
Figured it out: TextAlignment is the property to set in the Style, not HorizontalContentAlignment! The ScrollViewer is properly stretched thanks to the Width binding.
Philipp Schmid
A: 

You should base your Style on the old Style of TextBox:

<Style x:Key="DemandEditStyle" TargetType="TextBox" BasedOn="{StaticResource {x:Type TextBox}}">
Arcturus
This won't help with issues inside the template itself because there's no merging of ControlTemplates between different Styles. Only one exists at a time for a given element.
John Bowen