We Keep Coding

ControlTemplate Opacity not displayed like I want it to

I have a Style defined for my DataGridCell
<Style x:Key="MYDGCellStyle" TargetType="{x:Type DataGridCell}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Template" Value="{DynamicResource MYDGCellControlTemplate}" />
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsReadOnly}" Value="True">
<Setter Property="Background">
<Setter.Value>
<SolidColorBrush Color="Gray" Opacity="0.3" />
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
<ControlTemplate x:Key="MYDGCellControlTemplate" TargetType="{x:Type DataGridCell}">
<Grid x:Name="CellGrid">
<Border Background="{TemplateBinding Background}">
<ContentPresenter VerticalAlignment="Center" Margin="4,0,6,0" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="true">
<Setter Property="Background" TargetName="CellGrid">
<Setter.Value>
<LinearGradientBrush Opacity="2" StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Offset="0" Color="Fuchsia" />
<GradientStop Offset="0.2" Color="Transparent" />
<GradientStop Offset="0.8" Color="Transparent" />
<GradientStop Offset="1" Color="Fuchsia" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
During Runtime I add additional Triggers for specific Columns like this in my Code
Style Sty = null;
if (Sty == null)
{
Sty = new Style(typeof(DataGridCell));
Sty.BasedOn = (Style)Application.Current.TryFindResource("MYDGCellStyle");
}
DataTrigger t = new DataTrigger();
t.Binding = new Binding("ProductionStatus");
t.Value = "I";
Setter s = new Setter();
s.Property = DataGridCell.BackgroundProperty;
s.Value = new SolidColorBrush(Colors.Gold) { Opacity = 0.5 };
t.Setters.Add(s);
Sty.Triggers.Add(t);
DGC.CellStyle = Sty;
But if I focus one of the Cells where a DataTrigger I added in my Code is triggerd the Color isn't displayed correctly.
How can I display the fuchsia Sides in front of the Gold Background?
Grey Cell Focused:
Gold Cell Focused:
UPDATE
<ControlTemplate x:Key="MYDGCellControlTemplate" TargetType="{x:Type DataGridCell}">
<Grid>
<Grid Grid.ZIndex="99" x:Name="CellGrid"/>
<Border Grid.ZIndex="98" Background="{TemplateBinding Background}">
<ContentPresenter VerticalAlignment="Center" Margin="4,0,6,0" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="true">
<Setter Property="Background" TargetName="CellGrid">
<Setter.Value>
<LinearGradientBrush Opacity="2" StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Offset="0" Color="Fuchsia" />
<GradientStop Offset="0.1" Color="#00FF00FF" />
<GradientStop Offset="0.9" Color="#00FF00FF" />
<GradientStop Offset="1" Color="Fuchsia" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>

Your problem might be, that you apply a golden color brush above the fuchsia edges, so they get tinted by 50% of gold.
s.Value = new SolidColorBrush(Colors.Gold) { Opacity = 0.5 };
Additionally you should be aware that using Transparent in XAML means "white with no opacity", so if you want to fade out funchsia you should not fade to transparent white, but to transparent fuchsia instead.
White: #FFFFFFFF
Transparent: #00FFFFFF
Fuchsia opaque: #FFFF00FF
Fuchsia transparent: #00FF00FF
To enforce the z-order you could use an additional container around the item given and apply the status here "during runtime". Anyway this will not be an MVVM approach.
The better way might be to define a custom template-parameter (bool IsSpecificColumn) in your XAML, which will be set in your code "during runtime". Using MultiTrigger you can also define a third state for gold+fuchsia.
If you have to combine even more states you should let WPF do the job and use the approach with the boxed containers mentioned above together with template-parameters.

Try creating a new "IsFocused" trigger in your new style(I ProductionStatus)like this:
<Trigger Property="IsFocused" Value="true">
<Setter Property="Background" TargetName="CellGrid">
<Setter.Value>
<LinearGradientBrush Opacity="2" StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Offset="0" Color="Fuchsia" />
<GradientStop Offset="0.2" Color="Gold" />
<GradientStop Offset="0.8" Color="Gold" />
<GradientStop Offset="1" Color="Fuchsia" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
I know you are doing it on code behind, but I think you'll understand me(easyer to copy-paste).

