I have the following style definitions:
<!-- Border -->
<Style x:Key="MyControlBorder" TargetType="{x:Type Border}">
<Setter Property="BorderBrush" Value="DarkKhaki" />
<Setter Property="Background" Value="White" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="CornerRadius" Value="10" />
</Style>
<!-- TextBox -->
<Style x:Key="MyTextBox" TargetType="{x:Type TextBox}">
<Setter Property="Height" Value="30" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBoxBase}">
<Border Name="TextBoxBorder" Style="{StaticResource MyControlBorder}">
<ScrollViewer x:Name="PART_ContentHost"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- PasswordBox -->
<Style x:Key="MyPasswordBox" TargetType="{x:Type PasswordBox}">
<Setter Property="Height" Value="30" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Control}">
<Border Name="Border" Style="{StaticResource MyControlBorder}">
<ScrollViewer x:Name="PART_ContentHost" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And the following XAML code:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBox Grid.Row="0" Style="{StaticResource MyTextBox}" />
<PasswordBox Grid.Row="1" Style="{StaticResource MyPasswordBox}" />
</Grid>
Now I got this result:
The TextBox applies the style correctly, but why does the PasswordBox not apply the style?
If you wrap the Border in another Border everything just works as expected (I don't know why).
As a bonus, you can now have PasswordBoxes and TextBoxes "inherit" from the same Style, keeping things nice and DRY.
<!-- Border Style Definition -->
<Style x:Key="MyControlBorder" TargetType="Border">
<Setter Property="BorderBrush" Value="DarkKhaki" />
<Setter Property="Background" Value="White" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="CornerRadius" Value="10" />
</Style>
<!-- TextBox and PasswordBox Style -->
<Style x:Key="MyControlInputBox" TargetType="Control">
<Setter Property="Height" Value="30" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Control}">
<Border>
<Border Name="Border" Style="{StaticResource MyControlBorder}">
<ScrollViewer x:Name="PART_ContentHost" />
</Border>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- TextBox -->
<Style x:Key="MyTextBox" TargetType="{x:Type TextBox}" BasedOn="{StaticResource MyControlInputBox}" />
<!-- PasswordBox -->
<Style x:Key="MyPasswordBox" TargetType="{x:Type PasswordBox}" BasedOn="{StaticResource MyControlInputBox}" />
Somehow Border within ControlTemplate of PasswordBox does not take MyControlBorder style.
When you modify MyPasswordBox style like this... then it will work.
<Style x:Key="MyPasswordBox" TargetType="{x:Type PasswordBox}">
<Setter Property="Height" Value="30" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Control}">
<Border Name="Border" BorderBrush="DarkKhaki" Background="White" BorderThickness="1" CornerRadius="10">
<ScrollViewer x:Name="PART_ContentHost" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
I know it's not the best solution... but I can't figure out why MyControlBorder is not applied. It doesn't even work when you get rid of MyTextBox style. Then you are left only with MyControlBorder and MyPasswordBox ...it does not work either.
The PasswordBox is strange in this regard, as it is explicitly implemented to show this behavior.
The default control template contains a Border, as you can see here:
<ControlTemplate TargetType="{x:Type PasswordBox}">
<Border x:Name="border" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" SnapsToDevicePixels="True">
<ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
</Border>
<!-- ...other markup, triggers. -->
</ControlTemplate>
The code for PasswordBox (taken from reference source) does the following:
OnApplyTemplate on line 473 is called when the control template is applied.
AttachToVisualTree on line 476 is called which is defined on line 1176.
SetRenderScopeToContentHost on line 1181 is called which is defined on line 956.
From line 1014 on it searches a Border up the visual tree beginning from the password content host. Note that it searches until it does not find a Border anymore, which means it stores the last found Border within its _border field.
In line 1200, if a Border was found, its Style property is set to null.
Consequently, whenever a control template is applied, the Style of the outermost Border is reset. This is still the same in .NET Core and >.NET , as you can see from the code on GitHub. This is the reason why #David Murdoch's answer with a redundant nested Border works, when the style is applied to the inner Border.
Now, what can do? You can either insert a dummy Border as a workaround or you have to set the CornerRadius directly to the Border inside your custom control template.
<ControlTemplate TargetType="{x:Type Control}">
<Border Name="Border" CornerRadius="10" Style="{StaticResource MyControlBorder}">
<ScrollViewer x:Name="PART_ContentHost" />
</Border>
</ControlTemplate>
Related
I am new to WPF and I created the following simple style example. But it doesn't work properly and button's content doesn't show although I can still click on it. Can anyone tell me why it is broken?
<Window.Resources>
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border BorderBrush="Blue"
BorderThickness="5"
Background="Aqua"
Width="80"
Height="40">
<ContentPresenter></ContentPresenter>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="Grid" x:Name="GridWithMarginStyle">
<Setter Property="Margin" Value="12"></Setter>
</Style>
</Window.Resources>
<StackPanel>
<StackPanel.Resources>
<Style TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type Button}}">
<EventSetter Event="Button.Click" Handler="ButtonHandler" />
<Setter Property="Background" Value="Red"></Setter>
<Setter Property="Foreground" Value="White"></Setter>
</Style>
</StackPanel.Resources>
<Button Name="OkBtn">OK</Button>
<Button Name="CancelBtn" Click="CancelBtn_Click">Cancel</Button>
</StackPanel>
You are using the BasedOn property in the correct way. The problem is that your ContentPresenter is not binded to the control it renders (i.e. the button).
Just try to replace your ControlTemplate XAML with this one:
<ControlTemplate TargetType="{x:Type Button}">
<Border BorderBrush="Blue"
BorderThickness="5"
Background="Aqua"
Width="80"
Height="40">
<ContentPresenter Content="{TemplateBinding Content}" />
</Border>
</ControlTemplate>
By using TemplateBinding you can bind the ContentPresenter to the Content property of your templated control.
I found it weird that there's no GridSplitter property like "DragBackground" or something alike.
This seems to work though:
<UserControl.Resources>
<Style x:Key="CustomGridSplitterStyle" TargetType="GridSplitter">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridSplitter">
<Grid x:Name="Root" >
<!-- Background -->
<Rectangle Fill="White" StrokeThickness="0" />
<!-- Focus Visual -->
<Rectangle x:Name="FocusVisual" Stroke="White" StrokeThickness="1" Opacity="0" IsHitTestVisible="false" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
GridSplitter Style="{StaticResource CustomGridSplitterStyle}" Grid.Column="1" Width="6" HorizontalAlignment="Stretch"
BorderThickness="2,0,0,0" BorderBrush="Blue" />
My problem with this solution however is that I'd like to set a border on the left side of the GridSplitter (see above), which doesn't work when using the custom GridSplitter style.
Does anybody know how to get this working ?
If you want to use BorderBrush and BorderThickness in your Template you can use TemplateBinding on some Border. You can also use Setter in your Style to define some default value.
<Style x:Key="CustomGridSplitterStyle" TargetType="{x:Type GridSplitter}">
<Setter Property="Background" Value="White"/>
<Setter Property="BorderBrush" Value="White"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridSplitter">
<Border
x:Name="FocusVisual"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"/>
<ControlTemplate.Triggers>
<Trigger Property="IsDragging" Value="True">
<Setter TargetName="FocusVisual" Property="..." Value="..." />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Also since GridSplitter is a Thumb and as such has IsDragging property so you can create Trigger to do something when it is true as in the example above
I am using Silverlight Toolkit from http://silverlight.codeplex.com/ and am having an issue with the styling. Based off microsoft's documents I see the chart is made up of 4 basic components.
ChartAreaStyle ==> Grid
LegendStyle ==> Legend (a control similar to an ItemsControl with a Title)
PlotAreaStyle ==> Grid
TitleStyle ==> Title (a ContentControl)
ref http://msdn.microsoft.com/en-us/expression/dd433476.aspx
My Question Is
How can I fill the chart container with the chart itself instead of having an empty surrounding area and if possible omit the legend?
I am still trying to wrap my head around xaml and control templates etc. I know it probably can be done using that, I just don't know how.
Here is an example of what I am trying to achieve:
Here is what it looks like now:
So I copied the style of the Chart control from the Toolkit source code and removed redundant elements from the template.
The styles definitions look so:
<UserControl.Resources>
<Style x:Key="ChartWithoutPaddings" TargetType="chart:Chart">
<Setter Property="Padding" Value="0" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="ChartAreaStyle">
<Setter.Value>
<Style TargetType="Panel">
<Setter Property="MinWidth" Value="100" />
<Setter Property="MinHeight" Value="20" />
</Style>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="chart:Chart">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
<chartingprimitives:EdgePanel x:Name="ChartArea" Style="{TemplateBinding ChartAreaStyle}">
<Grid Canvas.ZIndex="-1" Style="{TemplateBinding PlotAreaStyle}" />
</chartingprimitives:EdgePanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="EmptyDataPoint" TargetType="Control">
<Setter Property="Background" Value="Black" />
<Setter Property="Template" Value="{x:Null}" />
</Style>
<Style x:Key="OnePixelLine" TargetType="Polyline">
<Setter Property="StrokeThickness" Value="1" />
</Style>
</UserControl.Resources>
You should also hide axes and specify height and width of the chart:
<chart:Chart Style="{StaticResource ChartWithoutPaddings}"
VerticalAlignment="Center" HorizontalAlignment="Center"
Width="200" Height="30">
<chart:LineSeries ItemsSource="{Binding Items}" IndependentValuePath="Title" DependentValuePath="Value"
DataPointStyle="{StaticResource EmptyDataPoint}" PolylineStyle="{StaticResource OnePixelLine}" />
<chart:Chart.Axes>
<chart:CategoryAxis Orientation="X" Height="0" Opacity="0" />
<chart:LinearAxis Orientation="Y" Width="0" Opacity="0" />
</chart:Chart.Axes>
</chart:Chart>
I have created a FocusVisualStyle for my user control and have successfully implemented the override. My problem is I would like that to use some properties from the parent, but TemplateBinding doesn't seem to work.
A simplified version of the the Control is defined as below:
<Style TargetType="{x:Type local:Thought}">
<Setter Property="FocusVisualStyle" Value="{StaticResource ThoughtFocusStyle}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:Thought}" >
<Border BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{StaticResource ThoughtBorderNormalBrush}">
<!-- other controls -->
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
My custom FocusVisualStyle is defined as follows:
<Style x:Key="ThoughtFocusStyle" TargetType="{x:Type Control}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Control}">
<Border BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{StaticResource ThoughtBorderFocusBrush}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
If I hard code BorderThickness in ThoughtFocusStyle it works as expected (Tab into the control), but using TemplateBinding does not. I've played around with RelativeSource but can't seem to get the syntax right (still very new to WPF).
try :
<Border BorderThickness="{Binding
RelativeSource={RelativeSource Mode=FindAncestor,
AncestorType=Control},
Path=BorderThickness}">
I have made a BaseStyle, which looks like this:
<Style x:Key="BaseStyle" TargetType="{x:Type Control}">
<Setter Property="KeyboardNavigation.TabNavigation" Value="None" />
<Setter Property="AllowDrop" Value="true" />
<Setter Property="Background" Value="Transparent"></Setter>
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="FontSize" Value="12" />
<Setter Property="Padding" Value="8,5,3,3" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Control}">
<Grid>
<Border x:Name="BorderBase" Background="White" BorderThickness="1,1,1.4,1.4" BorderBrush="Silver" CornerRadius="4" />
<Label x:Name="TextPrompt" Content="{TemplateBinding Tag}" Visibility="Collapsed" Focusable="False" Foreground="Silver"></Label>
<ScrollViewer Margin="0" x:Name="PART_ContentHost" Foreground="{DynamicResource OutsideFontColor}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="BorderThickness" TargetName="BorderBase" Value="1,1,2.4,2.4"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate x:Name="InspectorErrorTemplate">
<StackPanel Orientation="Vertical">
<Border BorderBrush="Red" BorderThickness="1" CornerRadius="4">
<AdornedElementPlaceholder Name="adornerPlaceholder"/>
</Border>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And have used it this way to apply it to a textbox, which works fine:
<Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource BaseStyle}" />
Now I thought I can simply use the same style at a textbox of a combobox. So I thought I have to add something in this part:
<ControlTemplate x:Key="ComboBoxTextBox" TargetType="{x:Type TextBox}">
<Border x:Name="PART_ContentHost" Focusable="False" Background="{TemplateBinding Background}" />
<ControlTemplate.Triggers>
</ControlTemplate.Triggers>
</ControlTemplate>
However, I cannot add something like BasedOn="{StaticResource BaseStyle}" in the ControlTemplate to make e.g. the textbox to get a different border when it receives the focus (see IsFocused Trigger in the BaseStyle), or a red curved corner in case the validation is triggered... What am I doing wrong?
Hi you are working with different border color for different text-box that is the only problem here. There are several other options but I feel the following option is good to go.
You can create your own UserControl keeping a TextBox inside it. You can add a new DependencyProperty- BorderColor property in your UserControl. So that according to the BorderColor property value internally you can change the color of the border. So here you don't have to worry about multiple Style or any inheritance.
Isn't it?
The template for a TextBox is fundamentally different than the the template for a ComboBox. So you'll have to have different templates.
You can have one base style to define the shared properties (like Padding, FontFamily, etc.) without defining the Template property. Then make two more styles: one with TargetType set to TextBox; and the other with TargetType set to ComboBox. Each of these styles will be based on your base style and have additional definition for the template (and other properties that are not shared between the two controls).