I have a code that allows you to create objects on the screen, there is a panel of buttons, clicking on the button you create an image / object on canvas, I can not get another image to be placed in Canvas so that several images can be displayed, link to a previously created question: WPF C # Display objects (2d Map)
<Thumb.Template>
<ControlTemplate TargetType="Thumb">
<Canvas>
<Image x:Name="injWell" Source="/Resources/injectionWell.png"
HorizontalAlignment="Center" VerticalAlignment="Center"
Width="40" Height="40"
Stretch="Fill" StretchDirection="Both" IsHitTestVisible="False"/>
<Image x:Name="injWellNot" Source="/Resources/injectionWellNot.png"
HorizontalAlignment="Center" VerticalAlignment="Center"
Width="40" Height="40"
Stretch="Fill" StretchDirection="Both" IsHitTestVisible="False"/>
<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="Collapsed" x:Name="XText"/>
<TextBlock Canvas.Left="30" Canvas.Top="25"
Text="{Binding Y, StringFormat='{}Y = {0}'}"
IsHitTestVisible="False"
Visibility="Collapsed" x:Name="YText"/>
</Canvas>
<ControlTemplate.Triggers>
<Trigger Property="IsDragging" Value="True">
<Setter TargetName="injWell" Property="Source" Value="/Resources/injectionWell.png"/>
<Setter TargetName="injWellNot" Property="Source" Value="/Resources/injectionWellNot.png"/>
</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>
<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>
</DataTemplate>
The key thing to realize here is that you need to render a list of items, and in MVVM you do that with an ItemsControl. (You could also use a ListView, but they implement additional functionality that you almost certainly wont want, like item selection etc). Ultimately you want all of your graphics objects to be displayed on a Canvas, so you need to override the ItemsPanel property and put one there inside a ItemsPanelTemplate. Each element then needs to be positioned on the Canvas, so you'll need to set the ItemContainerStyle and set the Canvas.Left and Canvas.Top properties there (a common mistake is to do it on the elements themselves, but they get placed into a container so you have to do it on that instead). Put all this together and you'll have something that looks like this:
<ItemsControl ItemsSource="{Binding MyGraphicsViewModels}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style TargetType="{x:Type ContentPresenter}">
<Setter Property="Canvas.Left" Value="{Binding X}" />
<Setter Property="Canvas.Top" Value="{Binding Y}" />
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
So MyGraphicsViewModels will typical be a list in your view model of some base class you've created (e.g. BaseGraphicsViewModel) and then you'll subclass that into all the different types of graphics items you want to draw. The final piece of the puzzle is to then add DataTemplates to specify how you want each of your view model types to be represented in the view:
<DataTemplate DataType="{x:Type vm:DerivedGraphicsObjectViewModel}">
<Rectangle Fill="Blue" Width="64" Height="64" />
</DataTemplate>
For a more comprehensive example, which uses Triggers instead of DataTemplates, check out my answer to this SO question from the past.
Related
I'm working with a telerik RadCartesianChart. And I'm supposed to show a tooltip which conveys the information about the series inide the chart (such as the date, the value, the title of the series). I was able to show the date and value which were already bound in the CategoryPath and the ValuePath of the chart respectively. But I have no clue how to show the title of the series which belongs to the same data source but not bound by either the CategoryPath or the ValuePath.
Below is what I have done so far.
<telerik:RadCartesianChart x:Name="chart" Margin="0,10,0,36" Width="auto" Grid.RowSpan="2">
<telerik:RadCartesianChart.Behaviors>
<telerik:ChartTooltipBehavior HorizontalOffset="-11" VerticalOffset="-50" />
</telerik:RadCartesianChart.Behaviors>
<telerik:RadCartesianChart.TooltipTemplate>
<DataTemplate>
<Grid>
<Border Background="White" BorderBrush="Black" BorderThickness="1" Padding="5" CornerRadius="3">
<StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Category}" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Value, StringFormat=\{0:N2\}}" />
</StackPanel>
</StackPanel>
</Border>
</Grid>
</DataTemplate>
</telerik:RadCartesianChart.TooltipTemplate>
<telerik:RadCartesianChart.HorizontalAxis>
<telerik:DateTimeCategoricalAxis
x:Name="datetimeAxis"
LabelFitMode="MultiLine"
LabelFormat="{Binding Tab.CurrentPoC.LabelFormat}"
LabelInterval="1"
LabelOffset="0"
LabelRotationAngle="270"
LabelStyle="{DynamicResource LabelStyle}"
LastLabelVisibility="Visible"
LineDashArray="1 1"
LineStroke="{DynamicResource CouleurTexte}"
LineThickness="1"
MajorTickInterval="1"
MajorTickLength="1"
PlotMode="OnTicks"
SmartLabelsMode="SmartStep"
TickThickness="5"
ZIndex="0" Height="5" />
</telerik:RadCartesianChart.HorizontalAxis>
<telerik:RadCartesianChart.VerticalAxis>
<telerik:LinearAxis Foreground="White" LastLabelVisibility="Visible" HorizontalLocation="Right"/>
</telerik:RadCartesianChart.VerticalAxis>
<telerik:RadCartesianChart.Grid>
<telerik:CartesianChartGrid MajorLinesVisibility="Y" />
</telerik:RadCartesianChart.Grid>
<telerik:RadCartesianChart.Resources>
<Style x:Key="AxisLineStyle" TargetType="{x:Type telerik:LinearAxis}" >
<Setter Property="Foreground" Value="{Binding ColorName, Mode=TwoWay, Converter={StaticResource NVarToBrushConverter}}"/>
<Setter Property="Background" Value="{Binding ColorName, Mode=TwoWay, Converter={StaticResource NVarToBrushConverter}}"/>
</Style>
<DataTemplate x:Key="ellipseTemplate">
<Ellipse Height="10" Width="10" Fill="{Binding Converter={StaticResource PaletteConverter}}"/>
</DataTemplate>
<DataTemplate x:Key="rectangleTemplate">
<Rectangle Height="10" Width="10" Fill="{Binding Converter={StaticResource PaletteConverter}}" />
</DataTemplate>
<DataTemplate x:Key="triangleTemplate">
<Polygon Points="10,5 5,10 15,10 10,3" Stroke="GreenYellow" StrokeThickness="2" Fill="{Binding Converter={StaticResource PaletteConverter}}"/>
</DataTemplate>
<!--<DataTemplate x:Key="+Template">
<Rectangle Height="10" Width="10" Fill="{Binding Converter={StaticResource PaletteConverter}}" />
</DataTemplate>
<DataTemplate x:Key="xTemplate">
<Rectangle Height="10" Width="10" Fill="{Binding Converter={StaticResource PaletteConverter}}" />
</DataTemplate>-->
<Style TargetType="telerik:LineSeries" BasedOn="{StaticResource LineSeriesStyle}">
<Setter Property="LegendSettings" Value="{Binding Converter={StaticResource ChartViewLegendSettingsValueConverter}}"/>
<Setter Property="ShowLabels" Value="False"/>
<Setter Property="Stroke" Value="{Binding ColorName, Mode=TwoWay, Converter={StaticResource NVarToBrushConverter}}"/>
<Setter Property="VerticalAxis">
<Setter.Value>
<telerik:LinearAxis ElementBrush="{Binding Tab.CurrentPoC.LineSeriesColor}" HorizontalLocation="Left"/>
</Setter.Value>
</Setter>
<Setter Property="PointTemplateSelector" Value="{StaticResource templateSelector}"/>
</Style>
<Style TargetType="telerik:BarSeries" BasedOn="{StaticResource BarSeriesStyle}">
<Setter Property="CombineMode" Value="Stack"/>
<Setter Property="LegendSettings" Value="{Binding Converter={StaticResource ChartViewLegendSettingsValueConverter}}"/>
<Setter Property="ShowLabels" Value="False"/>
<Setter Property="VerticalAxis">
<Setter.Value>
<telerik:LinearAxis ElementBrush="Gray" HorizontalLocation="Right"/>
</Setter.Value>
</Setter>
<Setter Property="PointTemplate">
<Setter.Value>
<DataTemplate>
<Rectangle Fill="{Binding Converter={StaticResource PaletteConverter}}" />
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="telerik:PointSeries" BasedOn="{StaticResource PointSeriesStyle}">
<Setter Property="LegendSettings" Value="{Binding Converter={StaticResource ChartViewLegendSettingsValueConverter}}"/>
<Setter Property="ShowLabels" Value="False"/>
<Setter Property="Width" Value="15"/>
<Setter Property="Height" Value="15"/>
<Setter Property="VerticalAxis">
<Setter.Value>
<telerik:LinearAxis ElementBrush="{Binding Tab.CurrentPoC.PointSeriesColor}" HorizontalLocation="Left" />
<!--Style="{DynamicResource AxisLineStyle}"-->
</Setter.Value>
</Setter>
<Setter Property="PointTemplateSelector" Value="{StaticResource templateSelector}"/>
</Style>
</telerik:RadCartesianChart.Resources>
<telerik:RadCartesianChart.SeriesProvider>
<telerik:ChartSeriesProvider Source="{Binding Tab.CurrentPoC.GraphsToDisplay, Mode=TwoWay}">
<telerik:ChartSeriesProvider.SeriesDescriptors>
<telerik:CategoricalSeriesDescriptor x:Name="CatSeries" CategoryPath="TimeStampX" ValuePath="ValueY" ItemsSourcePath="Data" TypePath="SerieType"/>
</telerik:ChartSeriesProvider.SeriesDescriptors>
</telerik:ChartSeriesProvider>
</telerik:RadCartesianChart.SeriesProvider>
</telerik:RadCartesianChart>
To achieve your requirement, you can use the Presenter property of the DataPoint object.
The DataPoint object is the data context passed to the TooltipTemplate.
The Presenter is a property of DataPoint which holds a reference to the series object that hosts the concrete data point.
<telerik:RadCartesianChart.TooltipTemplate>
<DataTemplate>
<TextBlock Text="{Binding Presenter.DataContext.MySeriesNameProperty}" />
</DataTemplate>
</telerik:RadCartesianChart.TooltipTemplate>
You can read a bit more about the DataPoint class in the RadChartView documentation.
I got it working by adding a new property called LegendName to the data source object. And changed the binding path like this <TextBlock Text="{Binding Path=DataItem.LegendName}"/>. Not sure whether this is the proper way but it's working as intended.
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}"/>
So I have this ListView which has a DataTemplate of my UserContol because I wanted a custom design for my ListView and it looks like this
<ListView x:Name="LeftMenuListView"
ItemsSource="{Binding MenuItems}"
SelectedItem="{Binding SelectedMenuItem}"
BorderThickness="0"
Width="255">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<local:MenuItemControl/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Super simple, now when an Item is selected the entire thing changes color
which I want it looks great imo
<Style TargetType="ListViewItem">
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border
Name="Border"
BorderThickness="0">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="Border" Property="Background"
Value="#444444"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
But there is a border inside my usercontrol thats 10px wide with the name SmallBorder.
I want to change the color of that to green when the item is selected but I have no idea how to access that property
My UserControl
<Grid Background="Transparent">
<TextBlock Text="{Binding Name}"
VerticalAlignment="Center"
Margin="20,0,0,0"
Foreground="#9e9e9e"
FontFamily="Tahoma"/>
<Border Width="10"
HorizontalAlignment="Left"
x:Name="SmallBorder"/>
</Grid>
So how do I change the color of SmallBorder when an item is selected and then when it's not selected it turns transparent?
The ViewModel, which is the DataContext of you usercontrol, should expose a property like IsSelected, then you can add an style with a DataTrigger that reacts to a change in this property.
EDIT:
Declare an style for the border itself an access it as an StaticResource:
It could be placed in a ResourceDictionary, within YourUserControl.Resources or inline with the Border control declaration:
<Style TargetType={x:Type Border} x:Key=SelectedBorderStyle>
<Style.Triggers>
<DataTrigger Binding="{Binding IsSelected}" Value="True">
<Setter Property="BorderBrush" Value="Green" />
</DataTrigger>
</Style.Triggers>
</Style>
And then your UserControl would be:
<Grid Background="Transparent">
<TextBlock Text="{Binding Name}"
VerticalAlignment="Center"
Margin="20,0,0,0"
Foreground="#9e9e9e"
FontFamily="Tahoma"/>
<Border Width="10"
Style={StaticResource SelectedBorderStyle}
HorizontalAlignment="Left"/>
</Grid>
Note that now you don't need to set the name for the Border.
A Border is invisible unless there is something in it, but you could replace the Border with a Grid and use a Style with a DataTrigger that binds to the IsSelected property:
<Grid Background="Transparent">
<TextBlock Text="{Binding Name}"
VerticalAlignment="Center"
Margin="20,0,0,0"
Foreground="#9e9e9e"
FontFamily="Tahoma"/>
<Grid Width="10"
HorizontalAlignment="Left"
x:Name="SmallBorder">
<Grid.Style>
<Style TargetType="Grid">
<Style.Triggers>
<DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=ListViewItem}}" Value="True">
<Setter Property="Background" Value="Red" />
</DataTrigger>
</Style.Triggers>
</Style>
</Grid.Style>
</Grid>
</Grid>
When a TextBox element has an error The custom adorner doesn't resize the StackPanel the Textbox control lies in:
Using DockPanel.Bottom causes the adorner to overlap on the Textbox below.
The code I shamelessly lifted off http://hirenkhirsaria.blogspot.ie/2013/05/wpf-input-validation-using-mvvm.html:
<ControlTemplate.Resources>
<Style x:Key="textblockErrorTooltip" TargetType="TextBlock">
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Margin" Value="10 0 10 0" />
</Style>
</ControlTemplate.Resources>
<DockPanel LastChildFill="true">
<Border Height="Auto" Margin="5,0,0,0" Background="#DC000C" CornerRadius="3" DockPanel.Dock="Right">
<TextBlock Style="{StaticResource textblockErrorTooltip}" Text="{Binding ElementName=customAdorner, Path=AdornedElement.(Validation.Errors)[0].ErrorContent}" />
</Border>
<AdornedElementPlaceholder Name="customAdorner">
<Border BorderBrush="#DC000C" BorderThickness="1.3" />
</AdornedElementPlaceholder>
</DockPanel>
</ControlTemplate>
Sure, I could use Z Index but I don't like it.
Is there a way to cause the StackPanel to resize on error?
I was thinking of adding a ContentTemplate after each Textbox control:
<StackPanel>
<TextBox/>
<ContentTemplate/>
</StackPanel>
<StackPanel>
<TextBox/>
<ContentTemplate/>
</StackPanel>
The ContentTemplate generates an error info DataTemplate which I believe should cause the StackPanel to resize.
But I can't figure out how the binding to (Validation.Errors)[0].ErrorContent} should be done.
My terrible attempt:
<UserControl.Resources>
<DataTemplate x:Key="errorinfo">
<TextBlock>Hello World</TextBlock>
</DataTemplate>
</UserControl.Resources>
<StackPanel Orientation="Horizontal" Grid.Row="4">
<Label Padding="0,0,20,0">Name:</Label>
<StackPanel>
<TextBox Padding="0,0,10,0" Width="150" x:Name="name" Text="{Binding Path=Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True}"></TextBox>
</StackPanel>
<ContentControl >
<ContentControl.Style>
<Style TargetType="ContentControl">
<Setter Property="ContentTemplate" Value="{x:Null}"/>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=name, Path=(Validation.HasError)}" Value="True">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="{Binding ElementName=name, Path=(Validation.Errors)[0].ErrorContent}"> </TextBlock>
</DataTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</ContentControl.Style>
</ContentControl>
</StackPanel>
I can't reuse the datatemplate though!
My question is similar to: WPF- Validation -The validation error message goes behind the other controls because of AdornerDecorator
I just want a different solution.
Any ideas? Thanks
Adorner layers sit separate from the main rendering layers in WPF. A good way to think of an Adorner is simply as a graphical overlay layer which encompasses the shape of the Control it's element tags surround (similar to the behaviour of a Border for example).
You don't need a separate AdornerDecorator for every Control. This means the ideal solution would be to add the AdornerDecorator at the highest level possible such as your Window so that you are always guaranteed an Adorner scope.
I can't believe it! Figured it out myself :D
<UserControl.Resources>
<Style x:Key="textblockErrorTooltip" TargetType="TextBlock">
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Margin" Value="10 0 10 0" />
</Style>
<DataTemplate x:Key="errortemplate">
<Border Height="Auto" Margin="5,0,0,0" Background="#DC000C" CornerRadius="3" DockPanel.Dock="Right">
<TextBlock Style="{StaticResource textblockErrorTooltip}" Text="{Binding Path=(Validation.Errors)[0].ErrorContent}"></TextBlock>
</Border>
</DataTemplate>
<Style x:Key="ContentControlErrorTemplate" TargetType="ContentControl">
<Setter Property="ContentTemplate" Value="{x:Null}"/>
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=StackPanel}, Path=Children[1].(Validation.HasError)}" Value="True">
<Setter Property="ContentTemplate" >
<Setter.Value>
<DataTemplate>
<Border Height="Auto" Margin="5,0,0,0" Background="#DC000C" CornerRadius="3" DockPanel.Dock="Right">
<TextBlock Style="{StaticResource textblockErrorTooltip}" Text="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=StackPanel}, Path=Children[1].(Validation.Errors)[0].ErrorContent}"></TextBlock>
</Border>
</DataTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</UserControl.Resources>
<StackPanel Orientation="Horizontal" Grid.Row="4">
<Label Padding="0,0,20,0">Name:</Label>
<TextBox Padding="0,0,10,0" Width="150" x:Name="name" Text="{Binding Path=Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True}"></TextBox>
<ContentControl Style="{StaticResource ContentControlErrorTemplate}">
</ContentControl>
</StackPanel>
If you have ideas to improve it please let me know. I'm not sure how efficient it is but it works.
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.