ControlTemplate for TextBox with Windows11 theme

[Yan]

I'm looking to convert all my style in my application to Windows11 style.

However, I have a little probleme with TextBox. As we create a control template for our textbox to add a button, I'm not able to replicate the Windows11 style in my template.

Our textbox looks like this:

Button can be shown or not.

Now, I want a look like this (this is the autocompletebox):

[Vicky]

Hi Yan,

Thanks for the provided details and screenshots - they were of great help.

I believe that the best component for your scenario is the RadWatermarkTextBox and its AdditionalContent property. All this with the Telerik Windows 11 theme applied, of course.

I prepared a sample code snippet, containing a watermark text box with a button as additional content and a glyph similar to the one from your first screenshot:

<telerik:RadWatermarkTextBox xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
                             VerticalAlignment="Center"
                             HorizontalAlignment="Center"
                             Width="300">
    <telerik:RadWatermarkTextBox.AdditionalContent>
        <telerik:RadButton Width="22" Height="22" MinHeight="0"
                           Padding="0" Margin="0 0 5 0"
                           VerticalAlignment="Center"
                           xmlns:helpers="clr-namespace:Telerik.Windows.Controls.Theming.Helpers;assembly=Telerik.Windows.Controls"
                           helpers:ThemeHelper.FocusVisualMargin="0"
                           Focusable="False"
                           IsBackgroundVisible="False">
            <telerik:RadGlyph Glyph="{StaticResource GlyphHeight}"
                              RenderTransformOrigin="0.5,0.5">
                <telerik:RadGlyph.RenderTransform>
                    <RotateTransform Angle="-45"/>
                </telerik:RadGlyph.RenderTransform>
            </telerik:RadGlyph>
        </telerik:RadButton>
    </telerik:RadWatermarkTextBox.AdditionalContent>
</telerik:RadWatermarkTextBox>

The result of the above looks like this:

Please, try it out in your app and let me know if this is what you are looking for.

Best Regards,
Vicky
Progress Telerik