Textbox with rounded corners

2 posts, 0 answers
  1. sven
    sven avatar
    1 posts
    Member since:
    May 2011

    Posted 09 Jun 2015 Link to this post

    Consider this code, which displays a textbox with rounded corners:

    <Window x:Class="WpfApplication1.MainWindow"
            xmlns:System="clr-namespace:System;assembly=mscorlib"
            Title="MainWindow" Height="350" Width="525">
        <Window.Resources>
            <ControlTemplate TargetType="TextBoxBase" x:Key="txt">
                <Border Padding="10" CornerRadius="10" BorderThickness="1" BorderBrush="Black" x:Name="Bd" Background="{TemplateBinding Panel.Background}">
                    <ScrollViewer Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="UIElement.IsEnabled">
                        <Setter Property="Panel.Background" TargetName="Bd">
                            <Setter.Value>
                                <DynamicResource ResourceKey="{x:Static SystemColors.ControlBrushKey}" />
                            </Setter.Value>
                        </Setter>
                        <Setter Property="TextElement.Foreground">
                            <Setter.Value>
                                <DynamicResource ResourceKey="{x:Static SystemColors.GrayTextBrushKey}" />
                            </Setter.Value>
                        </Setter>
                        <Trigger.Value>
                            <System:Boolean>False</System:Boolean>
                        </Trigger.Value>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Window.Resources>
        <Grid>
            <TextBox
                Template="{StaticResource txt}"
                Margin="10"
                Padding="10"
                Background="Transparent"
                BorderThickness="0"
                Width="254"
                Height="55"/>
        </Grid>
    </Window>

    But if I add reference to telerik controls, then the border of the textbox is displayed again, regardles of the 'BorderThickness' property. This is my code in App.xaml (if I comment this out then everything is ok again):

            <ResourceDictionary>
                <ResourceDictionary.MergedDictionaries>
                    <ResourceDictionary Source="/Telerik.Windows.Themes.Windows8;component/Themes/System.Windows.xaml"/>
                    <ResourceDictionary Source="/Telerik.Windows.Themes.Windows8;component/Themes/Telerik.Windows.Controls.xaml"/>
                    <ResourceDictionary Source="/Telerik.Windows.Themes.Windows8;component/Themes/Telerik.Windows.Controls.Navigation.xaml"/>
                    <ResourceDictionary Source="/Telerik.Windows.Themes.Windows8;component/Themes/Telerik.Windows.Controls.Docking.xaml"/>
                </ResourceDictionary.MergedDictionaries>
            </ResourceDictionary>

  2. Sia
    Admin
    Sia avatar
    667 posts

    Posted 11 Jun 2015 Link to this post

    Hello Sven,

    This behavior is caused by our default style that targets the MS ScrollViewer control (the gray border is actually its border). You can use the following template instead:
    <ControlTemplate TargetType="TextBoxBase" x:Key="txt">
        <Border CornerRadius="10" BorderThickness="1" BorderBrush="Black" x:Name="Bd" Background="{TemplateBinding Panel.Background}">
            <ScrollViewer Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" BorderThickness="0" Background="Transparent" />
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="UIElement.IsEnabled">
                <Setter Property="Panel.Background" TargetName="Bd">
                    <Setter.Value>
                        <DynamicResource ResourceKey="{x:Static SystemColors.ControlBrushKey}" />
                    </Setter.Value>
                </Setter>
                <Setter Property="TextElement.Foreground">
                    <Setter.Value>
                        <DynamicResource ResourceKey="{x:Static SystemColors.GrayTextBrushKey}" />
                    </Setter.Value>
                </Setter>
                <Trigger.Value>
                    <System:Boolean>False</System:Boolean>
                </Trigger.Value>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    Regards,
    Sia
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for WPF is Visual Studio 2017 Ready
Back to Top