I am trying do create a Textbox in Wpf that has a Label in its top left corner and addiotionally this label shall have a border with a slope on one side.
http://imgur.com/Nupbf
Now for one or two specific cases that was doable with a workaround where i just used lines for the border. Now that i want to use it a bit more I need to do it the right way, especially in a way where it is scalable.
I would be really happy if someone could point me in the right direction.
Edit:
So the code I am using after taking into account the responses so far, which i created as a user control:
<Grid Height="93" Width="335">
<TextBox TextWrapping="Wrap" Text="{Binding TextboxText}" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" BorderBrush="{x:Null}" Background="{x:Null}"/>
<Path Data="M384,242 L442.5,242" HorizontalAlignment="Left" Height="1" Margin="0,28.667,0,0" Stretch="Fill" VerticalAlignment="Top" Width="59.5">
<Path.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#8EFFFFFF"/>
<GradientStop Color="White" Offset="0.991"/>
</LinearGradientBrush>
</Path.Fill>
<Path.Stroke>
<LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
<LinearGradientBrush.RelativeTransform>
<TransformGroup> <ScaleTransform CenterY="0.5" CenterX="0.5"/> <SkewTransform CenterY="0.5" CenterX="0.5"/> <RotateTransform Angle="90" CenterY="0.5" CenterX="0.5"/> <TranslateTransform/>
</TransformGroup>
</LinearGradientBrush.RelativeTransform>
<GradientStop Color="White" Offset="0.009"/>
<GradientStop Color="#5FFFFFFF" Offset="1"/>
</LinearGradientBrush>
</Path.Stroke>
</Path>
<Label Content="{Binding LabelText}" HorizontalAlignment="Left" Width="113" FontSize="16" Height="40" VerticalAlignment="Top" BorderBrush="White" Margin="0,0.167,0,0"/>
<Path Data="M125.12574,28.672087 L145.37561,-1.1668457" HorizontalAlignment="Left" Height="30.839" Margin="58.125,-1,0,0" Stretch="Fill" VerticalAlignment="Top" Width="21.25">
<Path.Stroke>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#51FFFFFF" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Path.Stroke>
<Path.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#49FFFFFF" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Path.Fill>
</Path>
<Path Data="M0,83 L181.35815,83" Fill="#FFF4F4F5" Height="1" Stretch="Fill" VerticalAlignment="Bottom" Width="327" StrokeThickness="2" Margin="0,0,10,10">
<Path.Stroke>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Path.Stroke>
</Path>
</Grid>
It works and the only thing that is still bothering me is the resizability of the label border, which is quite annoying to do but luckily not necessary in my case.
This is another solution which uses a Style instead of a UserControl.
I assume the Label is the description of the TextBox, inside the style, I created a TextBlock (replacing the Label as it would be an overkill in this case) of which Text is bound to the Tag of parent TextBox. Then it will display whatever you put in your Tag.
Also I have grouped TextBlock and two Paths into a Grid, set its columns to be auto-sized so you won't have the resizability issue anymore.
The screenshot below is two TextBoxes with different labels.
The TextBox Style
<Style x:Key="MyTextBoxStyle" TargetType="{x:Type TextBox}">
<Setter Property="Background" Value="Black" />
<Setter Property="Foreground" Value="#FFB8B8B8" />
<Setter Property="BorderBrush" Value="#FF484848" />
<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" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border x:Name="BottomLine" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,0,0,1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid x:Name="TopPanel" HorizontalAlignment="Left">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock d:LayoutOverrides="Width, Height" x:Name="Caption" TextWrapping="Wrap" Text="{TemplateBinding Tag}" FontSize="14.667" VerticalAlignment="Center" Margin="4,0,24,0" />
<Path x:Name="BottomPath" Data="M384,242 L442.5,242" Stretch="Fill" VerticalAlignment="Bottom" Margin="0,0,-1.3,0">
<Path.Stroke>
<LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
<LinearGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterY="0.5" CenterX="0.5" />
<SkewTransform CenterY="0.5" CenterX="0.5" />
<RotateTransform Angle="90" CenterY="0.5" CenterX="0.5" />
<TranslateTransform />
</TransformGroup>
</LinearGradientBrush.RelativeTransform>
<GradientStop Color="White" Offset="0.009" />
<GradientStop Color="#5FFFFFFF" Offset="1" />
</LinearGradientBrush>
</Path.Stroke>
</Path>
<Path x:Name="RightPath" Data="M125.12574,28.672087 L145.37561,-1.1668457" Stretch="Fill" Grid.Column="1">
<Path.Stroke>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#51FFFFFF" Offset="0" />
<GradientStop Color="White" Offset="1" />
</LinearGradientBrush>
</Path.Stroke>
</Path>
</Grid>
<Microsoft_Windows_Themes:ListBoxChrome x:Name="Bd" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderFocused="{TemplateBinding IsKeyboardFocusWithin}" SnapsToDevicePixels="true" Margin="0,0,0,-0.001" d:LayoutOverrides="Width, Height" Grid.Row="1">
<ScrollViewer x:Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Microsoft_Windows_Themes:ListBoxChrome>
</Grid>
</Border>
<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>
The TextBoxes
<TextBox Tag="Label" Text="This is a textbox" HorizontalAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Center" FontSize="24" Style="{DynamicResource MyTextBoxStyle}"/>
<TextBox Tag="Long Label" Text="This is a textbox" HorizontalAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Bottom" FontSize="24" Style="{DynamicResource MyTextBoxStyle}"/>
Hope this helps. :)
You can create a Path and use it as the border, and place a border less textbox relative to it.
Please see my answer in a similar question.
In that case I'd construct a UserControl which contains your desired controls (the two labels and the slope).
Here's an article on how to create UserControls and reference them in your application:
http://www.codeproject.com/KB/WPF/UserControl.aspx
If you have Expression Blend you can draw a Slope quite easily, otherwise you have to manually code with WPF's Geometry syntax:
http://msdn.microsoft.com/en-us/library/ms752293.aspx
Here's an example for a slope path which should give a start:
<Path Data="M0.5,40 L176,40 M177,40 L217,0.5" Fill="#FFF4F4F5" />
Related
I have below style declared for ProgressBar in App.xaml
<Application.Resources>
<LinearGradientBrush x:Key="ProgressBarBorderBrush"
EndPoint="0,1"
StartPoint="0,0">
<LinearGradientBrush.GradientStops>
<GradientStop Color="#B2B2B2"
Offset="0"/>
<GradientStop Color="#8C8C8C"
Offset="1"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ProgressBarBackground"
EndPoint="1,0"
StartPoint="0,0">
<LinearGradientBrush.GradientStops>
<GradientStop Color="#BABABA"
Offset="0"/>
<GradientStop Color="#C7C7C7"
Offset="0.5"/>
<GradientStop Color="#BABABA"
Offset="1"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ProgressBarTopHighlight"
StartPoint="0,0"
EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStop Color="#80FFFFFF"
Offset="0.05"/>
<GradientStop Color="#00FFFFFF"
Offset="0.25"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ProgressBarGlassyHighlight"
StartPoint="0,0"
EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStop Color="#50FFFFFF"
Offset="0.5385"/>
<GradientStop Color="#00FFFFFF"
Offset="0.5385"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ProgressBarIndicatorGlassyHighlight"
StartPoint="0,0"
EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStop Color="#90FFFFFF"
Offset="0.5385"/>
<GradientStop Color="#00FFFFFF"
Offset="0.5385"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<RadialGradientBrush x:Key="ProgressBarIndicatorLightingEffectLeft"
RadiusX="1"
RadiusY="1"
RelativeTransform="1,0,0,1,0.5,0.5">
<RadialGradientBrush.GradientStops>
<GradientStop Color="#60FFFFC4"
Offset="0"/>
<GradientStop Color="#00FFFFC4"
Offset="1"/>
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
<LinearGradientBrush x:Key="ProgressBarIndicatorLightingEffect"
StartPoint="0,1"
EndPoint="0,0">
<LinearGradientBrush.GradientStops>
<GradientStop Color="#60FFFFC4"
Offset="0"/>
<GradientStop Color="#00FFFFC4"
Offset="1"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<RadialGradientBrush x:Key="ProgressBarIndicatorLightingEffectRight"
RadiusX="1"
RadiusY="1"
RelativeTransform="1,0,0,1,-0.5,0.5">
<RadialGradientBrush.GradientStops>
<GradientStop Color="#60FFFFC4"
Offset="0"/>
<GradientStop Color="#00FFFFC4"
Offset="1"/>
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
<LinearGradientBrush x:Key="ProgressBarIndicatorDarkEdgeLeft"
StartPoint="0,0"
EndPoint="1,0">
<LinearGradientBrush.GradientStops>
<GradientStop Color="#0C000000"
Offset="0"/>
<GradientStop Color="#20000000"
Offset="0.3"/>
<GradientStop Color="#00000000"
Offset="1"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ProgressBarIndicatorDarkEdgeRight"
StartPoint="0,0"
EndPoint="1,0">
<LinearGradientBrush.GradientStops>
<GradientStop Color="#00000000"
Offset="0"/>
<GradientStop Color="#20000000"
Offset="0.7"/>
<GradientStop Color="#0C000000"
Offset="1"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ProgressBarIndicatorAnimatedFill"
StartPoint="0,0"
EndPoint="1,0">
<LinearGradientBrush.GradientStops>
<GradientStop Color="#00FFFFFF"
Offset="0"/>
<GradientStop Color="#60FFFFFF"
Offset="0.4"/>
<GradientStop Color="#60FFFFFF"
Offset="0.6"/>
<GradientStop Color="#00FFFFFF"
Offset="1"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<Style x:Key="{x:Type ProgressBar}"
TargetType="{x:Type ProgressBar}">
<Setter Property="Foreground"
Value="#01D328"/>
<Setter Property="Background"
Value="{StaticResource ProgressBarBackground}"/>
<Setter Property="BorderBrush"
Value="{StaticResource ProgressBarBorderBrush}"/>
<Setter Property="BorderThickness"
Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid Name="TemplateRoot"
SnapsToDevicePixels="true">
<Rectangle Fill="{TemplateBinding Background}"
RadiusX="2"
RadiusY="2"/>
<Border Background="{StaticResource ProgressBarGlassyHighlight}"
Margin="1"
CornerRadius="2"/>
<Border BorderBrush="#80FFFFFF"
Background="{StaticResource ProgressBarTopHighlight}"
BorderThickness="1,0,1,1"
Margin="1"/>
<Rectangle Name="PART_Track"
Margin="1"/>
<Decorator x:Name="PART_Indicator"
HorizontalAlignment="Left"
Margin="1">
<Grid Name="Foreground">
<Rectangle x:Name="Indicator"
Fill="{TemplateBinding Foreground}"/>
<Grid x:Name="Animation" ClipToBounds="true">
<Rectangle x:Name="PART_GlowRect" Width="100"
Fill="{StaticResource ProgressBarIndicatorAnimatedFill}"
Margin="-100,0,0,0"
HorizontalAlignment="Left">
</Rectangle>
</Grid>
<Grid x:Name="Overlay">
<Grid.ColumnDefinitions>
<ColumnDefinition MaxWidth="15"/>
<ColumnDefinition Width="0.1*"/>
<ColumnDefinition MaxWidth="15"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Rectangle x:Name="LeftDark"
Grid.RowSpan="2"
Fill="{StaticResource ProgressBarIndicatorDarkEdgeLeft}"
RadiusX="1"
RadiusY="1"
Margin="1,1,0,1"/>
<Rectangle x:Name="RightDark"
Grid.RowSpan="2"
Grid.Column="2"
RadiusX="1"
RadiusY="1"
Fill="{StaticResource ProgressBarIndicatorDarkEdgeRight}"
Margin="0,1,1,1"/>
<Rectangle x:Name="LeftLight"
Grid.Column="0"
Grid.Row="2"
Fill="{StaticResource ProgressBarIndicatorLightingEffectLeft}"/>
<Rectangle x:Name="CenterLight"
Grid.Column="1"
Grid.Row="2"
Fill="{StaticResource ProgressBarIndicatorLightingEffect}"/>
<Rectangle x:Name="RightLight"
Grid.Column="2"
Grid.Row="2"
Fill="{StaticResource ProgressBarIndicatorLightingEffectRight}"/>
<Border x:Name="Highlight1"
Grid.RowSpan="2"
Grid.ColumnSpan="3"
Background="{StaticResource ProgressBarIndicatorGlassyHighlight}"/>
<Border x:Name="Highlight2"
Grid.RowSpan="2"
Grid.ColumnSpan="3"
Background="{StaticResource ProgressBarTopHighlight}"/>
</Grid>
</Grid>
</Decorator>
<Border BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
CornerRadius="2"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Orientation"
Value="Vertical">
<Setter TargetName="TemplateRoot"
Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="-90"/>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsIndeterminate"
Value="true">
<Setter TargetName="LeftDark"
Property="Visibility"
Value="Collapsed"/>
<Setter TargetName="RightDark"
Property="Visibility"
Value="Collapsed"/>
<Setter TargetName="LeftLight"
Property="Visibility"
Value="Collapsed"/>
<Setter TargetName="CenterLight"
Property="Visibility"
Value="Collapsed"/>
<Setter TargetName="RightLight"
Property="Visibility"
Value="Collapsed"/>
<Setter TargetName="Indicator"
Property="Visibility"
Value="Collapsed"/>
</Trigger>
<Trigger Property="IsIndeterminate"
Value="false">
<Setter TargetName="Animation"
Property="Background"
Value="#80B5FFA9"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
As you can see <Style x:Key="{x:Type ProgressBar}" TargetType="{x:Type ProgressBar}"> has been mentioned and as per my knowledge, this should be applied to all ProgressBar in the application.
I have below ProgressBar in Login.xaml page and this is kept under View folder.
<ProgressBar Name="LoginProgress" Minimum="0" Maximum="100" HorizontalAlignment="Left"
Height="24" Margin="99,124,0,0" VerticalAlignment="Top" Width="109"
Style="{DynamicResource {x:Type ProgressBar}}">
</ProgressBar>
And I have also implicitly mentioned Style property for ProgressBar. After all of this, the style is not getting applied. Searched through all the pages in google but couldn't quite get proper resource to understand and hence am here. Could anyone let me know or provide more insights on how this has to be done?
Please refer below stack overflow link. This issue sis discussed in depth here.
I guess answer given by Dylan should help you out.
what does x:Key="{x:Type TextBox}" do?
I am new in WPF and trying to create some simple project.
I have created a window with a button. Then I need to create the same buttons but I cant understand how to create a template from exist button?
Here is the code:
<Grid Background="Black">
<ToggleButton x:Name="btn" Content="1" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Height="74.96" FontFamily="Digital" Width="73.8" FontSize="34.667" Foreground="White">
<ToggleButton.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="1"/>
<GradientStop Color="#FF5D5D5D"/>
</LinearGradientBrush>
</ToggleButton.BorderBrush>
<ToggleButton.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFE43DFF" Offset="0"/>
<GradientStop Color="Black" Offset="0.997"/>
</LinearGradientBrush>
</ToggleButton.Background>
</ToggleButton>
</Grid>
As we see there is single button on grid. I need to create a lot of same buttons and need a template. How to make a template? Internal question can BorderBrush be a template? I ask because in future I need to make a different buttons (like red, green, magenta etc) with the same border you can see in my code. Thanks!
You don't need a Template, you can do this with a Style:
<Window.Resources>
<Style x:Key="PurpleButton" TargetType="{x:Type ToggleButton}">
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="1"/>
<GradientStop Color="#FF5D5D5D"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFE43DFF" Offset="0"/>
<GradientStop Color="Black" Offset="0.997"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid Background="Black">
<ToggleButton x:Name="btn" Style="{StaticResource PurpleButton}" Content="1" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Height="74.96" FontFamily="Digital" Width="73.8" FontSize="34.667" Foreground="White" />
<ToggleButton Style="{StaticResource PurpleButton} Content="2" Height="74.96" FontFamily="Digital" Width="73.8" FontSize="34.667" Foreground="White"" />
</Grid>
Here is an example of a style which has triggers implemented aswell. Doing it this way using a control template you are able to create and design your own type of button.
<Style x:Key="ButtonNormal" TargetType="Button">
<Setter Property="Height" Value="40" />
<Setter Property="FontSize" Value="18" />
<Setter Property="Foreground" Value="#18272d" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="ButtonBorder"
CornerRadius="4"
BorderThickness="1"
BorderBrush="#adcae6"
>
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1.5" StartPoint="0.5,0.0">
<GradientStop Color="#ffffff" Offset="0"/>
<GradientStop Color="#e2eaf6" Offset="0.4"/>
</LinearGradientBrush>
</Border.Background>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="1.7*"/>
</Grid.RowDefinitions>
<ContentPresenter x:Name="ButtonContentPresenter"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Grid.RowSpan="2" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="ButtonBorder" Property="Background" >
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1.5" StartPoint="0.5,0.0">
<GradientStop Color="#d6e2f3" Offset="0"/>
<GradientStop Color="#fff" Offset="0.9"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="ButtonBorder" Property="Background" >
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1.5" StartPoint="0.5,0.0">
<GradientStop Color="#bed0ed" Offset="0"/>
<GradientStop Color="#fff" Offset="0.9"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" Value="#7ba7d1" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="ButtonBorder" Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1.5" StartPoint="0.5,0.0">
<GradientStop Color="#f6f6f6" Offset="0"/>
<GradientStop Color="#eaeaea" Offset="0.9"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="DarkGray"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
Hope this helps and gives a better overview of how Styling/Templating works.
Does anybody know how to change the foreground color of a WPF-Progressbar. It always seems to be merged with green.
just try with this
<ProgressBar Height="25" IsIndeterminate="True" Width="150" Foreground="Red" ></ProgressBar>
If it is not working as you required you have to modify the Style or ControlTemplate of Progressbar.
To do that you can use Expression Blend from Microsoft or you can get a copy the existing template and modify it.
Unfortunately, it is hard coded in default style:
<Trigger Property="IsIndeterminate"
Value="false">
<Setter TargetName="Animation"
Property="Background"
Value="#80B5FFA9"/>
You can create your own style from original XAML or try to override background in the Loaded event for example:
private void ProgressBar_Loaded(object sender, RoutedEventArgs e)
{
var p = (ProgressBar)sender;
p.ApplyTemplate();
((Panel)p.Template.FindName("Animation", p)).Background = Brushes.Red;
}
but it's unreliable
Why not take a path of low resistance and use the popular MahApps library?
Get the MahApps library: https://www.nuget.org/packages/MahApps.Metro
Setup the namespace: xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls"
Add the 'MetroProgressBar'
<controls:MetroProgressBar Height="40"
Background="{StaticResource GrayBrush2}"
BorderBrush="{StaticResource GrayBrush8}"
BorderThickness="3"
Foreground="{StaticResource GrayBrush8}"
IsIndeterminate="False"
Value="{Binding CurrentProgressInfo.ProgressPercent}" />
Set the 'Foreground' to your favorite color
Marat Khasanov pointed out that the unwanted green tint comes from the object named "Animation" within the control template. So another easy approach is to hide that object. This will also disable the animated "glow" effect, which I considered to be an asset but you might see as a deal-killer. I implemented this through a handler for the Loaded event as shown below.
This was inspired by an answer to another question. The same caveat applies: if they change the control template then this might no longer work.
public void ProgressBar_Loaded(object sender, RoutedEventArgs e)
{
var progressBar = sender as ProgressBar;
if (progressBar == null) return;
var animation = progressBar.Template.FindName("Animation", progressBar) as FrameworkElement;
if (animation != null)
animation.Visibility = Visibility.Collapsed;
}
I came across a similar issue when the Windows visual settings were optimised for best performance (Control Panel -> System -> Advanced System Settings -> Advanced -> Performance -> Settings -> Visual Effects -> Adjust for best performance). The progress bar looked fine under normal settings, but horrible under "best performance". I just changed ForeGround to "LightGreen".
Here's what I saw on default ForeColor under normal conditions
Here's what I saw when adjusted for best performance
Here is the change
//before
<ProgressBar Name="Progress" Grid.Column="0" Value="{Binding ProgressValue}" HorizontalAlignment="Stretch"/>
//after
<ProgressBar Foreground="LightGreen" Name="Progress" Grid.Column="0" Value="{Binding ProgressValue}" HorizontalAlignment="Stretch"/>
Here's what I saw after when adjusted for best performance
Some more detail:
http://justmycode.blogspot.com.au/2012/08/the-case-of-strangely-coloured.html
I found it rather useful to override the entire style.
You can pull the control template styles of any control with
var yourcontrol = new ProgressBar();
// the control needs to load before it has a template.
yourcontrol.Loaded += (sender,e) => {
var str = new System.Text.StringBuilder();
using (var writer = new System.IO.StringWriter(str))
System.Windows.Markup.XamlWriter.Save(yourcontrol .Template, writer);
System.Diagnostics.Debug.Write(str);
};
// add it to your main grid, or some control thats loaded on screen.
gridMain.Children.Add(yourcontrol);
The progress style (with some formatting) comes out as the following:
<ControlTemplate x:Key="templateprogress"
TargetType="ProgressBar">
<Grid Name="TemplateRoot"
SnapsToDevicePixels="True">
<Grid.Resources>
<LinearGradientBrush StartPoint="0,0"
EndPoint="0,1"
x:Key="brushMagic1">
<GradientStop Color="#50FFFFFF"
Offset="0.5385" />
<GradientStop Color="#00FFFFFF"
Offset="0.5385" />
</LinearGradientBrush>
<LinearGradientBrush StartPoint="0,0"
EndPoint="0,1"
x:Key="brushMagic2">
<GradientStop Color="#80FFFFFF"
Offset="0.05" />
<GradientStop Color="#00FFFFFF"
Offset="0.25" />
</LinearGradientBrush>
<LinearGradientBrush StartPoint="0,0"
EndPoint="1,0"
x:Key="brushGlowRect">
<GradientStop Color="#00FFFFFF"
Offset="0" />
<GradientStop Color="#60FFFFFF"
Offset="0.4" />
<GradientStop Color="#60FFFFFF"
Offset="0.6" />
<GradientStop Color="#00FFFFFF"
Offset="1" />
</LinearGradientBrush>
<LinearGradientBrush StartPoint="0,0"
EndPoint="1,0"
x:Key="brushLeftDark">
<GradientStop Color="#0C000000"
Offset="0" />
<GradientStop Color="#20000000"
Offset="0.3" />
<GradientStop Color="#00000000"
Offset="1" />
</LinearGradientBrush>
<LinearGradientBrush StartPoint="0,0"
EndPoint="1,0"
x:Key="brushRightDark">
<GradientStop Color="#00000000"
Offset="0" />
<GradientStop Color="#20000000"
Offset="0.7" />
<GradientStop Color="#0C000000"
Offset="1" />
</LinearGradientBrush>
<RadialGradientBrush RadiusX="1"
RadiusY="1"
x:Key="brushRadialLeftLight"
RelativeTransform="1,0,0,1,0.5,0.5">
<GradientStop Color="#60FFFFC4"
Offset="0" />
<GradientStop Color="#00FFFFC4"
Offset="1" />
</RadialGradientBrush>
<LinearGradientBrush StartPoint="0,1"
EndPoint="0,0"
x:Key="brushCenterLight">
<GradientStop Color="#60FFFFC4"
Offset="0" />
<GradientStop Color="#00FFFFC4"
Offset="1" />
</LinearGradientBrush>
<RadialGradientBrush RadiusX="1"
RadiusY="1"
x:Key="brushRadial1"
RelativeTransform="1,0,0,1,-0.5,0.5">
<GradientStop Color="#60FFFFC4"
Offset="0" />
<GradientStop Color="#00FFFFC4"
Offset="1" />
</RadialGradientBrush>
<LinearGradientBrush StartPoint="0,0"
EndPoint="0,1"
x:Key="brushHighlight1">
<GradientStop Color="#90FFFFFF"
Offset="0.5385" />
<GradientStop Color="#00FFFFFF"
Offset="0.5385" />
</LinearGradientBrush>
<LinearGradientBrush StartPoint="0,0"
EndPoint="0,1"
x:Key="brushHighlight2">
<GradientStop Color="#80FFFFFF"
Offset="0.05" />
<GradientStop Color="#00FFFFFF"
Offset="0.25" />
</LinearGradientBrush>
</Grid.Resources>
<Rectangle RadiusX="2"
RadiusY="2"
Fill="{TemplateBinding Panel.Background}" />
<Border CornerRadius="2,2,2,2"
Margin="1,1,1,1"
Background="{StaticResource ResourceKey=brushMagic1}" />
<Border BorderThickness="1,0,1,1"
BorderBrush="#80FFFFFF"
Margin="1,1,1,1"
Background="{StaticResource ResourceKey=brushMagic2}" />
<Rectangle Name="PART_Track"
Margin="1,1,1,1" />
<Decorator Name="PART_Indicator"
Margin="1,1,1,1"
HorizontalAlignment="Left">
<Grid Name="Foreground">
<Rectangle Fill="{TemplateBinding TextElement.Foreground}"
Name="Indicator" />
<Grid Name="Animation"
ClipToBounds="True">
<Rectangle Name="PART_GlowRect"
Width="100"
Margin="-100,0,0,0"
HorizontalAlignment="Left"
Fill="{StaticResource ResourceKey=brushGlowRect}" />
</Grid>
<Grid Name="Overlay">
<Grid.ColumnDefinitions>
<ColumnDefinition MaxWidth="15" />
<ColumnDefinition Width="0.1*" />
<ColumnDefinition MaxWidth="15" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Rectangle RadiusX="1"
RadiusY="1"
Name="LeftDark"
Margin="1,1,0,1"
Grid.RowSpan="2"
Fill="{StaticResource ResourceKey=brushLeftDark}" />
<Rectangle RadiusX="1"
RadiusY="1"
Name="RightDark"
Margin="0,1,1,1"
Grid.Column="2"
Grid.RowSpan="2"
Fill="{StaticResource ResourceKey=brushRightDark}" />
<Rectangle Name="LeftLight"
Grid.Column="0"
Grid.Row="2"
Fill="{StaticResource ResourceKey=brushRadialLeftLight}" />
<Rectangle Name="CenterLight"
Grid.Column="1"
Grid.Row="2"
Fill="{StaticResource ResourceKey=brushCenterLight}" />
<Rectangle Name="RightLight"
Grid.Column="2"
Grid.Row="2"
Fill="{StaticResource ResourceKey=brushRadial1}" />
<Border Name="Highlight1"
Grid.ColumnSpan="3"
Grid.RowSpan="2"
Background="{StaticResource ResourceKey=brushHighlight1}" />
<Border Name="Highlight2"
Grid.ColumnSpan="3"
Grid.RowSpan="2"
Background="{StaticResource ResourceKey=brushHighlight2}" />
</Grid>
</Grid>
</Decorator>
<Border BorderThickness="{TemplateBinding Border.BorderThickness}"
CornerRadius="2,2,2,2"
BorderBrush="{TemplateBinding Border.BorderBrush}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="ProgressBar.Orientation"
Value="Vertical">
<Setter Property="FrameworkElement.LayoutTransform"
TargetName="TemplateRoot">
<Setter.Value>
<RotateTransform Angle="-90" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="ProgressBar.IsIndeterminate"
Value="True">
<Setter Property="UIElement.Visibility"
TargetName="LeftDark"
Value="Collapsed" />
<Setter Property="UIElement.Visibility"
TargetName="RightDark"
Value="Collapsed" />
<Setter Property="UIElement.Visibility"
TargetName="LeftLight"
Value="Collapsed" />
<Setter Property="UIElement.Visibility"
TargetName="CenterLight"
Value="Collapsed" />
<Setter Property="UIElement.Visibility"
TargetName="RightLight"
Value="Collapsed" />
<Setter Property="UIElement.Visibility"
TargetName="Indicator"
Value="Collapsed" />
</Trigger>
<Trigger Property="ProgressBar.IsIndeterminate"
Value="False">
<Setter Property="Panel.Background"
TargetName="Animation"
Value="#80B5FFA9" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style TargetType="ProgressBar">
<Setter Property="Template"
Value="{StaticResource ResourceKey=templateprogress}" />
</Style>
Use style and customize as per yours requirement
</Border>
</DockPanel>
</Border>
<Border Background="White" Margin="40,0,0,0" Width="1.5" HorizontalAlignment="Left"></Border>
<Border Background="White" Margin="80,0,0,0" Width="1.5" HorizontalAlignment="Left"></Border>
<Border Background="White" Margin="120,0,0,0" Width="1.5" HorizontalAlignment="Left"></Border>
<Border Background="White" Margin="160,0,0,0" Width="1.5" HorizontalAlignment="Left"></Border>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
Try this:
yourProgressBarName.Foreground = new SolidColorBrush(Colors.Red);
Does anybody know how to change the foreground color of a WPF-Progressbar. It always seems to be merged with green.
just try with this
<ProgressBar Height="25" IsIndeterminate="True" Width="150" Foreground="Red" ></ProgressBar>
If it is not working as you required you have to modify the Style or ControlTemplate of Progressbar.
To do that you can use Expression Blend from Microsoft or you can get a copy the existing template and modify it.
Unfortunately, it is hard coded in default style:
<Trigger Property="IsIndeterminate"
Value="false">
<Setter TargetName="Animation"
Property="Background"
Value="#80B5FFA9"/>
You can create your own style from original XAML or try to override background in the Loaded event for example:
private void ProgressBar_Loaded(object sender, RoutedEventArgs e)
{
var p = (ProgressBar)sender;
p.ApplyTemplate();
((Panel)p.Template.FindName("Animation", p)).Background = Brushes.Red;
}
but it's unreliable
Why not take a path of low resistance and use the popular MahApps library?
Get the MahApps library: https://www.nuget.org/packages/MahApps.Metro
Setup the namespace: xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls"
Add the 'MetroProgressBar'
<controls:MetroProgressBar Height="40"
Background="{StaticResource GrayBrush2}"
BorderBrush="{StaticResource GrayBrush8}"
BorderThickness="3"
Foreground="{StaticResource GrayBrush8}"
IsIndeterminate="False"
Value="{Binding CurrentProgressInfo.ProgressPercent}" />
Set the 'Foreground' to your favorite color
Marat Khasanov pointed out that the unwanted green tint comes from the object named "Animation" within the control template. So another easy approach is to hide that object. This will also disable the animated "glow" effect, which I considered to be an asset but you might see as a deal-killer. I implemented this through a handler for the Loaded event as shown below.
This was inspired by an answer to another question. The same caveat applies: if they change the control template then this might no longer work.
public void ProgressBar_Loaded(object sender, RoutedEventArgs e)
{
var progressBar = sender as ProgressBar;
if (progressBar == null) return;
var animation = progressBar.Template.FindName("Animation", progressBar) as FrameworkElement;
if (animation != null)
animation.Visibility = Visibility.Collapsed;
}
I came across a similar issue when the Windows visual settings were optimised for best performance (Control Panel -> System -> Advanced System Settings -> Advanced -> Performance -> Settings -> Visual Effects -> Adjust for best performance). The progress bar looked fine under normal settings, but horrible under "best performance". I just changed ForeGround to "LightGreen".
Here's what I saw on default ForeColor under normal conditions
Here's what I saw when adjusted for best performance
Here is the change
//before
<ProgressBar Name="Progress" Grid.Column="0" Value="{Binding ProgressValue}" HorizontalAlignment="Stretch"/>
//after
<ProgressBar Foreground="LightGreen" Name="Progress" Grid.Column="0" Value="{Binding ProgressValue}" HorizontalAlignment="Stretch"/>
Here's what I saw after when adjusted for best performance
Some more detail:
http://justmycode.blogspot.com.au/2012/08/the-case-of-strangely-coloured.html
I found it rather useful to override the entire style.
You can pull the control template styles of any control with
var yourcontrol = new ProgressBar();
// the control needs to load before it has a template.
yourcontrol.Loaded += (sender,e) => {
var str = new System.Text.StringBuilder();
using (var writer = new System.IO.StringWriter(str))
System.Windows.Markup.XamlWriter.Save(yourcontrol .Template, writer);
System.Diagnostics.Debug.Write(str);
};
// add it to your main grid, or some control thats loaded on screen.
gridMain.Children.Add(yourcontrol);
The progress style (with some formatting) comes out as the following:
<ControlTemplate x:Key="templateprogress"
TargetType="ProgressBar">
<Grid Name="TemplateRoot"
SnapsToDevicePixels="True">
<Grid.Resources>
<LinearGradientBrush StartPoint="0,0"
EndPoint="0,1"
x:Key="brushMagic1">
<GradientStop Color="#50FFFFFF"
Offset="0.5385" />
<GradientStop Color="#00FFFFFF"
Offset="0.5385" />
</LinearGradientBrush>
<LinearGradientBrush StartPoint="0,0"
EndPoint="0,1"
x:Key="brushMagic2">
<GradientStop Color="#80FFFFFF"
Offset="0.05" />
<GradientStop Color="#00FFFFFF"
Offset="0.25" />
</LinearGradientBrush>
<LinearGradientBrush StartPoint="0,0"
EndPoint="1,0"
x:Key="brushGlowRect">
<GradientStop Color="#00FFFFFF"
Offset="0" />
<GradientStop Color="#60FFFFFF"
Offset="0.4" />
<GradientStop Color="#60FFFFFF"
Offset="0.6" />
<GradientStop Color="#00FFFFFF"
Offset="1" />
</LinearGradientBrush>
<LinearGradientBrush StartPoint="0,0"
EndPoint="1,0"
x:Key="brushLeftDark">
<GradientStop Color="#0C000000"
Offset="0" />
<GradientStop Color="#20000000"
Offset="0.3" />
<GradientStop Color="#00000000"
Offset="1" />
</LinearGradientBrush>
<LinearGradientBrush StartPoint="0,0"
EndPoint="1,0"
x:Key="brushRightDark">
<GradientStop Color="#00000000"
Offset="0" />
<GradientStop Color="#20000000"
Offset="0.7" />
<GradientStop Color="#0C000000"
Offset="1" />
</LinearGradientBrush>
<RadialGradientBrush RadiusX="1"
RadiusY="1"
x:Key="brushRadialLeftLight"
RelativeTransform="1,0,0,1,0.5,0.5">
<GradientStop Color="#60FFFFC4"
Offset="0" />
<GradientStop Color="#00FFFFC4"
Offset="1" />
</RadialGradientBrush>
<LinearGradientBrush StartPoint="0,1"
EndPoint="0,0"
x:Key="brushCenterLight">
<GradientStop Color="#60FFFFC4"
Offset="0" />
<GradientStop Color="#00FFFFC4"
Offset="1" />
</LinearGradientBrush>
<RadialGradientBrush RadiusX="1"
RadiusY="1"
x:Key="brushRadial1"
RelativeTransform="1,0,0,1,-0.5,0.5">
<GradientStop Color="#60FFFFC4"
Offset="0" />
<GradientStop Color="#00FFFFC4"
Offset="1" />
</RadialGradientBrush>
<LinearGradientBrush StartPoint="0,0"
EndPoint="0,1"
x:Key="brushHighlight1">
<GradientStop Color="#90FFFFFF"
Offset="0.5385" />
<GradientStop Color="#00FFFFFF"
Offset="0.5385" />
</LinearGradientBrush>
<LinearGradientBrush StartPoint="0,0"
EndPoint="0,1"
x:Key="brushHighlight2">
<GradientStop Color="#80FFFFFF"
Offset="0.05" />
<GradientStop Color="#00FFFFFF"
Offset="0.25" />
</LinearGradientBrush>
</Grid.Resources>
<Rectangle RadiusX="2"
RadiusY="2"
Fill="{TemplateBinding Panel.Background}" />
<Border CornerRadius="2,2,2,2"
Margin="1,1,1,1"
Background="{StaticResource ResourceKey=brushMagic1}" />
<Border BorderThickness="1,0,1,1"
BorderBrush="#80FFFFFF"
Margin="1,1,1,1"
Background="{StaticResource ResourceKey=brushMagic2}" />
<Rectangle Name="PART_Track"
Margin="1,1,1,1" />
<Decorator Name="PART_Indicator"
Margin="1,1,1,1"
HorizontalAlignment="Left">
<Grid Name="Foreground">
<Rectangle Fill="{TemplateBinding TextElement.Foreground}"
Name="Indicator" />
<Grid Name="Animation"
ClipToBounds="True">
<Rectangle Name="PART_GlowRect"
Width="100"
Margin="-100,0,0,0"
HorizontalAlignment="Left"
Fill="{StaticResource ResourceKey=brushGlowRect}" />
</Grid>
<Grid Name="Overlay">
<Grid.ColumnDefinitions>
<ColumnDefinition MaxWidth="15" />
<ColumnDefinition Width="0.1*" />
<ColumnDefinition MaxWidth="15" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Rectangle RadiusX="1"
RadiusY="1"
Name="LeftDark"
Margin="1,1,0,1"
Grid.RowSpan="2"
Fill="{StaticResource ResourceKey=brushLeftDark}" />
<Rectangle RadiusX="1"
RadiusY="1"
Name="RightDark"
Margin="0,1,1,1"
Grid.Column="2"
Grid.RowSpan="2"
Fill="{StaticResource ResourceKey=brushRightDark}" />
<Rectangle Name="LeftLight"
Grid.Column="0"
Grid.Row="2"
Fill="{StaticResource ResourceKey=brushRadialLeftLight}" />
<Rectangle Name="CenterLight"
Grid.Column="1"
Grid.Row="2"
Fill="{StaticResource ResourceKey=brushCenterLight}" />
<Rectangle Name="RightLight"
Grid.Column="2"
Grid.Row="2"
Fill="{StaticResource ResourceKey=brushRadial1}" />
<Border Name="Highlight1"
Grid.ColumnSpan="3"
Grid.RowSpan="2"
Background="{StaticResource ResourceKey=brushHighlight1}" />
<Border Name="Highlight2"
Grid.ColumnSpan="3"
Grid.RowSpan="2"
Background="{StaticResource ResourceKey=brushHighlight2}" />
</Grid>
</Grid>
</Decorator>
<Border BorderThickness="{TemplateBinding Border.BorderThickness}"
CornerRadius="2,2,2,2"
BorderBrush="{TemplateBinding Border.BorderBrush}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="ProgressBar.Orientation"
Value="Vertical">
<Setter Property="FrameworkElement.LayoutTransform"
TargetName="TemplateRoot">
<Setter.Value>
<RotateTransform Angle="-90" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="ProgressBar.IsIndeterminate"
Value="True">
<Setter Property="UIElement.Visibility"
TargetName="LeftDark"
Value="Collapsed" />
<Setter Property="UIElement.Visibility"
TargetName="RightDark"
Value="Collapsed" />
<Setter Property="UIElement.Visibility"
TargetName="LeftLight"
Value="Collapsed" />
<Setter Property="UIElement.Visibility"
TargetName="CenterLight"
Value="Collapsed" />
<Setter Property="UIElement.Visibility"
TargetName="RightLight"
Value="Collapsed" />
<Setter Property="UIElement.Visibility"
TargetName="Indicator"
Value="Collapsed" />
</Trigger>
<Trigger Property="ProgressBar.IsIndeterminate"
Value="False">
<Setter Property="Panel.Background"
TargetName="Animation"
Value="#80B5FFA9" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style TargetType="ProgressBar">
<Setter Property="Template"
Value="{StaticResource ResourceKey=templateprogress}" />
</Style>
Use style and customize as per yours requirement
</Border>
</DockPanel>
</Border>
<Border Background="White" Margin="40,0,0,0" Width="1.5" HorizontalAlignment="Left"></Border>
<Border Background="White" Margin="80,0,0,0" Width="1.5" HorizontalAlignment="Left"></Border>
<Border Background="White" Margin="120,0,0,0" Width="1.5" HorizontalAlignment="Left"></Border>
<Border Background="White" Margin="160,0,0,0" Width="1.5" HorizontalAlignment="Left"></Border>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
Try this:
yourProgressBarName.Foreground = new SolidColorBrush(Colors.Red);
I am attempting to attach a "Browse" button to a number of textboxes that will contain filenames.
I was aiming for something like this:
<TextBox Text="c:\Filename.txt" Template="{StaticResource FileBrowser}"/>
The control template I declared is as follows:
<Window.Resources>
<ControlTemplate x:Key="FileBrowser" TargetType="{x:Type TextBox}">
<Grid Grid.Row="{TemplateBinding Grid.Row}" Grid.Column="{TemplateBinding Grid.Column}">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ContentPresenter Grid.Column="0" Grid.Row="0"/>
<Button Grid.Column="1" Content="..."/>
</Grid>
</ControlTemplate>
</Window.Resources>
But when I attempt to use this, there is no-longer a TextBox there. Only a blank space, followed by "..."
Does anyone know what I'm doing wrong? Is this the sort of thing that can only be resolved via making a new UserControl?
TextBox defines a TemplatePart named "PART_ContentHost" of type ScrollViewer. All of the text handling in the code relies on this element existing in the template. Since you haven't included it in your template the TextBox is essentially broken. Change your ContentPresenter to this instead:
<ScrollViewer x:Name="PART_ContentHost" Grid.Column="0" Grid.Row="0"/>
ContentPresenter will just provide the Content (Text string), it won't provide the Textbox layout.
For this scenario, create a Usercontrol or ContentControl.
TextBox is not ContentControl and as such will not be able to make sense of a ContentPresenter.
You could however point the ContentPresenter to the right direction with a TemplateBinding to your Text property:
<ContentPresenter Grid.Column="0" Grid.Row="0" Content="{TemplateBinding Text}" />
Now it will represent the text as new content.
Also, you might want to reconsider using ContentPresenter at all, and just use a TextBlock in stead of ContentPresenter.
<TextBlock Grid.Column="0" Grid.Row="0" Text="{TemplateBinding Text}" />
just try this xaml...
<Window.Resources>
<LinearGradientBrush x:Key="NormalBrush" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#EEE" Offset="0.0"/>
<GradientStop Color="#CCC" Offset="1.0"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="NormalBorderBrush" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#CCC" Offset="0.0"/>
<GradientStop Color="#444" Offset="1.0"/>
</LinearGradientBrush>
<!-- LightBrush is used for content areas such as Menu, Tab Control background -->
<LinearGradientBrush x:Key="LightBrush" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFF" Offset="0.0"/>
<GradientStop Color="#EEE" Offset="1.0"/>
</LinearGradientBrush>
<!-- MouseOverBrush is used for MouseOver in Button, Radio Button, CheckBox -->
<LinearGradientBrush x:Key="MouseOverBrush" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFF" Offset="0.0"/>
<GradientStop Color="#AAA" Offset="1.0"/>
</LinearGradientBrush>
<!-- PressedBrush is used for Pressed in Button, Radio Button, CheckBox -->
<LinearGradientBrush x:Key="PressedBrush" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#BBB" Offset="0.0"/>
<GradientStop Color="#EEE" Offset="0.1"/>
<GradientStop Color="#EEE" Offset="0.9"/>
<GradientStop Color="#FFF" Offset="1.0"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="PressedBorderBrush" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#444" Offset="0.0"/>
<GradientStop Color="#888" Offset="1.0"/>
</LinearGradientBrush>
<!-- SelectedBackgroundBrush is used for the Selected item in ListBoxItem, ComboBoxItem-->
<SolidColorBrush x:Key="SelectedBackgroundBrush" Color="#DDD"/>
<!-- Disabled Brushes are used for the Disabled look of each control -->
<SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888"/>
<SolidColorBrush x:Key="DisabledBackgroundBrush" Color="#EEE"/>
<SolidColorBrush x:Key="DisabledBorderBrush" Color="#AAA"/>
<!-- Used for background of ScrollViewer, TreeView, ListBox, Expander, TextBox, Tab Control -->
<SolidColorBrush x:Key="WindowBackgroundBrush" Color="#FFF"/>
<!-- DefaultedBorderBrush is used to show KeyBoardFocus -->
<LinearGradientBrush x:Key="DefaultedBorderBrush" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#777" Offset="0.0"/>
<GradientStop Color="#000" Offset="1.0"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="SolidBorderBrush" Color="#888"/>
<SolidColorBrush x:Key="LightBorderBrush" Color="#AAA"/>
<SolidColorBrush x:Key="LightColorBrush" Color="#DDD"/>
<!-- Used for Checkmark, Radio button, TreeViewItem, Expander ToggleButton glyphs -->
<SolidColorBrush x:Key="GlyphBrush" Color="#444"/>
<!-- Simple TextBox -->
<Style x:Key="SimpleTextBox" TargetType="{x:Type TextBox}">
<Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="AllowDrop" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Border x:Name="Border" Background="{DynamicResource WindowBackgroundBrush}" BorderBrush="{DynamicResource SolidBorderBrush}" BorderThickness="1" Padding="2" CornerRadius="2">
<!-- The implementation places the Content into the ScrollViewer. It must be named PART_ContentHost for the control to function -->
<ScrollViewer Margin="0" x:Name="PART_ContentHost" Style="{DynamicResource SimpleScrollViewer}" Background="{TemplateBinding Background}"/>
</Border>
<Button HorizontalAlignment="Stretch" Width="25" Content="..." Grid.Column="1" Margin="1"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" Value="{DynamicResource DisabledBackgroundBrush}" TargetName="Border"/>
<Setter Property="BorderBrush" Value="{DynamicResource DisabledBackgroundBrush}" TargetName="Border"/>
<Setter Property="Foreground" Value="{DynamicResource DisabledForegroundBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<TextBox Style="{StaticResource SimpleTextBox}" Height="25"></TextBox>
</Grid>