I'm currently making a "base style" for our application. I started by making a "base style" for our buttons, which will be a nice double-gradient (I created a template with 2 rows, and both rows have a two-point gradient).
So, the base button works fine, now I want to create other buttons based on that style.
This is the code for the base button:
<Style x:Key="BaseButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Height" Value="24"/>
<Setter Property="Width" Value="150" />
<Setter Property="Foreground" Value="{DynamicResource OffWhiteBrush}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="OuterBorder" BorderBrush="{DynamicResource GrayBorderBrush}" BorderThickness="2" CornerRadius="5">
<Grid x:Name="LayoutGrid">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border x:Name="TopBorder" BorderBrush="{x:Null}" BorderThickness="0" CornerRadius="4,4,0,0" Background="{DynamicResource TopGrayGradientBrush}"/>
<Border x:Name="BottomBorder" BorderBrush="{x:Null}" BorderThickness="0" Grid.Row="1" CornerRadius="0,0,4,4" Background="{DynamicResource BottomGrayGradientBrush}"/>
<ContentPresenter x:Name="contentPresenter" Grid.RowSpan="2" HorizontalAlignment="Center" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Control.Foreground" TargetName="contentPresenter" Value="{DynamicResource DisabledBrush}"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Margin" TargetName="OuterBorder" Value="1"/>
<Setter Property="Background" TargetName="TopBorder" Value="{DynamicResource TopGrayGradientBrush}"/>
<Setter Property="Background" TargetName="BottomBorder" Value="{DynamicResource BottomGrayGradientBrush}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="TopBorder" Value="{DynamicResource TopBlueGradientBrush}"/>
<Setter Property="Background" TargetName="BottomBorder" Value="{DynamicResource BottomBlueGradientBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
When I create a second button I can do it "BasedOn" the other style:
<Style x:Key="RedButtonStyle" TargetType="{x:Type Button}" BasedOn="{StaticResource BaseButtonStyle}">
...
Inside the grid I've named my gradients: topborder and bottomborder. The problem is that I need to duplicate the code in order to be able to set any code, because the redbuttonStyle doesn't "know" topborder or bottomborder:
<Style x:Key="RedButtonStyle" TargetType="{x:Type Button}" BasedOn="{StaticResource BaseButtonStyle}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="OuterBorder" BorderBrush="{DynamicResource GrayBorderBrush}" BorderThickness="2" CornerRadius="5">
<Grid x:Name="LayoutGrid">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border x:Name="TopBorder" BorderBrush="{x:Null}" BorderThickness="0" CornerRadius="4,4,0,0" Background="{DynamicResource TopGrayGradientBrush}"/>
<Border x:Name="BottomBorder" BorderBrush="{x:Null}" BorderThickness="0" Grid.Row="1" CornerRadius="0,0,4,4" Background="{DynamicResource BottomGrayGradientBrush}"/>
<ContentPresenter x:Name="contentPresenter" Grid.RowSpan="2" HorizontalAlignment="Center" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Control.Foreground" TargetName="contentPresenter" Value="{DynamicResource DisabledBrush}"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Margin" TargetName="OuterBorder" Value="1"/>
<Setter Property="Background" TargetName="TopBorder" Value="{DynamicResource TopGrayGradientBrush}"/>
<Setter Property="Background" TargetName="BottomBorder" Value="{DynamicResource BottomGrayGradientBrush}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="TopBorder" Value="{DynamicResource TopRedGradientBrush}"/>
<Setter Property="Background" TargetName="BottomBorder" Value="{DynamicResource BottomRedGradientBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The problem here is that I've pretty much repeated the entire style, whilst I only want to change the two gradients on the IsMouseOver event
How should I handle this?
PS. I've looked at this WPF -- override style colors, best practice, but I can't figure out the TemplateBinding :/
You can use a technique where you define properties specific to your theme in a separate class and then bind to those properties from your templates. Please see my answer to this question.
Related
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>
I'm trying to center a content a Content Presenter in a button, It centers perfectly in the designer But when ran it will either go off center by a bit or will get cut off. What's confusing me is that I have another style that does relatively the same thing but works perfectly.
Here's the style;
<Style x:Key="MainButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="0,1"/>
<Setter Property="RenderOptions.BitmapScalingMode" Value="NearestNeighbor"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid x:Name="Chrome" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
<Grid.BindingGroup>
<BindingGroup/>
</Grid.BindingGroup>
<Border x:Name="border" CornerRadius="3,3,3,3" BorderBrush="LightGray" BorderThickness="1" Background="#FFF3F3F3" Padding="0">
<ContentPresenter
HorizontalAlignment="Center"
VerticalAlignment="Stretch"
TextElement.FontWeight="Light" Height="Auto" Margin="153.636,0.52,156,1.52" Width="Auto" UseLayoutRounding="False" SnapsToDevicePixels="False" >
</ContentPresenter>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" TargetName="border" Value="#330CB3EE"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" TargetName="border" Value="#FF0CB3EE"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" TargetName="Chrome" Value="0.25"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Remove the Margin from the Content Presenter:
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Stretch"
TextElement.FontWeight="Light"
Height="Auto"
Width="Auto"
UseLayoutRounding="False"
SnapsToDevicePixels="False" >
This Margin was probably added by the designer, matching the layout of the control in the designer.
I want to display my data in DataGrid.
I wrote my style for it and here it is
<Style TargetType="DataGridColumnHeader">
<Setter Property="FontSize" Value="20"/>
<Setter Property="Background" Value="DarkGreen" />
<Setter Property="Foreground" Value="White"/>
<Setter Property="BorderThickness" Value="0,0,0,1"/>
<Setter Property="BorderBrush" Value="ForestGreen"/>
<Setter Property="Height" Value="80"/>
<Setter Property="Padding" Value="5,0,0,0"/>
</Style>
<Style TargetType="DataGridRow">
<Setter Property="FontSize" Value="18"/>
<Setter Property="Background" Value="White"/>
<Setter Property="Margin" Value="0,6,0,0"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="LightGreen"/>
<Setter Property="Foreground" Value="DarkGreen"/>
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="LightGreen"/>
<Setter Property="Foreground" Value="DarkGreen"/>
<Setter Property="BorderBrush" Value="ForestGreen"/>
<Setter Property="BorderThickness" Value="1"/>
</Trigger>
</Style.Triggers>
</Style>
<Style TargetType="DataGridCell">
<Setter Property="Height" Value="80"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Focusable" Value="False"/>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="LightGreen"/>
<Setter Property="Foreground" Value="DarkGreen"/>
<Setter Property="BorderThickness" Value="0"/>
</Trigger>
</Style.Triggers>
</Style>
When i select the row the border show's up but the width of the row becomes larger than the width of the DataGrid -> I don't see right part of the border and horizontal scrollbar show's up.
So here is the question: how can i increase border thickness of the row, but do not increase row's width and height?
UPD
Before selection:
After selection:
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="5*"/>
1st Column is Fixed Width 50 while the other 2 are of same width. This makes your window have narrow left margin but Grid Sized margin on the right. Change Column 3 Width = 50. If that is not how you want it, make both col 2 *& 3 width = * as that is same as being 5*.
Next, Your Grid Columns each have been assigned a Width as a proportion. When you resize the window then only you last column text gets chopped. Otherwise it appears nice & fine.
Change DataGridRow style to following:
<DataGrid.RowStyle>
<Style TargetType="{x:Type DataGridRow}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridRow}">
<Border x:Name="DGR_Border"
Background="{TemplateBinding Background}"
SnapsToDevicePixels="True">
<SelectiveScrollingGrid>
<SelectiveScrollingGrid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</SelectiveScrollingGrid.ColumnDefinitions>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<DataGridCellsPresenter ItemsPanel="{TemplateBinding ItemsPanel}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
<DataGridDetailsPresenter Margin="4"
Grid.Row="1"
SelectiveScrollingGrid.SelectiveScrollingOrientation="{Binding AreRowDetailsFrozen, ConverterParameter={x:Static SelectiveScrollingOrientation.Vertical}, Converter={x:Static DataGrid.RowDetailsScrollingConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"
Visibility="{TemplateBinding DetailsVisibility}"/>
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Grid.RowSpan="2"/>
</Grid>
<DataGridRowHeader SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"
Visibility="{Binding HeadersVisibility, ConverterParameter={x:Static DataGridHeadersVisibility.Row}, Converter={x:Static DataGrid.HeadersVisibilityConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"/>
</SelectiveScrollingGrid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="DetailsVisibility" Value="Visible">
<Setter Property="BorderThickness" Value="4,1,4,4"/>
<Setter Property="BorderBrush" Value="#FF3886B9"/>
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="LightGreen"/>
<Setter Property="Foreground" Value="DarkGreen"/>
<Setter Property="BorderBrush" Value="ForestGreen"/>
<Setter Property="BorderThickness" Value="1"/>
</Trigger>
</Style.Triggers>
</Style>
</DataGrid.RowStyle>
Hope this will resolve your problem...
I am making an application in WPF in which i have several buttons and inside each button there is a grid and inside that grid there is rectangle and a text box. Now the problem i am facing is that when i resize the button the grid inside the button is not resized and stays the same i.e. the rectangle also stays the same.
I have tried putting the rectangle directly into the button(without any grid) but same results.
How do i resize the content inside the button?
Help Please!!
The content of a button is centered by default. To make it stretch, use this:
<Button VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch"
...
This setup works fine for resizing the rectangle:
<Button DockPanel.Dock="Bottom" Width="200" Height="200"
VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Rectangle Margin="5" Stroke="Black"></Rectangle>
<TextBlock Grid.Column="1" Margin="5">Button text</TextBlock>
</Grid>
</Button>
If you need to change the font size of the text box, then it would probably be easiest to wrap the grid in a ViewBox.
Do not set Button's content like this:
<Button HorizontalAlignment="Left" Margin="123,200,0,0" VerticalAlignment="Top" Width="75" Style="{DynamicResource ButtonStyle2}">
<Rectangle Fill="#FFBF8127" Stroke="Black" Height="100" Width="100"/>
</Button>
Set it's ControlTemplate instead:
<Window x:Class="WpfApplication67.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style x:Key="FocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD"/>
<SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/>
<SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/>
<SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/>
<SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/>
<SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/>
<SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
<SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/>
<SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
<Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
<Setter Property="Background" Value="{StaticResource Button.Static.Background}"/>
<Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
<Grid>
<Rectangle Fill="#FFBF8127" Stroke="Black" Margin="0"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsDefaulted" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ButtonStyle2" TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
<Setter Property="Background" Value="{StaticResource Button.Static.Background}"/>
<Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
<ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsDefaulted" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
<Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Button Content="Button" HorizontalAlignment="Left" Margin="207,46,0,0" VerticalAlignment="Top" Width="221" Style="{DynamicResource ButtonStyle1}" Height="127"/>
</Grid>
You can see the different of button's template.(sorry i can't upload pic, u can see the template in Blend)
Default: Template-border-contentPresent
Edit:Template-border-grid-rectangle
I can't seem to find the answer online when I search around, I don't know if this is because there is an easier way that I don't know about.
I want my text box text to begin after the line on the picture below:
Is there something that I can set in the XAML or in he C# code.
Also, if there is a solution, the data that the user enters it getting stored in a database so I don't want there to be space before there data if you get me.
Any idea's please let me know, Thanks.
<Label Content="Firstname:" HorizontalAlignment="Left" Margin="84,177,0,0" VerticalAlignment="Top" Foreground="#FFACACAC" FontSize="13"/>
<TextBox x:Name="txtFirstname" HorizontalAlignment="Left" Height="43" Margin="59,166,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="433" PreviewTextInput="TextOnlyValidation" VerticalContentAlignment="Center" FontSize="16" />
<GridSplitter HorizontalAlignment="Left" Height="34" Margin="190,171,0,0" VerticalAlignment="Top" Width="1" Background="#FFACACAC"/>
You need to create a new style for your TextBox, and change the layout inside it :
<Window.Resources>
<Style x:Key="FocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD"/>
<SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/>
<SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/>
<SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/>
<SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/>
<SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/>
<SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
<SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/>
<SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
<Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
<Setter Property="Background" Value="{StaticResource Button.Static.Background}"/>
<Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
<ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsDefaulted" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
<Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<SolidColorBrush x:Key="TextBox.Static.Border" Color="#FFABAdB3"/>
<SolidColorBrush x:Key="TextBox.MouseOver.Border" Color="#FF7EB4EA"/>
<SolidColorBrush x:Key="TextBox.Focus.Border" Color="#FF569DE5"/>
<Style x:Key="TextBoxStyle1" TargetType="{x:Type TextBox}">
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
<Setter Property="BorderBrush" Value="{StaticResource TextBox.Static.Border}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="AllowDrop" Value="true"/>
<Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" Margin="0" Grid.Column="2" VerticalContentAlignment="Center" VerticalAlignment="Center" Padding="-2,0,0,0"/>
<GridSplitter HorizontalAlignment="Center" Height="21" VerticalAlignment="Center" Width="2" Grid.Column="1"/>
<Label Content="Firstname :" VerticalAlignment="Center" FontSize="9.333"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Opacity" TargetName="border" Value="0.56"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.MouseOver.Border}"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.Focus.Border}"/>
</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>
<Grid>
<TextBox HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" Text="Your text here" VerticalAlignment="Top" Width="158.333" Margin="124.594,107.556,0,0" Style="{DynamicResource TextBoxStyle1}"/>
</Grid>
Hope this helps.
You mentioned a couple of problems.
(1) Want text to appear after that line
Solution is to set padding, so that there is a large dead-space on the left of the textbox. How much? However wide your label is, or whatever it takes to get to the line.
Use something like Padding="15,0,0,0" to just set the left padding.
(2) Adding padding won't let you click in TextBox
Click where? Over the label, or to the right of the line? You can set IsHitTestVisible="False" on the label to ensure it doesn't get in the way of your clicking.
But finally, this is not a great design. You've got absolute positions for Margin whereas you want to try and create a layout that flows and adapts to the space given. A Grid will help with this. You're also trying to overlay two UI elements, and then work around problems introduced by doing this. This is a clear sign you're doing things wrong! The best solution, if a control doesn't do what you want, is to create your own control derived from those that are closest to what you want. You would be better off creating your own TextBox-with-inbuilt-label component and using that.
You could make a grid with 2 columns around the label and textbox.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Content="Firstname:" HorizontalAlignment="Left" Margin="84,177,0,0" VerticalAlignment="Top" Foreground="#FFACACAC" FontSize="13"/>
<TextBox Grid.Column="1" x:Name="txtFirstname" HorizontalAlignment="Left" Height="43" Margin="59,166,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="433" PreviewTextInput="TextOnlyValidation" VerticalContentAlignment="Center" FontSize="16" />
</Grid>
Just set the correct amount of padding:
<Grid VerticalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="Firstname" VerticalAlignment="Center" Margin="5" />
<TextBox Grid.Column="1" Padding="10,0,0,0" BorderThickness="0" VerticalAlignment="Center" />
</Grid>
To avoid spaces in your value you can use :
string firstname = txtFirstname.text.Trim()
Info : Trim