How to display tooltip value in WPF?

In WPF, I created a rectangle like this:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:s="clr-namespace:DiagramDesigner"
xmlns:c="clr-namespace:DiagramDesigner.Controls"
x:Class="GeoOvwSample.RectangleGeometryRoundedCornerExample"
>
<Brush x:Key="ItemStroke">#FFD69436</Brush>
<LinearGradientBrush x:Key="ItemBrush" StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStop Color="#FAFBE9" Offset="0" />
<GradientStop Color="Orange" Offset="1" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<Brush x:Key="ItemStroke1">#ACADCD</Brush>
<LinearGradientBrush x:Key="ItemBrush1" StartPoint="0,0" EndPoint="0,1" >
<GradientStop Color="#FEFEFE" Offset="0"/>
<GradientStop Color="#BDBEDE" Offset="1"/>
</LinearGradientBrush>
<Style x:Key="FlowChartRectangleStyle" TargetType="Rectangle">
<Setter Property="Fill" Value="{StaticResource ItemBrush}"/>
<Setter Property="Stroke" Value="{StaticResource ItemStroke}"/>
<Setter Property="StrokeThickness" Value="1"/>
<Setter Property="StrokeLineJoin" Value="Round"/>
<Setter Property="Stretch" Value="Fill"/>
<Setter Property="IsHitTestVisible" Value="False"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
</Style>
<Style x:Key="Data" TargetType="Rectangle" BasedOn="{StaticResource FlowChartRectangleStyle}">
</Style>
<Style x:Key="Data_DragThumb" TargetType="Rectangle" BasedOn="{StaticResource Data}">
<Setter Property="IsHitTestVisible" Value="true"/>
<Setter Property="Height" Value="300"/>
<Setter Property="Width" Value="200"/>
<Setter Property="Tag" Value="DataShape" />
</Style>
<s:Toolbox x:Key="FlowChartStencils" ItemSize="100,90" SnapsToDevicePixels="True"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ItemsControl.Items>
<Rectangle Style="{StaticResource Data}" ToolTip="DataTest" StrokeThickness="2">
<s:DesignerItem.DragThumbTemplate>
<ControlTemplate>
<Rectangle Style="{StaticResource Data_DragThumb}" x:Name="DataShape" Tag="DataShapeTag" />
</ControlTemplate>
</s:DesignerItem.DragThumbTemplate>
</Rectangle>
</ItemsControl.Items>
</s:Toolbox>
</ResourceDictionary>
This displays a rectangle on the panel, and I can select and drag it in my GUI. Now I want to create a kind of textblock on the shape so that it displays its tooltip value, and thus the tooltip value appears together with the shape all together. I tried to create the textblock and bind it with the rectangle shape but somehow my code is not correct. How to do it? Or is there a simpler method? Thank you.

You can simply add the TextBlock into any container control with (but after) the Rectangle element and then data bind the value of the Rectangle.ToolTip to the TextBlock.Text property. Try something like this:
<StackPanel>
<Rectangle Name="Rectangle" Style="{StaticResource Data}" ToolTip="DataTest"
StrokeThickness="2" />
<TextBlock Text="{Binding ToolTip, ElementName=Rectangle}" />
</StackPanel>

change property of a control in an extended style wpf

I have this style for a button:
<Style x:Key="ButtonStyle1" TargetType="{x:Type local:ButtonExt}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:ButtonExt}">
<Grid Name="grid" Margin="0,0,0,0">
<Rectangle Name="rectangle" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0.5">
<GradientStop Offset="1" Color="{DynamicResource button_background_gradient1}" />
<GradientStop Offset="0" Color="#FF004F96" />
</LinearGradientBrush>
</Rectangle.Fill>
<Rectangle.Effect>
<DropShadowEffect BlurRadius="3" Opacity="0.4" ShadowDepth="6" />
</Rectangle.Effect>
</Rectangle>
<Rectangle Width="0.7" Margin="0,0,43,1" HorizontalAlignment="Right" VerticalAlignment="Stretch" Stroke="#FF434343">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0.5">
<GradientStop Offset="0" Color="#FFF7F7F7" />
<GradientStop Offset="1" Color="#FFD6D6D6" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True" />
<Trigger Property="IsDefaulted" Value="True" />
<Trigger Property="Button.IsPressed" Value="True">
<Setter TargetName="grid" Property="Margin" Value="2,2,-1,-1" />
<Setter TargetName="rectangle" Property="Effect" Value="{x:Null}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True"/>
<Trigger Property="IsPressed" Value="True" />
<Trigger Property="IsEnabled" Value="False"/>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and another style based on this style:
<Style x:Key="ButtonStyle2" BasedOn="{StaticResource ButtonStyle1}">
<Setter Property="Rectangle.Fill">
<Setter.Value>
In the first style, I have two rectangles. In the second style, which is based on style 1, I would like to change the property of just one rectangle (which I named it "rectangle"). How can I do that?

