WPF TabControl tabs "jumping" - c#

I'm creating a WPF tab control which contains tabs rotated 270° When I mouse the mouse over between tabs they appear to be "jumping". I'm looking for a way to prevent this from happening.The tabs should have the same behaviour as the tabs in Microsoft Office ribbon UI(stay in a fixed position). Is it possible to modify the XAML below to achieve this?
XAML:
<Window x:Class="WpfApplication2.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="350" Width="300" TextOptions.TextFormattingMode="Display" TextOptions.TextRenderingMode="ClearType" UseLayoutRounding="true">
<TabControl TabStripPlacement="Left" BorderThickness="1,0,0,0">
<TabControl.ItemContainerStyle>
<Style TargetType="{x:Type TabItem}">
<Setter Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="270"/>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="#330033" />
<Setter Property="FontSize" Value="9pt"/>
<Setter Property="Height" Value="22" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<Border Background="White" Name="Border" BorderBrush="#A9A9A9" BorderThickness="0" CornerRadius="2,2,0,0">
<Border Padding="2" BorderBrush="Transparent">
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="12,0,12,2"/>
</Border>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Panel.ZIndex" Value="100" />
<Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Panel.ZIndex" Value="100" />
<Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" />
<Setter TargetName="Border" Property="Background" Value="White" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.ItemContainerStyle>
<TabItem Header="Tab item 1" />
<TabItem Header="Tab item 2" />
<TabItem Header="Tab item 3" />
</TabControl>
</Window>

I think it would be better to hide a Border when the mouse is not over a tab by setting the Border's BorderBrush to Transparent rather than setting its BorderThickness to zero.
In other words, change
<Border Background="White" Name="Border" BorderBrush="#A9A9A9" BorderThickness="0" CornerRadius="2,2,0,0">
to
<Border Background="White" Name="Border" BorderBrush="Transparent" BorderThickness="1,1,1,0" CornerRadius="2,2,0,0">
and in the IsMouseOver trigger, use
<Setter TargetName="Border" Property="BorderBrush" Value="#A9A9A9" />
in place of a setter on the BorderThickness.
In your case, the border element itself changes size when you change its BorderThickness because the BorderThickness contributes to the 'size' of the Border, and the control inside it doesn't change size.

If you remove the below line (border) from the IsMouseOver trigger it stops jumping and visually it doesn't really have a huge effect (in my opinion).
<Setter TargetName="Border" Property="BorderThickness" Value="0,0,0,0" />

Related

Hover rounded corner button change its background color using ResourceDictionary

I have created a ResourceDictionary style sheet that have a style named btn_default.
I plan to use it on all the buttons in my program. My problem is that when I hover the button then the background-color doesnt change. The font color changes.
button_default
button_default:hover
I tried in my code to change the "Setter Property="Background" Value="#b5b5b5"", however I guess that doesnt affect the Border-tag, but the Style-tag?
ResourceDictionary
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MSDNSample">
<!-- Btn default -->
<Style x:Key="btn_default" TargetType="{x:Type Button}">
<Setter Property="FontFamily" Value="Calibri"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="Foreground" Value="#d9d9d9" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border CornerRadius="5" BorderThickness="1" Padding="6,4,6,4" Background="#6c6c6c" BorderBrush="#393939">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#b5b5b5"/>
<Setter Property="Foreground" Value="#000000" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- //Btn default -->
</ResourceDictionary>
Main
<Button x:Name="buttonExplorer" Content="Explorer" Style="{StaticResource btn_default}" Margin="0,0,6,0" />
<Button x:Name="buttonProcess" Content="Process" Style="{StaticResource btn_default}" Margin="0,0,6,0" />
You should declare Background property of Border using TemplateBinding extension and set Background value in Style setter, otherwise it'll never be updated
<Style x:Key="btn_default" TargetType="{x:Type Button}">
<Setter Property="FontFamily" Value="Calibri"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="Foreground" Value="#d9d9d9" />
<Setter Property="Background" Value="#6c6c6c"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border CornerRadius="5" BorderThickness="1" Padding="6,4,6,4" BorderBrush="#393939" Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#b5b5b5"/>
<Setter Property="Foreground" Value="#000000" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Customizing ListBoxItem: Getting rid of border + clickable area

