We Keep Coding

How should I set the properties of a Toggle Button in WPF?

This is the source code of Toggle Buttons.
<Window.Resources>
<Style TargetType="CheckBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="CheckBox">
<StackPanel Orientation="Horizontal">
<Grid >
<Border Width="45" Height="20" Background="LightGray" CornerRadius="10" Margin="5,0"></Border>
<Border x:Name="button" Height="25" Width="25" CornerRadius="12.5" HorizontalAlignment="Left" ></Border>
</Grid>
<ContentPresenter x:Name="content" Margin="10,0,0,0" Content="{TemplateBinding Content}" VerticalAlignment="Center"/>
</StackPanel>
<ControlTemplate.Resources>
<Storyboard x:Key="right">
<ThicknessAnimation Storyboard.TargetProperty="Margin" Storyboard.TargetName="button" Duration="0:0:0.4" From="0,0,0,0" To="28,0,0,0" >
<ThicknessAnimation.EasingFunction>
<CircleEase EasingMode="EaseOut"/>
</ThicknessAnimation.EasingFunction>
</ThicknessAnimation>
</Storyboard>
<Storyboard x:Key="left">
<ThicknessAnimation Storyboard.TargetProperty="Margin" Storyboard.TargetName="button" Duration="0:0:0.4" From="28,0,0,0" To="0,0,0,0" >
<ThicknessAnimation.EasingFunction>
<CircleEase EasingMode="EaseOut"/>
</ThicknessAnimation.EasingFunction>
</ThicknessAnimation>
</Storyboard>
</ControlTemplate.Resources>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="false">
<Trigger.ExitActions>
<RemoveStoryboard BeginStoryboardName="leftt"></RemoveStoryboard>
<BeginStoryboard Storyboard="{StaticResource right}" x:Name="rightt" ></BeginStoryboard>
</Trigger.ExitActions>
<Setter TargetName="button" Property="Background" Value="#757575"></Setter>
</Trigger>
<Trigger Property="IsChecked" Value="true">
<Trigger.ExitActions>
<RemoveStoryboard BeginStoryboardName="rightt"></RemoveStoryboard>
<BeginStoryboard Storyboard="{StaticResource left}" x:Name="leftt" ></BeginStoryboard>
</Trigger.ExitActions>
<Setter TargetName="button" Property="Background" Value="#20BF55"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<StackPanel VerticalAlignment="Center">
<CheckBox HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="26" Foreground="#0B4F6C" >Option 1</CheckBox>
<CheckBox HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="26" Foreground="#0B4F6C" >Option 2</CheckBox>
<CheckBox HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="26" Foreground="#0B4F6C" >Option 3</CheckBox>
<CheckBox HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="26" Foreground="#0B4F6C" >Option 4</CheckBox>
<CheckBox HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="26" Foreground="#0B4F6C" >Option 5</CheckBox>
</StackPanel>
So what I want to do here is run a command when the toggle button is enabled and run another command when the toggle button is disabled. I am new to WPF. So pls help me to do this and thanks in advance.

Using XAML Behaviors for WPF.
Checkbox example
<CheckBox
xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
Content="Some Choice">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Unchecked">
<i:InvokeCommandAction Command="{Binding UnCheckedCommand}"/>
</i:EventTrigger>
<i:EventTrigger EventName="Checked">
<i:InvokeCommandAction Command="{Binding CheckedCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</CheckBox>
ToggleButton example
<ToggleButton
xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
Content="Some Toggle">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Unchecked">
<i:InvokeCommandAction Command="{Binding UnCheckedCommand}"/>
</i:EventTrigger>
<i:EventTrigger EventName="Checked">
<i:InvokeCommandAction Command="{Binding CheckedCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</ToggleButton>
You are using CheckBoxes, not ToggleButtons.

Different Content (System.Windows.DataTemplates) displayed by ContentControl rather than required Icon

I am working on a combo box with icons.This combo box consist of items which have a name and an icon with the respective type it belongs to.
While my attempt has been successful to a certain extent I am getting a string which says "System.Windows.DataTemplate" to where it's supposed to show the respective icon.
I feel like there is something wrong in the way that I am calling the content controller.