Expose a property for the rectangle's fill in the ButtonEx class.
In the template, use {TemplateBinding} to bind the Fill to this new property.
In the derived style, set a new value to this property.

Treeview Item Background overriding Highlight Brush

I'm trying to setup a treeview control with a rounded border and a background for every treeview item. However while I have also overridden the x:Static SystemColors.HighlightBrushKey with a linear gradient.
However while doing this I noticed that if I set a background to the treeview item, my highlightbrushkey does not get applied anymore. Can you please tell me how to achieve this?
Below is my code:
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Page.Resources>
<LinearGradientBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFEF" Offset="0"/>
<GradientStop Color="#FFF7D3" Offset="0.2580"/>
<GradientStop Color="#FFEFB2" Offset="0.3870"/>
<GradientStop Color="#FFEFB2" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" x:Key="TreeViewItemBackground">
<GradientStop Color="#FFFAFFFF" Offset="0"/>
<GradientStop Color="#FFFAFAFA" Offset="0.2580"/>
<GradientStop Color="#FFF7F7F7" Offset="0.3870"/>
<GradientStop Color="#FFF4F4F4" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="{x:Static SystemColors.ControlBrushKey}" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFF8F8F8" Offset="0"/>
<GradientStop Color="#FFE5E5E5" Offset="1"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Black" />
<SolidColorBrush x:Key="{x:Static SystemColors.ControlTextBrushKey}" Color="Black" />
<TreeView x:Name="GroupView" ItemsSource="{Binding}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" MinWidth="150" Margin="3">
<TreeView.Resources>
<HierarchicalDataTemplate DataType="{x:Type GridSplitterTextTrim:Group}" ItemsSource="{Binding Items}">
<Border BorderBrush="#FFEAEEE8" BorderThickness="1" CornerRadius="3" Margin="-1" Background="{StaticResource TreeViewItemBackground}" >
<StackPanel Orientation="Horizontal" Background="Transparent" Margin="1">
<TextBlock Text="{Binding Path=Name}" TextTrimming="WordEllipsis" Margin="3" MaxWidth="150" Width="{Binding ActualWidth, ElementName=GroupView, Converter={StaticResource TreeViewWidthConverter}}" ToolTip="{Binding Name}" />
</StackPanel>
</Border>
</HierarchicalDataTemplate>
<DataTemplate DataType="{x:Type GridSplitterTextTrim:Entry}" >
<Border BorderBrush="#C0C0C0" BorderThickness="1" CornerRadius="3" Margin="-1">
<StackPanel Orientation="Horizontal" Background="Transparent" Margin="1">
<TextBlock Text="{Binding Path=Name}" TextTrimming="WordEllipsis" Margin="3" MaxWidth="132" Width="{Binding ActualWidth, ElementName=GroupView, Converter={StaticResource TreeViewWidthConverter}}" ToolTip="{Binding Name}" />
</StackPanel>
</Border>
</DataTemplate>
</TreeView.Resources>
<TreeView.ItemContainerStyle>
<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Margin" Value="2"/>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<!-- <Setter Property="BorderBrush" Value="#adc6e5"/>-->
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="True"/>
<Condition Property="IsSelectionActive" Value="False"/>
</MultiTrigger.Conditions>
<Setter Property="BorderBrush" Value="LightGray"/>
</MultiTrigger>
</Style.Triggers>
<Style.Resources>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="3"/>
</Style>
</Style.Resources>
</Style>
</TreeView.ItemContainerStyle>
</TreeView>
</Page.Resources>
</Page>
Couple of things to note:
I use a converter to set the width of the textblock. This is to achieve the text trimming.
For the sake of this post, I have set one of my data templates without a background color and it just works fine with the highlighting, where in when I set the backgound in the first template it does't highlight with the highlight brush.
Thanks in advance,
-Mike