I'm customizing a ListBoxItem, and I'm struggling with a couple of issues.
The ItemTemplate is a StackPanel of vertical orientation, whose height is set to 120px. But only clicking the label or the image causes the ListBox to select the item, not the open area below the label. How do I get the open area to also cause a change in selection? I'm considering adding a styled Button as ListBoxItem, but I wonder if it can be done any easier.
There's a 1px line between the ListBox container and the ListBoxItem's that I'm not able to get rid of. How do I get rid of it? Here's a screenshot:
XAML:
<ListBox Grid.Row="1" ItemsSource="{Binding MenuButtonInfoList}"
SelectedIndex="{Binding SelectedMainMenuIndex, Mode=TwoWay}">
<ListBox.Resources>
<Style TargetType="{x:Type ListBox}">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Width" Value="160px" />
<Setter Property="BorderBrush" Value="{StaticResource PrimaryColor}" />
<Setter Property="BorderThickness" Value="0, 1, 0, 0" />
</Style>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border x:Name="MenuButtonBorder" SnapsToDevicePixels="True"
BorderBrush="{StaticResource PrimaryColor}" BorderThickness="0, 0, 0, 1">
<StackPanel Orientation="Vertical" Height="120px">
<Image Source="{Binding ImageFilePath}" Height="30" Width="30" />
<Label x:Name="MenuButtonLabel" Content="{Binding Label}"
FontSize="{StaticResource Title1FontSize}"
Foreground="{StaticResource PrimaryColor}" />
</StackPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter TargetName="MenuButtonBorder" Property="Background" Value="{StaticResource PrimaryColor}" />
<Setter TargetName="MenuButtonLabel" Property="Foreground" Value="{StaticResource HighlightColor}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.Resources>
</ListBox>
How do I get the open area to also cause a change in selection?
Set Background="Transparent" on the StackPanel in your item template. That will make the entire panel hit testable.
There's a 1px line between the ListBox container and the ListBoxItem's that I'm not able to get rid of. How do I get rid of it?
Override the ListBox template to remove the 1px padding:
<ControlTemplate TargetType="{x:Type ListBox}">
<Border Name="Bd"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
SnapsToDevicePixels="true">
<!-- Padding="1" (removed) -->
<ScrollViewer Padding="{TemplateBinding Padding}"
Focusable="false">
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</ScrollViewer>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled"
Value="false">
<Setter TargetName="Bd"
Property="Background"
Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsGrouping" Value="true" />
<Condition Property="VirtualizingPanel.IsVirtualizingWhenGrouping" Value="false" />
</MultiTrigger.Conditions>
<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
Place the above in a Setter for the Template property in your ListBox style.

Bug in WPF user control