you should use DataTemplate resources to set ContentTemplate property, not Content
<ContentControl Content="{Binding}">
<ContentControl.Style>
<Style TargetType="{x:Type ContentControl}">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type dc:ComboBoxItem}}, Path=DataContext, Converter={StaticResource FormBuilderClient_TypeOfConverter}}" Value="{x:Type models:FileSettingsModel}" >
<Setter Property="ContentTemplate" Value="{StaticResource FileIcon}" />
</DataTrigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type dc:ComboBoxItem}}, Path=DataContext, Converter={StaticResource FormBuilderClient_TypeOfConverter}}" Value="{x:Type models:ServerSettingsModel}" >
<Setter Property="ContentTemplate" Value="{StaticResource ServerIcon}" />
</DataTrigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type dc:ComboBoxItem}}, Path=DataContext, Converter={StaticResource FormBuilderClient_TypeOfConverter}}" Value="{x:Type models:HomeSettingsModel}" >
<Setter Property="ContentTemplate" Value="{StaticResource HomeIcon}" />
</DataTrigger>
</Style.Triggers>
</Style>
</ContentControl.Style>
</ContentControl>
however it should be simpler to use DataTemplates for specific type, rather than x:Key. also define them in ComboBox resources.
<ComboBox.Resources >
<DataTemplate DataType="{x:Type models:FileSettingsModel}">
<Path Stretch="Uniform" Stroke="Black" Fill="Blue" Height="15" Width="25" Data="..."/>
</DataTemplate>
<DataTemplate DataType="{x:Type models:ServerSettingsModel}" >
<Path Stretch="Uniform" Stroke="Black" Fill="OrangeRed" Height="15" Width="25" Data="..."/>
</DataTemplate>
<DataTemplate DataType="{x:Type models:HomeSettingsModel}">
<Canvas>
<Path Canvas.Top="0" Canvas.Left="-2" Height="15" Width="25"
Stretch="Uniform" Stroke="Black" Fill="Green" Data="..."/>
<Path Canvas.Top="7" Canvas.Left="9" Height="16" Width="23"
Stretch="Uniform" Stroke="Black" Fill="Yellow" Data="..."/>
</Canvas>
</DataTemplate>
</ComboBox.Resources>
this way ContentControl should pick correct template without any triggers:
<ContentControl Content="{Binding}"/>

Columns mentioned in DataGrid.Columns is not visible when AutoGenerateColumns=false in CustomControl DataGrid (WPF Datagrid)

