Using a ControlTemplate to display a "browse" button beside a textbox used for filenames

Question

Hi, I am attempting to attach a "Browse" button to a number of textboxes that will contain filenames.

I was aiming for something like this:

<TextBox Text="c:\Filename.txt" Template="{StaticResource FileBrowser}"/>

The control template I declared is as follows:

<Window.Resources>
    <ControlTemplate x:Key="FileBrowser" TargetType="{x:Type TextBox}">
        <Grid Grid.Row="{TemplateBinding Grid.Row}" Grid.Column="{TemplateBinding Grid.Column}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>

            <ContentPresenter Grid.Column="0" Grid.Row="0"/>
            <Button Grid.Column="1" Content="..."/>
        </Grid>
    </ControlTemplate>
</Window.Resources>

But when I attempt to use this, there is no-longer a TextBox there. Only a blank space, followed by "..."

Does anyone know what I'm doing wrong? Is this the sort of thing that can only be resolved via making a new UserControl?

Answer 1

ContentPresenter will just provide the Content (Text string), it won't provide the Textbox layout.

For this scenario, create a Usercontrol or ContentControl.

Answer 2

TextBox is not ContentControl and as such will not be able to make sense of a ContentPresenter.

You could however point the ContentPresenter to the right direction with a TemplateBinding to your Text property:

<ContentPresenter Grid.Column="0" Grid.Row="0" Content="{TemplateBinding Text}" />

Now it will represent the text as new content.

Also, you might want to reconsider using ContentPresenter at all, and just use a TextBlock in stead of ContentPresenter.

<TextBlock Grid.Column="0" Grid.Row="0" Text="{TemplateBinding Text}" />

Answer 3

just try this xaml...

    <Window.Resources>
    <LinearGradientBrush x:Key="NormalBrush" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#EEE" Offset="0.0"/>
        <GradientStop Color="#CCC" Offset="1.0"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="NormalBorderBrush" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#CCC" Offset="0.0"/>
        <GradientStop Color="#444" Offset="1.0"/>
    </LinearGradientBrush>

    <!-- LightBrush is used for content areas such as Menu, Tab Control background -->
    <LinearGradientBrush x:Key="LightBrush" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#FFF" Offset="0.0"/>
        <GradientStop Color="#EEE" Offset="1.0"/>
    </LinearGradientBrush>

    <!-- MouseOverBrush is used for MouseOver in Button, Radio Button, CheckBox -->
    <LinearGradientBrush x:Key="MouseOverBrush" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#FFF" Offset="0.0"/>
        <GradientStop Color="#AAA" Offset="1.0"/>
    </LinearGradientBrush>

    <!-- PressedBrush is used for Pressed in Button, Radio Button, CheckBox -->
    <LinearGradientBrush x:Key="PressedBrush" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#BBB" Offset="0.0"/>
        <GradientStop Color="#EEE" Offset="0.1"/>
        <GradientStop Color="#EEE" Offset="0.9"/>
        <GradientStop Color="#FFF" Offset="1.0"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="PressedBorderBrush" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#444" Offset="0.0"/>
        <GradientStop Color="#888" Offset="1.0"/>
    </LinearGradientBrush>

    <!-- SelectedBackgroundBrush is used for the Selected item in ListBoxItem, ComboBoxItem-->
    <SolidColorBrush x:Key="SelectedBackgroundBrush" Color="#DDD"/>

    <!-- Disabled Brushes are used for the Disabled look of each control -->
    <SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888"/>
    <SolidColorBrush x:Key="DisabledBackgroundBrush" Color="#EEE"/>
    <SolidColorBrush x:Key="DisabledBorderBrush" Color="#AAA"/>

    <!-- Used for background of ScrollViewer, TreeView, ListBox, Expander, TextBox, Tab Control -->
    <SolidColorBrush x:Key="WindowBackgroundBrush" Color="#FFF"/>

    <!-- DefaultedBorderBrush is used to show KeyBoardFocus -->
    <LinearGradientBrush x:Key="DefaultedBorderBrush" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#777" Offset="0.0"/>
        <GradientStop Color="#000" Offset="1.0"/>
    </LinearGradientBrush>

    <SolidColorBrush x:Key="SolidBorderBrush" Color="#888"/>
    <SolidColorBrush x:Key="LightBorderBrush" Color="#AAA"/>
    <SolidColorBrush x:Key="LightColorBrush" Color="#DDD"/>

    <!-- Used for Checkmark, Radio button, TreeViewItem, Expander ToggleButton glyphs -->
    <SolidColorBrush x:Key="GlyphBrush" Color="#444"/>
    <!-- Simple TextBox -->
    <Style x:Key="SimpleTextBox" TargetType="{x:Type TextBox}">
        <Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
        <Setter Property="AllowDrop" Value="true"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TextBox}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <Border x:Name="Border" Background="{DynamicResource WindowBackgroundBrush}" BorderBrush="{DynamicResource SolidBorderBrush}" BorderThickness="1" Padding="2" CornerRadius="2">

                            <!-- The implementation places the Content into the ScrollViewer. It must be named PART_ContentHost for the control to function -->
                            <ScrollViewer Margin="0" x:Name="PART_ContentHost" Style="{DynamicResource SimpleScrollViewer}" Background="{TemplateBinding Background}"/>

                        </Border>
                        <Button HorizontalAlignment="Stretch" Width="25" Content="..." Grid.Column="1" Margin="1"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Background" Value="{DynamicResource DisabledBackgroundBrush}" TargetName="Border"/>
                            <Setter Property="BorderBrush" Value="{DynamicResource DisabledBackgroundBrush}" TargetName="Border"/>
                            <Setter Property="Foreground" Value="{DynamicResource DisabledForegroundBrush}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</Window.Resources>
<Grid>
    <TextBox Style="{StaticResource SimpleTextBox}" Height="25"></TextBox>
</Grid>

Answer 4

TextBox defines a TemplatePart named "PART_ContentHost" of type ScrollViewer. All of the text handling in the code relies on this element existing in the template. Since you haven't included it in your template the TextBox is essentially broken. Change your ContentPresenter to this instead:

<ScrollViewer x:Name="PART_ContentHost" Grid.Column="0" Grid.Row="0"/>