I created a user control with a menu in WPF. It was working just fine and now I'm seeing a format issue with the MenuItem.Header. Basically if I add a header where the name has a "_" character it deletes it. For instance, if I add this to the header: "Test_Header_Name," it shows as: "TestHeader_Name." So basically it formats/manipulates the string and deletes the first "_" character. I know things don't just happened out of the blue. I am sure, I must have done something at some point to change the format... but I cannot figure out what it was.
Here is the C# to test the menu:
public partial class MenuControl : UserControl
{
public MenuControl()
{
InitializeComponent();
MenuItem main = new MenuItem();
main.Header = "Sum(Test_Header_Name)";
for (int i = 0; i < 10; i++)
{
main.Items.Add("Test_" + i);
}
main.Items.Add(new Separator());
main.Items.Add("Remove");
this.PrincipalMenu.Items.Add(main);
}
}
And this is the XAML (which is where I think it is happening):
<UserControl x:Class="WindowsFormsApplication1.MenuControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="41" d:DesignWidth="380">
<UserControl.Resources>
<!--**************************
* STYLE: MenuItem
************************** -->
<SolidColorBrush x:Key="HighlightedBackgroundBrush" Color="#FFDEDEDE" />
<SolidColorBrush x:Key="MenuBackgroundBrush" Color="White" />
<SolidColorBrush x:Key="NormalBorderBrush" Color="#FFE5DFDF" />
<SolidColorBrush x:Key="SolidMenuFontBrush" Color="Black" />
<SolidColorBrush x:Key="HighlightedText" Color="White" />
<SolidColorBrush x:Key="menuItemBrush" Color="#FFB7B7B7" />
<SolidColorBrush x:Key="WindowBackgroundBrush" Color="#FFF" />
<SolidColorBrush x:Key="SolidBorderBrush" Color="#888" />
<Style x:Key="{x:Type Menu}" TargetType="{x:Type Menu}">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Height" Value="25"/>
<Setter Property="Foreground" Value="{StaticResource SolidMenuFontBrush}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Menu}">
<Border
Background="{StaticResource MenuBackgroundBrush}"
BorderBrush="{StaticResource MenuBackgroundBrush}"
BorderThickness="1">
<StackPanel ClipToBounds="True" Orientation="Horizontal" IsItemsHost="True"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="{x:Type MenuItem}" TargetType="{x:Type MenuItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type MenuItem}">
<Border x:Name="Border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="Col0" MinWidth="17" Width="Auto" SharedSizeGroup="MenuItemIconColumnGroup"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="MenuTextColumnGroup"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="MenuItemIGTColumnGroup"/>
<ColumnDefinition x:Name="Col3" Width="14"/>
</Grid.ColumnDefinitions>
<!-- ContentPresenter to show an Icon if needed -->
<ContentPresenter Grid.Column="0" Margin="4,0,6,0" x:Name="Icon" VerticalAlignment="Center" ContentSource="Icon"/>
<!-- Glyph is a checkmark if needed for a checkable menu -->
<Grid Grid.Column="0" Visibility="Hidden" Margin="4,0,6,0" x:Name="GlyphPanel" VerticalAlignment="Center">
<Path x:Name="GlyphPanelpath" VerticalAlignment="Center" Fill="{TemplateBinding Foreground}" Data="M0,2 L0,4.8 L2.5,7.4 L7.1,2.8 L7.1,0 L2.5,4.6 z" FlowDirection="LeftToRight"/>
</Grid>
<!-- Content for the menu text etc -->
<ContentPresenter Grid.Column="1" Margin="{TemplateBinding Padding}" x:Name="HeaderHost" RecognizesAccessKey="True" ContentSource="Header"/>
<!-- Content for the menu IGT -->
<ContentPresenter Grid.Column="2" Margin="8,1,8,1" x:Name="IGTHost" ContentSource="InputGestureText" VerticalAlignment="Center"/>
<!-- Arrow drawn path which points to the next level of the menu -->
<Grid Grid.Column="3" Margin="4,0,6,0" x:Name="ArrowPanel" VerticalAlignment="Center">
<Path x:Name="ArrowPanelPath" HorizontalAlignment="Right" VerticalAlignment="Center" Fill="{TemplateBinding Foreground}" Data="M0,0 L0,8 L4,4 z"/>
</Grid>
<!--IsOpen="{Binding Path=IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}"
PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}"
-->
<!-- The Popup is the body of the menu which expands down or across depending on the level of the item -->
<Popup Placement="Right" IsOpen="{TemplateBinding IsSubmenuOpen}" x:Name="SubMenuPopup" Focusable="false" PopupAnimation="Fade">
<Border x:Name="SubMenuBorder" SnapsToDevicePixels="True" Background="{StaticResource WindowBackgroundBrush}" BorderBrush="{StaticResource SolidBorderBrush}" BorderThickness="1" Padding="2,2,2,2">
<Grid x:Name="SubMenu" Grid.IsSharedSizeScope="True">
<!--StackPanel holds children of the menu. This is set by IsItemsHost=True-->
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Cycle"/>
<!--<ScrollViewer CanContentScroll="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Cycle" />
</ScrollViewer>-->
</Grid>
</Border>
</Popup>
</Grid>
</Border>
<!-- These triggers re-configure the four arrangements of MenuItem to show different levels of menu via Role -->
<ControlTemplate.Triggers>
<!-- Role = TopLevelHeader : this is the root menu item in a menu; the Popup expands down
2/6/2013 Luis Garcia
-->
<!--<Trigger Property="Role" Value="TopLevelHeader">
<Setter Property="Padding" Value="6,1,6,1"/>
<Setter Property="Placement" Value="Bottom" TargetName="SubMenuPopup"/>
<Setter Property="MinWidth" Value="0" TargetName="Col0"/>
<Setter Property="Width" Value="Auto" TargetName="Col3"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="Icon"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="GlyphPanel"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="IGTHost"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="ArrowPanel"/>
</Trigger>-->
<!-- Role = TopLevelItem : this is a child menu item from the top level without any child items-->
<Trigger Property="Role" Value="TopLevelItem">
<Setter Property="Padding" Value="6,1,6,1"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="ArrowPanel"/>
</Trigger>
<!-- Role = SubMenuHeader : this is a child menu item which does not have children -->
<Trigger Property="Role" Value="SubmenuHeader">
<Setter Property="DockPanel.Dock" Value="Top"/>
<Setter Property="Padding" Value="0,2,0,2"/>
</Trigger>
<!-- Role = SubMenuItem : this is a child menu item which has children-->
<Trigger Property="Role" Value="SubmenuItem">
<Setter Property="DockPanel.Dock" Value="Top"/>
<Setter Property="Padding" Value="0,2,0,2"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="ArrowPanel"/>
</Trigger>
<Trigger Property="IsSuspendingPopupAnimation" Value="true">
<Setter Property="PopupAnimation" Value="None" TargetName="SubMenuPopup"/>
</Trigger>
<!-- If no Icon is present the we collapse the Icon Content -->
<Trigger Property="Icon" Value="{x:Null}">
<Setter Property="Visibility" Value="Collapsed" TargetName="Icon"/>
</Trigger>
<!-- The GlyphPanel contains the CheckMark -->
<Trigger Property="IsChecked" Value="true">
<Setter Property="Visibility" Value="Visible" TargetName="GlyphPanel"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="Icon"/>
</Trigger>
<!-- Using the system colors for the Menu Highlight and IsEnabled-->
<Trigger Property="IsHighlighted" Value="true">
<Setter Property="Background" Value="{StaticResource HighlightedBackgroundBrush}" TargetName="Border"/>
<Setter Property="Foreground" Value="{StaticResource HighlightedText}"/>
<Setter Property="BorderBrush" Value="{StaticResource NormalBorderBrush}" TargetName="Border"/>
</Trigger>
<Trigger Property="IsHighlighted" Value="false">
<Setter Property="Background" Value="{StaticResource MenuBackgroundBrush}" TargetName="Border"/>
<Setter Property="Foreground" Value="{StaticResource SolidMenuFontBrush}"/>
<Setter Property="BorderBrush" Value="{StaticResource MenuBackgroundBrush}" TargetName="Border"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="LightGray"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<UserControl.Foreground>
<SolidColorBrush />
</UserControl.Foreground>
<Grid Height="24" Width="250" HorizontalAlignment="Left">
<Grid.Background>
<SolidColorBrush />
</Grid.Background>
<Menu Name="PrincipalMenu" Margin="0,0,-100,0">
</Menu>
</Grid>
Any help is greatly appreciated!
Underscores are used in WPF Content controls as accelerator keys.
So adding "E_dit" to a content control causes the "d" to be underlined at runtime.
The user can press ALT-D to move focus to the control.
In your case "Test_Header_Name" it's the "H" is prefixed by the underscore, so it is the accelerator key.
The solution is to use two underscores "__" to stop the accelerator key addition.
My guess is that the first underscore is being turned into an AccessKey for the MenuItem since you are using it in the Header. So in the example above, you probably have an AccessKey of 'h' for your MenuItem. See this answer for more on the subject.
I'm not sure if there's a way to override the behavior, perhaps if you use the ascii code for the underscore or something.