I am trying to Create a Custom Control by extending the DataGrid in WPF, but the problem is that when I use this custom control in view and Provide the specific columns by setting the AutoGenerateColumns to False, the columns is not getting generated. In the OnApplyTemplate() when I tried to fetch the Datagrid through the Template it shows as column count as 0, whereas in the view in code behind it shows the no of columns correctly whatever is specified in the xaml.
Where I am wrong or something extra needs to be set for this?
My Custom control code-
public class DataGridControl: DataGrid
{
static DataGridControl()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(DataGridControl), new FrameworkPropertyMetadata(typeof(DataGridControl)));
}
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
DataGrid dataGrid = Template.FindName("PART_DataGrid", this) as DataGrid;
int noOfColumns = dataGrid.Columns.Count// (0 it should come as 3)
}
}
Generic.xaml(inside the Control Template and border)
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
.....
xmlns:local="clr-namespace:Siemens.WPF.DataGridControl">
<LinearGradientBrush x:Key="lightBrushBack" EndPoint="0.5,1" StartPoint="0.5,0">
.....
</LinearGradientBrush>
<LinearGradientBrush x:Key="normalBrushBack" EndPoint="0.5,1" StartPoint="0.5,0">
......
</LinearGradientBrush>
<Style TargetType="{x:Type local:DataGridControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:DataGridControl}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<DataGrid x:Name="PART_DataGrid"
ItemsSource="{TemplateBinding ItemsSource}"
AutoGenerateColumns="{TemplateBinding AutoGenerateColumns}">
<DataGrid.Resources>
<!--A custom DataGridColumnHeadersPresenter is required to "not" display the custom ColumnHeader template as background of the datagrid header-->
<Style TargetType="{x:Type DataGridColumnHeadersPresenter}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeadersPresenter}">
<Grid>
<!--"part_fillercolumnheader" (DataGridColumnHeader type) is removed, and a plain rectangle is placed in its place.-->
<Rectangle Fill="{StaticResource normalBrushBack}" />
<!--Leave the item presenter in its place.-->
<ItemsPresenter x:Name="itemsPresenter" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--End of custom DataGridColumnHeadersPresenter template-->
<!--Custom Column Header Gripper styling-->
<Style x:Key="ColumnHeaderGripperStyle" TargetType="{x:Type Thumb}">
<Setter Property="Width" Value="3"/>
<Setter Property="Foreground" Value="Transparent" />
<Setter Property="Cursor" Value="SizeWE"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Border Padding="{TemplateBinding Padding}" Background="{TemplateBinding Foreground}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--Custom Column Header template to show extra elements in the header-->
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<!--Let's keep the top section grid to contain the DataGridHeaderBorder, and left+right thumbs.-->
<Grid x:Name="fullHeader" Background="{StaticResource normalBrushBack}">
<!--Here is the theme based DataGridHeaderBorder. I've used Aero here.-->
<aero:DataGridHeaderBorder x:Name='HeaderBorder'
SortDirection="{TemplateBinding SortDirection}"
IsHovered="{TemplateBinding IsMouseOver}"
IsPressed="{TemplateBinding IsPressed}"
IsClickable="{TemplateBinding CanUserSort}"
BorderThickness="0,0,1,1"
BorderBrush="{TemplateBinding Foreground}"
Background="Transparent"
SeparatorVisibility="{TemplateBinding SeparatorVisibility}"
SeparatorBrush="#FFC9CACA">
<!--Put 3 elements inside the border: Content of header, a drop down button, and a sort order indicator.-->
<Grid Margin="0,0,0,0">
<Grid.RowDefinitions>
<RowDefinition MinHeight="15" Height="20" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<!--For ContentPresenter-->
<ColumnDefinition Width="*" />
<!--For drop down button-->
<ColumnDefinition Width="23" />
<!--For sort order indicator-->
<ColumnDefinition Width="12" />
</Grid.ColumnDefinitions>
<!--A hidden rectangle is placed to be shown when mouse hovers on the column (to highlight the column.)-->
<Rectangle x:Name="HoverRectangle"
Stretch="Fill"
Grid.ColumnSpan="3"
Fill="{StaticResource lightBrushBack}"
Opacity="0"
StrokeThickness="0" />
<!--Content of the header.-->
<ContentPresenter Grid.Column="0"
Grid.Row="0"
Margin="2,0,0,0"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
Cursor="{TemplateBinding Cursor}" />
<!--A drop down filter button.-->
<Button x:Name="PART_FilterBtn"
HorizontalAlignment="Right"
Command="{Binding FilterClickCommand, RelativeSource={RelativeSource AncestorType={x:Type local:DataGridControl}}}"
CommandParameter="{Binding ElementName=HeaderBorder}"
Grid.Row="0" Cursor="Hand"
Grid.Column="1">
<Button.Template>
<ControlTemplate>
<Path Data="M 0,0 L 1,1 1,3 2,3 2,1 3,0 Z"
Stretch="UniformToFill"
Stroke="{TemplateBinding Foreground}"
Fill="{TemplateBinding Foreground}"
Margin="4,4,0,4"/>
</ControlTemplate>
</Button.Template>
</Button>
<Path x:Name="PART_SortArrow"
Grid.Column="2"
HorizontalAlignment="Center" VerticalAlignment="Center"
Width="8"
RenderTransformOrigin=".5,.5"
Visibility="Visible"
Fill="{TemplateBinding Foreground}"
Stretch="Uniform"
Data="F1 M -5.215,6.099L 5.215,6.099L 0,0L -5.215,6.099 Z">
</Path>
</Grid>
</aero:DataGridHeaderBorder>
<Thumb x:Name="PART_LeftHeaderGripper" HorizontalAlignment="Left" Style="{StaticResource ColumnHeaderGripperStyle}" />
<Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" Style="{StaticResource ColumnHeaderGripperStyle}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="SortDirection" Value="Descending">
<Setter TargetName="PART_SortArrow" Property="RenderTransform">
<Setter.Value>
<RotateTransform Angle="180" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property='IsMouseOver' SourceName="fullHeader" Value='True'>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.20000"
Storyboard.TargetName="HoverRectangle"
Storyboard.TargetProperty="(UIElement.Opacity)"
To='1.0' />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.20000"
Storyboard.TargetName="HoverRectangle"
Storyboard.TargetProperty="(UIElement.Opacity)"
To='0' />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="True">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush options:Freeze="True" StartPoint="0.504,0.03" EndPoint="0.504,1.5">
<GradientStop Offset="0.0" Color="#E3F7FF" />
<GradientStop Offset="0.3" Color="#E3F7FF" />
<GradientStop Offset="0.35" Color="#BCECFE" />
<GradientStop Offset="1.0" Color="#B9E9FC" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" Value="#69BBE3" />
</DataTrigger>
</Style.Triggers>
</Style>
<!--End of custom DataGridColumnHeader template-->
</DataGrid.Resources>
</DataGrid>
<Popup x:Name="PART_PopUp"
Grid.Column="3"
AllowsTransparency="True"
AllowDrop="True"
Width="200"
Height="253"
MinHeight="253"
MaxHeight="253"
PopupAnimation="Slide"
VerticalOffset="-15"
IsOpen="{Binding IsFilterPopUpVisible,RelativeSource={RelativeSource AncestorType=local:DataGridControl}}"
PlacementTarget="{Binding ElementName=PART_FilterBtn}"
StaysOpen="False"
Placement="Mouse" >
<Border Background="White" BorderBrush="DarkGray" BorderThickness="2">
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal" Margin="10,5,0,5">
<Button Margin="10,0,0,0" Name="PART_SelectAllBtn" Command="{Binding SelectAllClickCommand, RelativeSource={RelativeSource AncestorType={x:Type local:DataGridControl}}}" CommandParameter="{Binding ElementName=PART_ListBox}" >
<Button.Template>
<ControlTemplate>
<TextBlock Text="Select All" Foreground="Blue" Cursor="Hand" />
</ControlTemplate>
</Button.Template>
</Button>
<Button Margin="30,0,0,0" Name="PART_SelectNoneBtn" Command="{Binding SelectNoneClickCommand, RelativeSource={RelativeSource AncestorType={x:Type local:DataGridControl}}}" CommandParameter="{Binding ElementName=PART_ListBox}" >
<Button.Template>
<ControlTemplate>
<TextBlock Text="Select None" Foreground="Blue" Cursor="Hand" />
</ControlTemplate>
</Button.Template>
</Button>
</StackPanel>
<TextBox x:Name="PART_TextBox" Width="185" Height="25" Text="" Margin="3,0,3,3"/>
<ListBox x:Name="PART_ListBox"
Height="160"
MaxHeight="160"
MinHeight="160"
Width="185"
SelectionMode="Multiple"
DisplayMemberPath="Value"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
ItemsSource="{Binding FilterCollectionList, RelativeSource={RelativeSource AncestorType={x:Type local:DataGridControl}}}" Margin="0,0,0,5"
ScrollViewer.CanContentScroll="True" ScrollViewer.VerticalScrollBarVisibility="Visible">
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem" >
<CheckBox x:Name="PART_CheckBox" Margin="5,2" IsChecked="{Binding IsSelected}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Checked">
<i:InvokeCommandAction Command="{Binding CheckedCommand, RelativeSource={RelativeSource AncestorType={x:Type local:DataGridControl}}}"/>
</i:EventTrigger>
<i:EventTrigger EventName="Unchecked">
<i:InvokeCommandAction Command="{Binding CheckedCommand, RelativeSource={RelativeSource AncestorType={x:Type local:DataGridControl}}}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<ContentPresenter />
</CheckBox>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
<StackPanel Orientation="Horizontal" Margin="0,0,0,15" HorizontalAlignment="Center">
<Button x:Name="PART_OkBtn" Height="22" Width="70" Content="Ok"
IsEnabled="{Binding IsOkButtonEnabled, RelativeSource={RelativeSource AncestorType={x:Type local:DataGridControl}}}"
Command="{Binding OkButtonClickCommand, RelativeSource={RelativeSource AncestorType={x:Type local:DataGridControl}}}"
/>
<Button x:Name="PART_CancelBtn" Height="22" Width="70" Content="Cancel" Margin="5,0,0,0"
Command="{Binding CancelButtonClickCommand, RelativeSource={RelativeSource AncestorType={x:Type local:DataGridControl}}}"
/>
</StackPanel>
</StackPanel>
</Border>
</Popup>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
MainWindow.xaml
<dataGrid:DataGridControl x:Name="dataGridControl" AutoGenerateColumns="False">
<dataGrid:DataGridControl.Columns>
<DataGridTextColumn Header="RollNo" Binding="{Binding RollNo}" />
<DataGridTextColumn Header="Name" Binding="{Binding Name}" />
<DataGridTextColumn Header="FirstName" Binding="{Binding FirstName}" />
</dataGrid:DataGridControl.Columns>
</dataGrid:DataGridControl>
MainWindow.xaml.cs
public MainWindow()
{
InitializeComponent();
List<Student> studList =
new List<Student>() { new Student { RollNo = 1, Name = "Full Name
1", FirstName = "FirstName1", LastName="LastName1", Address =
"Pune1", PinCode= "411057"},};
dataGridControl.ItemsSource = studList;
int noOfColumns = dataGridControl.Columns.Count; //(showing 3 as expected)
}

