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" ... />
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
in css you can call from an html file any style and easily
via code alter some property of style in a given element
so in C# WPF i would like to place a menu button that
will allow to alter the backGround
the XAML below is "Sample1" , is currently hardcoded as-is, and applied within a <Window.Background> scope, to current MainWindow.
how can i create Sample2..4,5 so that via C# code, say through the "Style" menu button created, i will be able to alter the BackGround of an element ?
where could i place the settings in an orderly manner?
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5" x:Name="Sample1" Opacity="0.46">
<GradientStop Color="#8F63BADF" Offset="0.117" />
<GradientStop Color="#9D56B7C9" Offset="0.666" />
<GradientStop Color="#9343C0DB" Offset="0.279" />
<GradientStop Color="#E734ABDA" Offset="0.442" />
<GradientStop Color="#927FE2E2" Offset="0.802" />
<GradientStop Color="#E974CFC1" Offset="0.56" />
<GradientStop Color="#D076C5EB" Offset="0.255" />
</LinearGradientBrush>
You can create different styles in a ResourceDictionary and reference your ResourceDictionary in your App.xaml.
Then you can at any time from your code change the style of any element.
Eg:
<ResourceDictionary>
<Style x:Key="Style1BackgroundRed" TargetType="{x:Type Window}">
<Setter Property="Background" Value="Red"/>
</Style>
<Style x:Key="Style2BackgroundGradient" TargetType="{x:Type Window}">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5" x:Name="Sample1" Opacity="0.46">
<GradientStop Color="#8F63BADF" Offset="0.117" />
<GradientStop Color="#9D56B7C9" Offset="0.666" />
<GradientStop Color="#9343C0DB" Offset="0.279" />
<GradientStop Color="#E734ABDA" Offset="0.442" />
<GradientStop Color="#927FE2E2" Offset="0.802" />
<GradientStop Color="#E974CFC1" Offset="0.56" />
<GradientStop Color="#D076C5EB" Offset="0.255" />
</LinearGradientBrush>
</Setter.Value>
</Style>
</ResourceDictionary
In your App.xaml:
<Application.Resources>
<ResourceDictionary Source="/WhateverFolderYouUsedForYouStyles/StyleDictionary.xaml"/>
</Application.Resources>
From your Window code:
public MainWindow()
{
this.Style = (Style)Application.Current.FindResource("Style1BackgroundRed");
}
Same way you can find the other style if you want to change to that one.
I've added a WPF gauge control from this class https://github.com/JohanLarsson/GaugeBox but I'm not sure how to wire the control up to a field of type double degreeOutput declared in the code behind.
My aim is to bind degreeOutput to the gauge control and have the values from degreeOutput update the gauge accordingly.
The process I followed in setting up the control is:
1)Add the control to the user control's xaml layout and declare the namespace
xmlns:gauges="clr-namespace:Gauges;assembly=Gauges"
2)Set the value property to Value="{Binding degreeOutput}"
3)Run application, (but the gauge doesn't update in accordance with the
degree readings being output from degreeOutput)
Does anyone know what step I'm missing in binding the control to my degree field?
This is the xaml layout for the guage control:
<gauges:Gauge x:Name="Gauge"
Grid.Row="0"
Margin="13,18,134,134"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Marker="{Binding Marker}"
Maximum="{Binding Max}"
Minimum="{Binding Min}"
Placement="{Binding Placement}"
ShowLabels="{Binding ShowLabels}"
ShowMajorTicks="{Binding ShowTicks}"
ShowTrack="{Binding ShowTrack}"
TickFrequency="{Binding TickFrequency}"
Value="{Binding degreeOutput}" RenderTransformOrigin="0.5,0.5">
<gauges:Gauge.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="-89.868"/>
<TranslateTransform/>
</TransformGroup>
</gauges:Gauge.RenderTransform>
<gauges:Gauge.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Offset="0.0" Color="Red" />
<GradientStop Offset="0.10" Color="Red" />
<GradientStop Offset="0.10" Color="Green" />
<GradientStop Offset="0.90" Color="Green" />
<GradientStop Offset="0.90" Color="Red" />
<GradientStop Offset="1.0" Color="Red" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</gauges:Gauge.Background>
</gauges:Gauge>
And the code behind where degreeOutput is declared:
private double degreeOutput;
Generally speaking you can't bind to fields in WPF (see the answer to this SO question).
Try changing degreeOutput into a public property. This will be enough to feed the initial value through into the gauge control.
If you also want changes made by the gauge control to feed back into your property then the class containing the property must also implement INotifyPropertyChanged.
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 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.
I am very new to WPF and I am a bit stuck.
I'm trying to create a demo program that displays several embedded win forms applications. I'd like to add a reflection of the form, but most of the existing tutorials I've seen seen for image reflections do not work.
If anyone can point me in the right direction I would really appreciate it.
Here is the relevent XAML - the form control is added to the embedForm stack panel dynamically.
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border Name="inkBorder" Grid.Row="0" VerticalAlignment="Bottom" Margin="20"
Width="400" Height="500" CornerRadius="5" BorderThickness="4">
<Border.BorderBrush>
<LinearGradientBrush SpreadMethod="Reflect" StartPoint="0,0" EndPoint="0.5,0.5">
<LinearGradientBrush.GradientStops>
<GradientStop Color="Gray" Offset="0" />
<GradientStop Color="#eeeeee" Offset="1" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.BorderBrush>
<StackPanel Name="EmbedForm" Height="100" Width="400" ></StackPanel>
</Border>
<Rectangle Grid.Row="1" VerticalAlignment="Top"
Width="{Binding ElementName=inkBorder,Path=ActualWidth}"
Height="{Binding ElementName=inkBorder,Path=ActualHeight}">
<Rectangle.OpacityMask>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.0" Color="#66000000" />
<GradientStop Offset="1.0" Color="#00000000" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Rectangle.OpacityMask>
<Rectangle.Fill>
<VisualBrush
Visual="{Binding ElementName=inkBorder}">
<VisualBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="-1" />
<TranslateTransform Y="1" />
</TransformGroup>
</VisualBrush.RelativeTransform>
</VisualBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
To clarify the question a bit...
I am mainly looking for a way to apply any visual transformations to controls like the WindowsFormHost and the WebBrowser control.
I've found that even simple transformations do not work with these, and I was wondering if there is any trick to treating these like standard visual elements or if it is a lost cause.
Transformations on WindowsFormsHost or WebBrowser won't work, because these controls don't use the WPF rendering engine, they use GDI+.
As far as I know, the only way to achieve what you want would be to capture the control's content as an image, and manually perform the transformation on the image using GDI+ functions... It's quite easy for a simple reflection, but it can get tricky for other kinds of transformation...