Custom TextBox with part of fixed content - wpf

Question

I need to create a custom TextBox in WPF and the textbox will have some digit and the string "% Per Annum" like "55% Per Annum". The user should be able to alter only the digit from the textbox, I want to keep the string "% Per Annum" as uneditable. Please help me.

Answer 1

In WPF you can modify the template of a control to completely change the appearance while keeping the functionality. In your case you can modify the control template of a TextBox by adding some extra text inside the border of the control.
In Visual Studio add a TextBox to your XAML. Then in the Document Outline you can right click the TextBox and select Edit Template => Edit a Copy.... A Style for a TextBox is then added to your XAML including a copy of the ControlTemplate used by the default TextBox. You can then modify the template as you like.
The main part of the TextBox is the ScrollViewer inside the ListBoxChrome border. To get the result you desire you can wrap the ScrollViewer inside a Grid with two columns and then place a TextBlock with the text "% Per Annum" in the second column. You probably also want to right align the text in the TextBox and you can do that by default by setting HorizontalContentAlignment to Right in the Style of the TextBox.
Here is a complete sample XAML where I have added some comments to show where I made the edits:
<Window
x:Class="WpfApplication.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<LinearGradientBrush x:Key="TextBoxBorder" EndPoint="0,20" MappingMode="Absolute" StartPoint="0,0">
<GradientStop Color="#ABADB3" Offset="0.05"/>
<GradientStop Color="#E2E3EA" Offset="0.07"/>
<GradientStop Color="#E3E9EF" Offset="1"/>
</LinearGradientBrush>
<Style x:Key="PerAnnumTextBoxStyle" BasedOn="{x:Null}" TargetType="{x:Type TextBox}">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
<Setter Property="BorderBrush" Value="{StaticResource TextBoxBorder}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="AllowDrop" Value="true"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
<!-- New setter -->
<Setter Property="HorizontalContentAlignment" Value="Right"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Themes:ListBoxChrome x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderFocused="{TemplateBinding IsKeyboardFocusWithin}" SnapsToDevicePixels="true">
<!-- ScrollViewer wrapped in a Grid -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ScrollViewer x:Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
<TextBlock Grid.Column="1" Margin="0,1"> % Per Annum</TextBlock>
</Grid>
</Themes:ListBoxChrome>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsInactiveSelectionHighlightEnabled" Value="true"/>
<Condition Property="IsSelectionActive" Value="false"/>
</MultiTrigger.Conditions>
<Setter Property="SelectionBrush" Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightBrushKey}}"/>
</MultiTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<StackPanel>
<TextBox Text="50" Style="{StaticResource PerAnnumTextBoxStyle}" Width="100" HorizontalAlignment="Left"/>
</StackPanel>
</Window>

Answer 2

The simplest and in my opionion better way is to put the text box inside a StackPanel
<StackPanel Orientation="Horizontal">
<TextBox Text="{Binding Path=MyTextProperty}"/>
<Label Content="55% Per Annum" />
</StackPanel>