Question

I want to implement a WPF CustomControl, that…

1. Normally looks like a button and displays a float value as string
2. When dragging the button the float value is being manipulated like a virtual slider
3. When clicking the button, it is replaced by a TextBox, prefilled with the current Value as String. This text can be edited. Clicking outside of the TextBox or pressing return will change the control back to Button and use the edited text as the new Value.

We need this control in a highly streamlined interface. Although the description sounds a little weird, it works amazingly well for us. But for performance reasons we now have to refactor the current implementation as a UserControl into a CustomControl.

I got the slider-part of the control running and managed to show a TextBox attached to a Content DependencyProperty. Sadly, however, I fail to access this TextBox from the ControlTemplate, which looks roughly like this:

<Style TargetType="{x:Type local:FloatEditButton}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:FloatEditButton}">
                <Grid Margin="0">
                    <Viewbox VerticalAlignment="Center" HorizontalAlignment="{Binding RelativeSource={RelativeSource TemplatedParent},Path=HorizontalContentAlignment}" Margin="0">
                        <ContentPresenter Name="content" Margin="2"  VerticalAlignment="Center" />
                    </Viewbox>
                    <TextBox  x:Name="XTextBox" Visibility="Collapsed" Text="{Binding Content}"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="EditingAsTextBox" Value="True">
                        <Setter TargetName="XTextBox" Property="Visibility" Value="Visible"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Any idea, how this could be implemented as a CustomControl?

Answer 1

After fumbling around a bit, I found the following solution:

The template in Generic.xaml looks like this…

<Style TargetType="{x:Type local:FloatEditButton}">        
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:FloatEditButton}">
                <Grid Margin="0">
                    <TextBlock x:Name="PART_TextBlock" Grid.Row="1"
                               VerticalAlignment="Center" 
                               HorizontalAlignment="Center"
                               Margin="0"
                               FontSize="{TemplateBinding FontSize}"                                   
                               ></TextBlock>
                    <Canvas x:Name="SliderCanvas" Grid.Row="1"  IsHitTestVisible="False" Margin="0,3,0,2">
                        <Rectangle x:Name="PART_SliderDefaultRectangle" Width="1" Height="3" Canvas.Bottom="0"  Fill="Black"/>
                        <Rectangle x:Name="PART_SliderMarkerRectangle" Width="1" Canvas.Top="0" Canvas.Left="20" Fill="#30ffffff" Height="{Binding ElementName=SliderCanvas, Path=ActualHeight}" />
                        <Rectangle x:Name="PART_SliderFillRectangle" Width="10"  Fill="#10ffffff" Height="{Binding ElementName=SliderCanvas, Path=ActualHeight}"  />
                    </Canvas>
                    <TextBox  x:Name="PART_TextBox" 
                              Visibility="Collapsed" 
                              FontSize="{TemplateBinding FontSize}"                                   
                              VerticalAlignment="Center" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

The initializer function roughly looks like this: The important part is to overwrite OnApplyTemplate and use GetTemplateChild().

/**
 * Since we're using a CostumControl, we need to get the relevant UI children for the current instance
 * for changing their properties later and assigning eventhandlers.
 */
public override void OnApplyTemplate() {
    base.OnApplyTemplate();
    _textBox = GetTemplateChild("PART_TextBox") as TextBox;  // NOTE: FindName("PART_TextBox");  does NOT work here

    MouseLeftButtonDown+= MouseLeftButtonDownHandler;
    MouseLeftButtonUp+= MouseLeftButtonUpHandler;
    MouseMove+= MouseMoveHandler;
    MouseWheel+= MouseWheelHandler;
    LayoutUpdated+=LayoutUpdatedHandler;

    if (_textBox !=null) {
        _textBox.TextChanged += TextChangedHandler;
        _textBox.KeyUp += KeyUpHandler;
        _textBox.LostFocus += LostFocusHandler;
    }

    _sliderFillRectangle =    GetTemplateChild("PART_SliderFillRectangle") as Rectangle;
    _sliderDefaultRectangle = GetTemplateChild("PART_SliderDefaultRectangle") as Rectangle;
    _sliderMarkerRectangle =  GetTemplateChild("PART_SliderMarkerRectangle") as Rectangle;
    _textBlock = GetTemplateChild("PART_TextBlock") as TextBlock;
}

The internal member variables are later used like…

private void LostFocusHandler(object sender, RoutedEventArgs e) {
    if (!UpdateValueFromTextEdit())
        _textBox.Text = Value.ToString();

    _textBox.Visibility = Visibility.Collapsed;
    e.Handled= true;
}

The refactoring from UserControl to CustomControl speeds up the instanziation by 50%;