Create property for custom control
#region GridColumns
private ObservableCollection<DataGridColumn> _gridColumns;
public ObservableCollection<DataGridColumn> GridColumns
{
get => _gridColumns;
}
#endregion GridColumns
Add columns from created property using method OnApplyTemplate
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
if (!AutoGenerateColumns)
{
var grid = GetTemplateChild("PART_Grid") as DataGrid;
foreach (var column in _gridColumns)
grid.Columns.Add(column);
}
}
Change MainWindow.xaml
<dataGrid:DataGridControl x:Name="dataGridControl" AutoGenerateColumns="False">
<dataGrid:DataGridControl.GridColumns>
<DataGridTextColumn Header="RollNo" Binding="{Binding RollNo}" />
<DataGridTextColumn Header="Name" Binding="{Binding Name}" />
<DataGridTextColumn Header="FirstName" Binding="{Binding FirstName}" />
</dataGrid:DataGridControl.GridColumns>
</dataGrid:DataGridControl>

Changing ellipse fill color inside a button

I want to change the ellipse fill color to green when the button is enabled.
<Button x:Name="btn_Kaart2" Grid.Column="1" Grid.Row="2" IsEnabled="False">
<Button.Template>
<ControlTemplate>
<Ellipse x:Name="ellipse_2"
Height="35"
Stroke="Black"
Fill="Red"
Margin="-300,440,0,0"/>
</ControlTemplate>
</Button.Template>
</Button>
Normally I would use ellipse_2.Fill = "Color" but that doesn't work, program can't find ellipse_2