You're DataTemplate's background is drawing on top of the container's selection. This is why it is hiding the selection color. You could add a DataTrigger to your DataTemplate to clear the background when the item is selected:
<DataTemplate>
<Border x:Name="bg" Background="Red">
...
</Border>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType={x:Type TreeViewItem}}}"
Value="True">
<Setter TargetName="bg" Property="Background" Value="{x:Null}" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>

Chrome-like close button - how to style the cross correctly?

I got these styles:
<LinearGradientBrush x:Key="ClickGradient">
<GradientStop Color="#FF5C2014"/>
<GradientStop Color="#FFB0452C"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="HoverGradient">
<GradientStop Color="#FF757474"/>
<GradientStop Color="#FF918F8F"/>
</LinearGradientBrush>
<ControlTemplate x:Key="CloseButton" TargetType="{x:Type Button}">
<Grid x:Name="MainGrid">
<Rectangle
x:Name="MainRectangle"
Fill="#00000000"
RadiusX="5"
RadiusY="5"/>
<ContentPresenter
x:Name="Presenter"
HorizontalAlignment="Center"
VerticalAlignment="Center"
TextBlock.Foreground="#BB225588"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="MainRectangle" Property="Fill" Value="{StaticResource HoverGradient}"/>
<Setter TargetName="MainRectangle" Property="Stroke" Value="Transparent"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="MainRectangle" Property="Fill" Value="{StaticResource ClickGradient}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
and this code:
<Button Width="15" Height="15" Grid.Column="1" Template="{StaticResource CloseButton}" x:Name="ClsBtn">
<Button.Content>
<Path x:Name="Cross" Data="M0,0 L1,1 M0,1 L1,0" Stretch="Fill" Stroke="Black" StrokeThickness="2" Width="8" Height="8" />
</Button.Content>
</Button>
This creates a pretty neat close button. Not exactly like Chrome's, but somehow similar. What I don't get is: How can I let the Stroke of the Path react to the hovering and click-triggers of the button?
The cross should be white if the button is clicked or the mouse is hovering over the button. It would be great if this could be accomplished in a style...
//Edit:
To clarify things:
As you can see, the "X" changes it color from gray in a normal or inactive state to white in a hovered or click state (read: The mouse is over the button, not over the "X"). I'd like to be able to do the same with my path-element.

You can add the path to the content presenter and then add your setters as needed. The Xaml below changes the cross to white on the hover and click events pretty much in line with your images...
<LinearGradientBrush x:Key="ClickGradient">
<GradientStop Color="#FF5C2014"/>
<GradientStop Color="#FFB0452C"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="HoverGradient">
<GradientStop Color="#FF757474"/>
<GradientStop Color="#FF918F8F"/>
</LinearGradientBrush>
<ControlTemplate x:Key="CloseButton" TargetType="{x:Type Button}">
<Grid x:Name="MainGrid">
<Rectangle
x:Name="MainRectangle"
Fill="#00000000"
RadiusX="5"
RadiusY="5"/>
<ContentPresenter
x:Name="Presenter"
HorizontalAlignment="Center"
VerticalAlignment="Center"
TextBlock.Foreground="#BB225588"/>
<Path x:Name="Cross" Data="M0,0 L1,1 M0,1 L1,0" Stretch="Fill"
Stroke="Black" StrokeThickness="2" Width="8" Height="8" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="MainRectangle" Property="Fill" Value="{StaticResource HoverGradient}"/>
<Setter TargetName="MainRectangle" Property="Stroke" Value="Transparent"/>
<Setter TargetName="Cross" Property="Stroke" Value="White" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="MainRectangle" Property="Fill" Value="{StaticResource ClickGradient}"/>
<Setter TargetName="Cross" Property="Stroke" Value="White" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>