I am trying to make a custom template for datepickers in my program. I am basically using this template line for line (changing colors and things):
http://msdn.microsoft.com/en-us/library/cc278067(v=vs.95).aspx
I have tried going through it and getting rid of this white box (the one INSIDE the datepicker textbox), but it is evading me. Here is a screenshot of what I am seeing:
Do I have to add something extra? Or change some existing values? There is also a MouseOver event that highlights the whitebox with the blue windows gradient, if that helps..
For future people with this problem, I did what Brian suggested, just thought I would post exactly my code, so other people can use it ;) I just added this into app.xaml
<Style x:Key="{x:Type DatePickerTextBox}" TargetType="{x:Type DatePickerTextBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DatePickerTextBox}">
<Grid>
<Border x:Name="watermark_decorator" BorderBrush="{DynamicResource cControlColor}" BorderThickness="1"
Background="{DynamicResource cControlColor}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
EDIT: Updating since the clarification points to the white rectangle around the 'Enter text here'.
For this, you need to create a custom template for the DatePickerTextBox which is defined about 2/3rds of the way down that template, and named TextBox. Your best bet will be to use Blend to create a custom template (since it will generate the default template) and then modify the <Border x:Name="watermark_decorator".../> to change the BorderBrush. For example:
<Style x:Key="MyDatePickerTextBoxStyle" TargetType="{x:Type DatePickerTextBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DatePickerTextBox}">
<Grid>
<!-- Visual State Manager stuff -->
<Border...>
<!-- other stuff... -->
<Border x:Name="watermark_decorator" BorderBrush="[THE BRUSH YOU WANT]" BorderThickness="1">
<!-- And so on and so forth... -->
</Border>
</Border>
</Grid>
</ControlTemplate>
</Setter>
</Style>
Then, in the DatePicker template, modify the DatePickerTextBox to use this style:
<!-- All DatePicker Template stuff -->
<controlsPrimitives:DatePickerTextBox x:Name="TextBox" Style="{DynamicResource MyDatePickerTextBoxStyle}" ... />
Are you talking about the button with the 15 on it? If so, the look and feel of this part of the DatePicker is defined in the "DropDownButtonTemplate" part of the template. This template includes a large VisualStateManager section, but then defines the template for that button. There are comments that define the beginning and end of the button template:
<!--Start UI-->
... this is the Button Template ...
<!-- End UI-->
For example, if you want to change the color of the Blue rectangle at the top of the button, the MSDN example uses this:
<Rectangle Grid.ColumnSpan="4" Grid.RowSpan="1" StrokeThickness="1">
<Rectangle.Stroke>
<LinearGradientBrush EndPoint="0.48,-1" StartPoint="0.48,1.25">
<GradientStop Color="#FF494949" />
<GradientStop Color="#FF9F9F9F" Offset="1" />
</LinearGradientBrush>
</Rectangle.Stroke>
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.3,-1.1" StartPoint="0.46,1.6">
<GradientStop Color="#FF4084BD" />
<GradientStop Color="#FFAFCFEA" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
And you could change it to a solid color simply by changing it to this:
<Rectangle Grid.ColumnSpan="4" Grid.RowSpan="1" StrokeThickness="1" Stroke="Black" Fill="Green"/>
The "White Box" is actually the Border inside the template with the x:Name="BackgroundGradient", so if you change the Background of that element, you can get rid of the white.
Related
I've got a common ResourceDictionary that use an Microsoft example for use a black ComboBox
Microsoft Exemple
In execution a exception was thrown :
Exception: Cannot find resource named 'NormalBorderBrush'. Resource names are case sensitive.
I just want to declare this combobox in my common ResourceDictionary xaml file
<!-- Combo box-->
<ControlTemplate x:Key="ComboBoxToggleButton" TargetType="ToggleButton">
<Border
x:Name="Border"
Grid.ColumnSpan="2"
CornerRadius="2"
...
BorderBrush="{StaticResource NormalBorderBrush}"
BorderThickness="1" />
...
<!-- Border Brushes -->
<LinearGradientBrush x:Key="NormalBorderBrush" StartPoint="0,0" EndPoint="0,1">
<GradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#CCC" Offset="0.0"/>
<GradientStop Color="#444" Offset="1.0"/>
</GradientStopCollection>
</GradientBrush.GradientStops>
</LinearGradientBrush>
The NormalBorderBrush is declared in this same file !
What Am I doing wrong ?
Thanks in advance.
Eric
The order in which you define the resources matters.
The XAML compiler processes the file from top to bottom so to be able to reference NormalBorderBrush in the ControlTemplate, you need to define the brush before you define the template:
<LinearGradientBrush x:Key="NormalBorderBrush" ... />
<ControlTemplate x:Key="ComboBoxToggleButton" ... />
I have 2 buttons, both of which are using a style to keep a consistent UI. However for 1 button, I would like to provide an image for, and the other just text.
I suppose I could create a new style, copy everything over, and the reformat it to my liking, but this seems like waste, is time consuming, and i think i would have to do it for each instance I wish to have a image on a button. I mean, that's fine, but I just want to know if there is an alternative that would make things more elegant.
I think I should somehow be able to push an 'arguement' or data to a style, either in or out of XAML to format the style, or something that would accomplish this (I'm sure the terminology is wrong).
Here is the Button Style:
<Style x:Key="Control_Button" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Image> <!-- Optional Image here --> </Image>
<TextBlock Name="btn" Text="{TemplateBinding Content}" Padding="16" VerticalAlignment="Center">
<TextBlock.TextDecorations>
<TextDecoration Location="Underline" />
</TextBlock.TextDecorations>
</TextBlock>
<!-- FIX ME: not underlined normally -->
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="TextBlock.IsMouseOver" Value="True">
<Setter TargetName="btn" Property="TextDecorations" Value="none" />
<!-- FIX ME: underlined on hover -->
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
What you are asking for is not possible without creating a custom control or user control.
What you should do though is setting the contents of the button the way you like. If you want only a string, you can set it directly:
<Button>my text</Button>
or with a binding:
<Button Content={Binding textProperty} />
To include an image in the button, add a panel as content, in this example I added a StackPanel, but you can also use a Grid or any other element:
<Button>
<Button.Content>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding myImagePath}" />
<TextBlock Text="{Binding myText}" />
</StackPanel>
</Button.Content>
</Button>
I want to create a Slider that has a Gradient from Black to a certain Color as a Background.
The color is to be set additionally to the Style of the Slider. AFAIK, no extra properties can be added to a given control using just Control Templates (i.e. no attached properties and no derived controls).
I therefore want to use the Tag property and have created this snippet:
<Style x:Key="ColorSlider" TargetType="{x:Type Slider}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Slider}">
<Grid>
<Rectangle Grid.Column="1" Grid.Row="1">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
<GradientStop Color="{TemplateBinding Tag}" Offset="0.0"/>
<GradientStop Color="Black" Offset="1.0"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
....
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and use it like this:
<Slider Style="{StaticResource ColorSlider}" Width="100" Height="500" Tag="{StaticResource redColor}"/>
with redColor beeing a static resource (although I'd prefer typing colors directly using HEX codes or predefined colors).
This however doesn't work, any idea why?
Instead of using TemplateBinding which gets resolved at compile time, use RelativeSource with Mode set to TemplatedParent which gets resolved at run time.
TemplateBinding gets resolved at compile time but actual value for tag will be resolved at runtime when staticResource gets applied. That's why you should use another approach.
<GradientStop Color="{Binding Tag, RelativeSource={RelativeSource
Mode=TemplatedParent}}" Offset="0.0"/>
I've got some windows with mainly comboboxes, textboxes, and checkboxes. When you click on one to get focus I need a way to have them be outlined with a colorful box (boss' orders). Is there a way to do this easier than overriding the default style of all of these controls? I've never done that before, so it would take a lot of mucking around on my part to figure it out.
You can try adding a FocusVisualStyle to the Controls that need different focus rectangle styles.
From above link
The second mechanism is to provide a separate style as the value of the FocusVisualStyle property; the "focus visual style" creates a separate visual tree for an adorner that draws on top of the control, rather than changing the visual tree of the control or other UI element by replacing it.
Something like this in your Window's Xaml
<Window.Resources>
<Style x:Key="NewFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Border>
<Rectangle Stroke="Red" Margin="2" StrokeThickness="1" StrokeDashArray="1 2" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
or your Application.Xaml file.
<Application.Resources>
<Style x:Key="NewFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Border>
<Rectangle Stroke="Red" Margin="2" StrokeThickness="1" StrokeDashArray="1 2" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
Usage:
<ComboBox FocusVisualStyle="{StaticResource NewFocusVisual}" Height="23" HorizontalAlignment="Left" Margin="238,102,0,0" Name="ComboBox1" VerticalAlignment="Top" Width="120" />
<CheckBox FocusVisualStyle="{StaticResource NewFocusVisual}" Content="CheckBox" Height="16" HorizontalAlignment="Left" Margin="238,71,0,0" Name="CheckBox2" VerticalAlignment="Top" />
<TextBox FocusVisualStyle="{StaticResource NewFocusVisual}" Height="23" HorizontalAlignment="Left" Margin="238,144,0,0" Name="TextBox1" VerticalAlignment="Top" Width="120" />
If you want the Focus rectangle to change for every type of focus event Microsoft states that:
From Microsoft: Focus visual styles act exclusively for keyboard focus. As such, focus visual styles are a type of accessibility feature. If you want UI changes for any type of focus, whether via mouse, keyboard, or programmatically, then you should not use focus visual styles, and should instead use setters and triggers in styles or templates that are working from the value of general focus properties such as IsFocused or IsFocusWithin.
Give this a shot it works for a TextBox haven't checked your other Controls
<Application.Resources>
<Style TargetType="TextBox" >
<Style.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Control.BorderBrush" Value="Red" />
<Setter Property="Control.BorderThickness" Value="3" />
</Trigger>
</Style.Triggers>
</Style>
</Application.Resources>
I am working with WPF application. I have created a custom control library where I have customized all controls, meaning added some functionality and restyled them. Same way I have restyled the ToolTip as well. I am using this custom library in other projects. Everything is working fine except ToolTip. ToolTip style is not getting applied. Any Help plz.
Edit:
I have created a custom class named ToolTip that derives from System.Windows.Controls.ToolTip, I have declared style for my custom class as well. Now I want to know how can I get this style applied for ToolTip of each control, I mean I want to create object of my ToolTip whenever user set ToolTip on a control.
in .cs:
public class ToolTip : System.Windows.Controls.ToolTip
{
static ToolTip()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(ToolTip), new FrameworkPropertyMetadata(typeof(ToolTip)));
}
}
in .xaml(Resource Dictionary):
<Style TargetType="{x:Type local:ToolTip}">
<Setter Property="VerticalOffset" Value="-2" />
<Setter Property="HorizontalOffset" Value="20" />
<Setter Property="Height" Value="35"></Setter>
<Setter Property="Placement" Value="Top" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:ToolTip}">
<Grid Name="Border" Background="Transparent" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
<Rectangle RadiusX="7.5" RadiusY="7.5">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0.5,-0.5" EndPoint="0.547,0.913">
<GradientStop Color="#FFEEEEEE" Offset="0"/>
<GradientStop Color="#FFBBBBBB" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<ContentPresenter Margin="10,0,10,0" HorizontalAlignment="Center" VerticalAlignment="Center" TextBlock.Foreground="Black" TextBlock.FontSize="12" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Any Help plz.
Placing the default ToolTip Style in a shared ResourceDictionary in a separate assembly will allow it to be used by multiple projects. You can merge in the MyDefaultStyles ResourceDictionary in the Resources folder of the SharedStyleLibrary.dll into App.xaml using:
<App.Resources>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/SharedStyleLibrary;component/Resources/MyDefaultStyles.xaml"/>
</ResourceDictionary.MergedDictionaries>
</App.Resources>
If MyDefaultStyles contains an implicit ToolTip Style (<Style TargetType="{x:Type ToolTip}">
) it will be used as the default. You can also target it more locally by instead giving the Style an x:Key and then creating an implicit ToolTip Style in whatever scope you want it to apply (i.e. Window, UserControl, single layout Panel):
<Style TargetType="{x:Type ToolTip}" BasedOn="{StaticResource ExternalLibraryNamedStyle}">...
If your custom ToolTip class is only for the sake of applying templates, it's much easier to use an Implicit Style for your ToolTips:
<Style TargetType="{x:Type ToolTip}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<!-- rest of your style here -->
</Style>