You can use a databinding with RelativeSource to get this without any additional code
<Button x:Name="btn_Kaart2" Grid.Column="1" Grid.Row="2" IsEnabled="False">
<Button.Template>
<ControlTemplate>
<Ellipse x:Name="ellipse_2"
Height="35"
Margin="-300,440,0,0"
Stroke="Black">
<Ellipse.Style>
<Style TargetType="Ellipse">
<Style.Triggers>
<DataTrigger Binding="{Binding IsEnabled, RelativeSource={RelativeSource AncestorType=Button}}" Value="false">
<Setter Property="Fill" Value="red"></Setter>
</DataTrigger>
<DataTrigger Binding="{Binding IsEnabled, RelativeSource={RelativeSource AncestorType=Button}}" Value="true">
<Setter Property="Fill" Value="green"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Ellipse.Style>
</Ellipse>
</ControlTemplate>
</Button.Template>
</Button>
It's important that the Ellipse itself has no Fill attribute.
You can try this by changing the IsEnabled value in the *.xaml and the color should change immediately in the designer.

Diagram contents reference canvas to top

I am making diagram (with help of the google of course). Simple nice working diagram, but I have little issues.
When I have referenced to Canvas.Top everything works nice, just Y axis is upside down .. so Y is getting from 0 to positive when moving mouse down and I like it that positive/higher value is at top and 0 is at bottom. When I reference Canvas to Bottom my points/nodes works fine only connectors/lines are still reference to "top".
How to add also the connectors/lines to Canvas.Bottom referencing.
Here is my XAML code:
<Grid>
<Grid.Resources>
<BooleanToVisibilityConverter x:Key="BoolToVisibilityConverter"/>
<CompositeCollection x:Key="DiagramCol">
<CollectionContainer Collection="{Binding DataContext.DiagramConnectors, Source={x:Reference diagramview}}"/>
<CollectionContainer Collection="{Binding DataContext.DiagramNodes, Source={x:Reference diagramview}}"/>
</CompositeCollection>
<!--NODES-->
<DataTemplate DataType="{x:Type local:DiagramNode}">
<Canvas Name="dragTarget">
<Thumb DragDelta="Thumb_Drag" DragStarted="Thumb_DragStarted" DragCompleted="Thumb_DragCompleted">
<Thumb.Template>
<ControlTemplate TargetType="Thumb">
<Canvas Margin="-10,-10,10,10">
<Ellipse Height="17" Width="17" Stroke="Black" StrokeThickness="1" Fill="Yellow"
x:Name="Ellipse"/>
<TextBlock Canvas.Top="-20" Canvas.Left="-40" Width="100"
TextAlignment="Center" Text="{Binding Name}" FontWeight="Bold"
IsHitTestVisible="False"
Visibility="{Binding DataContext.ShowNames,
RelativeSource={RelativeSource FindAncestor, AncestorType=Window},
Converter={StaticResource BoolToVisibilityConverter}}"/>
<TextBlock Canvas.Left="30" Canvas.Top="10"
Text="{Binding X, StringFormat='{}X = {0}'}"
IsHitTestVisible="False"
Visibility="Visible" x:Name="XText"/>
<TextBlock Canvas.Left="30" Canvas.Top="25"
Text="{Binding Xmeaning}"
IsHitTestVisible="False"
Visibility="Visible" x:Name="timeText"/>
<TextBlock Canvas.Left="30" Canvas.Top="40"
Text="{Binding Y, StringFormat='{}Y = {0}'}"
IsHitTestVisible="False"
Visibility="Visible" x:Name="YText"/>
<TextBlock Canvas.Left="30" Canvas.Top="55"
Text="{Binding Ymeaning}"
IsHitTestVisible="False"
Visibility="Visible" x:Name="luxText"/>
</Canvas>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBoxItem}}}" Value="True">
<Setter TargetName="Ellipse" Property="Fill" Value="Red"/>
</DataTrigger>
<Trigger Property="IsDragging" Value="True">
<Setter TargetName="Ellipse" Property="Fill" Value="Green"/>
</Trigger>
<DataTrigger Binding="{Binding DataContext.ShowAllCoordinates, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}" Value="True">
<Setter TargetName="XText" Property="Visibility" Value="Visible"/>
<Setter TargetName="YText" Property="Visibility" Value="Visible"/>
</DataTrigger>
<DataTrigger Binding="{Binding }" Value="True">
<Setter TargetName="Ellipse" Property="StrokeThickness" Value="2"/>
<Setter TargetName="Ellipse" Property="Stroke" Value="Red"/>
<Setter TargetName="Ellipse" Property="Fill" Value="White"/>
</DataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBoxItem}}}" Value="True"/>
<Condition Binding="{Binding DataContext.ShowCurrentCoordinates, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}" Value="True"/>
</MultiDataTrigger.Conditions>
<Setter TargetName="XText" Property="Visibility" Value="Visible"/>
<Setter TargetName="YText" Property="Visibility" Value="Visible"/>
</MultiDataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Thumb.Template>
</Thumb>
</Canvas>
</DataTemplate>
<!--CONNECTORS-->
<DataTemplate DataType="{x:Type local:DiagramConnector}">
<Line Stroke="OrangeRed" StrokeThickness="3"
X1="{Binding Start.X}" Y1="{Binding Start.Y}"
X2="{Binding End.X}" Y2="{Binding End.Y}" x:Name="Line"/>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Start}" Value="{x:Null}">
<Setter TargetName="Line" Property="Visibility" Value="Collapsed"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</Grid.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20"/>
<ColumnDefinition Name="column1" Width="*"/>
<ColumnDefinition Width="20"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="23" />
<RowDefinition Name="row1" Height="*"/>
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<TextBlock Margin="2" x:Name="tbTitle" Grid.Column="1" Grid.Row="0" RenderTransformOrigin="0.5,0.5" FontSize="14" FontWeight="Bold" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" TextAlignment="Center" Text="{Binding GraphAddress}"/>
<TextBlock Margin="2" x:Name="tbXlabel" Grid.Column="1" Grid.Row="3" RenderTransformOrigin="0.5,0.5" TextAlignment="Center" Text="{Binding Xlabellabel}" />
<TextBlock Margin="2" x:Name="tbYlabelLeft" Grid.Column="0" Grid.Row="1" RenderTransformOrigin="0.5,0.5" TextAlignment="Center" Text="{Binding Ylabelleftlabel}">
<TextBlock.LayoutTransform>
<RotateTransform Angle="-90"/>
</TextBlock.LayoutTransform>
</TextBlock>
<TextBlock Margin="2" x:Name="tbYlabelRight" Grid.Column="2" Grid.Row="1" RenderTransformOrigin="0.5,0.5" TextAlignment="Center" Text="{Binding Ylabelrightlabel}">
<TextBlock.LayoutTransform>
<RotateTransform Angle="-90"/>
</TextBlock.LayoutTransform>
</TextBlock>
<ListBox SelectedItem="{Binding SelectedObject}"
PreviewMouseMove="ListBox_PreviewMouseMove"
PreviewMouseDown="ListBox_PreviewMouseDown"
PreviewMouseRightButtonDown="ListBox_PreviewMouseRightButtonDown"
PreviewMouseLeftButtonDown="ListBox_PreviewLeftMouseDown"
Margin="10,10,10,10"
Grid.Column="1"
Grid.Row="1"
x:Name="LstBox">
<ListBox.Template>
<ControlTemplate>
<Border>
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1" Opacity=".3">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="LightGray" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
<Border>
<Border.Background>
<VisualBrush TileMode="Tile"
Viewport="0,0,36,36" ViewportUnits="Absolute"
Viewbox="0,0,20,20" ViewboxUnits="Absolute">
<VisualBrush.Visual>
<Rectangle Stroke="Darkgray" StrokeThickness="0.5" Height="24" Width="24"
StrokeDashArray="5 3"/>
</VisualBrush.Visual>
</VisualBrush>
</Border.Background>
<ItemsPresenter/>
</Border>
</ScrollViewer>
</Border>
</ControlTemplate>
</ListBox.Template>
<ListBox.ItemsSource>
<StaticResource ResourceKey="DiagramCol"/>
</ListBox.ItemsSource>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<Canvas IsItemsHost="True" Background="#01FFFFFF"
Height="{Binding AreaHeight}" Width="{Binding AreaWidth}"
VerticalAlignment="Top" HorizontalAlignment="Left"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Canvas.Left" Value="{Binding X}"/>
<Setter Property="Canvas.Top" Value="{Binding Y}"/>
<Setter Property="FocusVisualStyle" Value="{StaticResource EmptyFocusVisualStyle}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<ContentPresenter x:Name="Content"/>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Content" Property="Effect">
<Setter.Value>
<DropShadowEffect Color="Gray" ShadowDepth="4" BlurRadius="10"/>
</Setter.Value>
</Setter>
</Trigger>
<DataTrigger Binding="{Binding IsNew}" Value="True">
<Setter Property="Opacity" Value=".5"/>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
</Grid>
</Grid>
So when I reference this line:
<Setter Property="Canvas.Top" Value="{Binding Y}"/>
To:
<Setter Property="Canvas.Bottom" Value="{Binding Y}"/>
then points/nodes works fine. Only the lines are the issue. In the code I like to add datatemplate of line to canvas bottom referencing, but how?
Please help. If any question please ask and if anything missing what you need, please say :)