Use a ContentPresenter for personnalize a template

I created a ressourceDictionnary for creating a templateButton.
I would like to be able to change the png image when i use this template, i think i need to use a ContentPresenter, but i don't know why.
Here is my RessourceDictionnary :
<ControlTemplate TargetType="{x:Type Button}" x:Key="BoutonRessources">
<Button Width="32" Margin="0,0,7,0" Name="tbrClear" ToolTip="Clear" VerticalAlignment="Center" BorderThickness="0" HorizontalAlignment="Center" Background="Transparent" HorizontalContentAlignment="Center">
<Border>
<Image Source="xRtDiva_XWPF_TBR_PREMIER.PNG_IMAGES.png" Height="18"/>
<Border.Style>
<Style TargetType="{x:Type Border}">
<Setter Property="Background" Value="Transparent" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="BoutonToolbarSelected.png"/>
</Setter.Value>
</Setter>
<Setter Property="Height" Value="22"/>
<Setter Property="Width" Value="32"/>
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
</Button>
So, when i use this Button template, i would like to be able to pass them an other png image to display. For example i would like to replace xRtDiva_XWPF_TBR_PREMIER.PNG_IMAGES.png by MyPicture.png.
How doing this ? With a contentPresenter ?
Thanks :)

Rounded Corner TextBox in WPF

i search the web for TextBox with rounded corners and find a xaml code like below:
<Style TargetType="{x:Type my1:CustomTextBox}">
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate >
<Border Background="{TemplateBinding Background}" x:Name="Bd"
BorderThickness="2" CornerRadius="5" BorderBrush="#FFF9EAB6">
***<ScrollViewer x:Name="PART_ContentHost" />***
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Bd" Property="BorderBrush" Value="#FFC7B0B0"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="True">
<Setter TargetName="Bd" Property="BorderBrush" Value="#FFC7B0B0"/>
<Setter Property="Foreground" Value="Black"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="False">
<Setter Property="Foreground" Value="#FFC7B0B0"/>
</Trigger>
<Trigger Property="Width" Value="Auto">
<Setter Property="MinWidth" Value="120"/>
</Trigger>
<Trigger Property="Height" Value="Auto">
<Setter Property="MinHeight" Value="27"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
i want to find out what is
<ScrollViewer x:Name="PART_ContentHost" />
in detail and why not properly work my template if delete this line from it,
please tell me completely in detail.
thanks alot.
The part named "PART_ContentHost" contains the control core, this is the textbox itself, besides the adornments. The textbox's code behind will look for it, so if you rename of delete, the control wont work.
In this case, the content is scrollable (as a textbox can scroll text horizontally and vertically).
use this part of xaml deign :
<TextBox x:Name="usernameText" Height="30" Width="300" TextWrapping="Wrap" Text="" FontSize="20" HorizontalContentAlignment="Center" LostFocus="usernameText_LostFocus">
<TextBox.Resources>
<Style TargetType="{x:Type Border}">
<Setter Property="CornerRadius" Value="10"/>
</Style>
</TextBox.Resources>
</TextBox>
If you need a simple textbox with rounded corners, you can do it like that:
<Border Padding="5" CornerRadius="5" BorderThickness="1" BorderBrush="LightGray" SnapsToDevicePixels="True" Background="White">
<TextBox Background="Transparent" BorderThickness="0">This is beautifull ;)</TextBox>
</Border>
The ScrollViewer contains the actual content of the control. Your control isn't a real textbox, but actually a border (with rounded corners) surrounding a ScrollViewer, into which you would then need to place your text. If you don't need scrolling, you can replace the ScrollViewer with a text box, i.e.:
change
<ScrollViewer x:Name="PART_ContentHost" />
to
<TextBox x:Name="PART_ContentHost" />

Categories

Resources